Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
voguewebservices

My first tween

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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"

  • Like 1
Link to comment
Share on other sites

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/

  • Like 2
Link to comment
Share on other sites

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});
});

});

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×