chaining instance of multiple tweens

[Jonathan 5,326 Likes (Superhero)]

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:

$('#slider').on("mouseenter",function(){
       tween1.pause();
       tween2.pause();
}).on("mouseleave",function(){
	tween1.resume();
	tween2.resume();
});

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!

[GreenSock 13,410 Likes (Superhero)]

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. 

[Jonathan 5,326 Likes (Superhero)]

I see... cool, thanks Jack!