Jump to content
GreenSock

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

JS tween not tweening, just moving to final position

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Just trying a simple transition with JS tweenMax:

 

var main0 = $('#mainDiv0');

TweenMax.to(main0, 5, {left:'-1024', onComplete:onTransitionend});

 

What is happening is after 5 seconds the div is snapping to the left position set in the tween. Any ideas what could be causing this? Unfortunately this is a large iPad app so the code can't be uploaded. Just wondering if there is something I should be looking for with this behavior.

 

THANKS!

Link to comment
Share on other sites

Looks like you just forgot to wrap your css-related properties in a "css" object:

 

var main0 = $('#mainDiv0');
TweenMax.to(main0, 5, {css:{left:-1024}, onComplete:onTransitionend});

 

Remember, TweenMax isn't just for tweening css properties - it can tween ANY numeric property of ANY object. That's why you need to specify your intent using the "css" object. Otherwise, it literally tries to tween main0.left (which doesn't exist).

Link to comment
Share on other sites

ok. I updated my TweenMax line to include the CSS but still seeing the same results. I moved all the js files I need to a scripts folder and initialize like this:

 

<script type="text/javascript" src="scripts/CSSPlugin.min.js"></script>

<script type="text/javascript" src="scripts/EasePack.min.js"></script>

<script type="text/javascript" src="scripts/TweenMax.min.js"></script>

 

Is there something else I need to do to get the css plug in to work?

 

THANKS!

Link to comment
Share on other sites

It's tough to troubleshoot blind - can you zip up your files (or a generic sample) and post them here?

 

For the record, TweenMax already includes CSSPlugin and EasePack, so you don't need to load those too. Just the TweenMax.min.js file is all you need.

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.
×