TweenMax GSAP not animating, only works in codepen?

Question

Just started with GSAP Tweenmax, but i ran in some issues. Probably it's a stupid mistake i made, but i can't figure it out.

When i run this code on Codepen it works, but when i run it from my webserver it doesn't do anything.

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>

And this is the js:

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

Can someone please tell me what i'm doing wrong?

Thank you, Michael

Answer 1

I already found the issue, i loaded the js script in the header. The only thing i needed to do was to replace the script at the end of the html file so it could find the 'id' of the div to animate.

TweenMax GSAP not animating, only works in codepen?

Question

1 answers

solution1
1 2017-09-26 11:24:14

TweenMax GSAP not animating, only works in codepen?

Question

1 answers

solution1 1 2017-09-26 11:24:14

solution1
1 2017-09-26 11:24:14