Jump to content
GreenSock

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

chaining instance of multiple tweens

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:

$('#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!

Link to post
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 post
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.

×