CODEWITHSUNDEEP
javascriptgsap
Michael Smits
Michael Smits

Reputation: 23

TweenMax GSAP not animating, only works in codepen?

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

Upvotes: 0

Views: 314

Answers (1)

Michael Smits
Michael Smits

Reputation: 23

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.

Upvotes: 1

Related Questions