My first tween

[voguewebservices 1 Likes (Newbie)]

Hi,

I have no idea why this is not working on my desktop or on my web server but works in Code Pen. I have the latest cdn and the js and css files all link fine.

 

 

Thanks

Allan

See the Pen NqOdGY by voguewebservices (@voguewebservices) on CodePen

[Shaun Gorneau 1,503 Likes (Superhero)]

What's the URL for the one on your server?

[voguewebservices 1 Likes (Newbie)]

Hi Shaun,

 

Thanks for your response here is the url http://www.voguewebservice.com/kayleensblog/testsite/animation.html

[Shaun Gorneau 1,503 Likes (Superhero)]

Your Javascript is firing before the document is ready. Try

document.addEventListener("DOMContentLoaded", function(event) { 
   TweenMax.to(".logo", 2, {left:600});
});

or, if using jQuery

$( document ).ready(function() {
  TweenMax.to(".logo", 2, {left:600});
});

I'd recommend jQuery since it's ready() method is more involved than "DOMContentLoaded"

[Jonathan 5,176 Likes (Superhero)]

Hello voguewebservices and welcome to the GreenSock Forums!

 

When your running it on your desktop, are you using the script from the CDN? Also when on your desktop are you loading TweenMax or just TweenLite? If you are just running TweenLite, you will need to also include the CSSPLugin.

 

Since you are trying to animate left CSS property. Please try also loading it or just load TweenMax that includes CSSPlugin and other great GSAP plugins.

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/CSSPlugin.min.js"></script>

or just load TweenMax:

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>

Does that help?

 

Also keep in mind that anytime you animate position, its always better to use x and y instead of left and top for smoother animation that interpolate the tween on a sub-pixel level.

 

And dont forget to make sure the DOM and window is ready before applying your animation.

 

Reference:

 

CSSPlugin: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

Myth Busting: CSS Animations vs. JavaScript: https://css-tricks.com/myth-busting-css-animations-vs-javascript/

Why Moving Elements With Translate() Is Better Than Pos:abs Top/left: http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

[voguewebservices 1 Likes (Newbie)]

Thanks every one for your help I'm new to this and forgot to put the jquery script in and a long with the code from Shaun and the reminder about jquery I have it working

•  

 $( document ).ready(function() {

  TweenMax.to(".logo", 2, {left:600});

});

});