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!