Jump to content


chaining instance of multiple tweens

Moderator Tag

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

i was trying to figure out, if possible, how to chain an instance of multiple tweens.


For example:

var tween1 = TweenMax.to('#image1', 3, {css:{scale:1.5}, ease:Linear.easeNone});
var tween2 = TweenMax.to('#slide1', 3, {css:{opacity:1}, ease:Linear.easeNone});

The above works.. but couldn't i just chain them, like below?

var tween1 = TweenMax.to('#image1', 3, {css:{scale:1.5}, ease:Linear.easeNone})
             .to('#slide1', 3, {css:{opacity:1}, ease:Linear.easeNone});

But when i try this, the browser throws an error: TypeError: TweenMax.to(...).to is not a function


The reason i'm asking is because if i have to pause the animation i have to basically use the below:


I have to declare pause and resume twice. If i had multiple tweens in one instance, i could declare pause() and resume() only once.


How do i create an instance (reference variable) for multiple tweens?


Thanks ahead of time for any help!

Link to comment
Share on other sites

Oh, gosh, you're gonna love TimelineLite and TimelineMax. I assume you haven't seen them yet. 


Here's a little video: http://www.greensock.com/sequence-video/


You can just do:

var animation = new TimelineLite()
animation.to('#image1', 3, {scale:1.5, ease:Linear.easeNone})
             .to('#slide1', 3, {opacity:1, ease:Linear.easeNone});

And then you can control the entire sequence as a single instance. pause(), resume(), reverse(), timeScale(), whatever. 


Once you get the hang of timelines, they can revolutionize your animation workflow. You can break things apart into modular pieces and since timelines can be nested inside other timelines, you can build things as you go. 


Docs: http://api.greensock.com/js/com/greensock/TimelineLite.html


Have fun. 

  • Like 1
Link to comment
Share on other sites

I see... cool, thanks Jack!

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.