Блог

Главная - Вопросы по программированию - Ошибка получения: неперехваченная ошибка ссылки: gsap не определен на базовой странице HTML / CSS / JS

Ошибка получения: неперехваченная ошибка ссылки: gsap не определен на базовой странице HTML / CSS / JS

#javascript #html #css #gsap

#javascript #HTML #css #gsap

Вопрос:

Я создал веб-сайт, используя простой HTML, CSS и ванильный JavaScript. Тем не менее, я пытался использовать gsap для создания некоторых анимаций, я импортировал CDN в тег скрипта, но по какой-то причине, когда я запускаю код, в консоли я получаю сообщение об ошибке:

Вот код:

 <!DOCTYPE HTML>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>San Francisco</title>
  </head>
  <body>

  <header>
    <nav class="main-nav">
      <div class="logo">
        <a href="index.html">San Francisco</a>
     </div>
     <div class="hamburger-menu">
        <span class="bar"></span>
     </div>
     <ul class="nav-list">
        <li class="nav-item">
           <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
           <a class="nav-link" href="#">Tours</a>
        </li>
        <li class="nav-item">
           <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
           <a class="nav-link" href="#">Locations</a>
        </li>
        <li class="nav-item">
           <a class="nav-link" href="#">About</a>
        </li>
      </ul>
    </nav>
  </header>

  <section class="hero">
    <div class="hero-clipped">
      <div class="hero-textbox">
        <h1 class="main-heading">
           San Francisco
        </h1>
        <h2 class="sub-heading">
              Learn about our awesome tourist attractions
        </h2>
        <a href="#" class="cta-btn">Learn more</a>
     </div>
   </div>
 </section>

 <script source="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
 <script>
   const mainNav = document.querySelector('.main-nav');
   const hamburgerMenu = document.querySelector('.hamburger-menu');

   hamburgerMenu.addEventListener('click', () => { mainNav.classList.toggle('open'); });
  
   gsap.fromTo('.hero-clipped', {scaleX: 0}, {duration: 1, scaleX: 1});
 </script>
 </body>
 </html>

Что я делаю не так? ваша помощь будет по-настоящему оценена.

Комментарии:

1. в вашем <script> теге это должно быть «src =», а не «source =».

Ответ №1:

Это была действительно глупая ошибка! У меня был такой исходный код сценария:

 <script source="djasncklassaj"></script>

Вместо:

 <script src="dfkjafdssds"></script>

Спасибо, @Pointy за помощь!