TweenMax GSAP не анимирует, работает только в codepen?

Просто начал с GSAP Tweenmax, но я столкнулся с некоторыми проблемами. Возможно, это глупая ошибка, которую я сделал, но я не могу понять это.

Когда я запускаю этот код на Codepen, он работает, но когда я запускаю его с моего веб-сервера, он ничего не делает.

HTML:

<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="manifest" href="site.webmanifest">
        <link rel="apple-touch-icon" href="icon.png">
        <!--CDN links for TweenLite, CSSPlugin, and EasePack-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
        <script src="./js/main-test.js"></script>
        <style>

            #svg{position: absolute;}

         </style>



    </head>
    <body>
             <div id="svg"><p>testtesttesttest</p></div>
  </body>
      </html>

И это JS:

var anim = document.getElementById('svg');
            TweenMax.to(anim, 2, {left:"100px"})

Может кто-нибудь сказать, пожалуйста, что я делаю не так?

Спасибо майкл

Источник

1 ответ

Я уже нашел проблему, я загрузил скрипт js в шапку. Единственное, что мне нужно было сделать, это заменить скрипт в конце html-файла, чтобы он мог найти "id" div для анимации.

Источник
Другие вопросы по тегам