[chaining instance of multiple tweens]

I see... cool, thanks Jack!

[chaining instance of multiple tweens]

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!

[clearing all CSS properties on an animation element]

Awesome.. thanks Jack... Worked like a charm!

[clearing all CSS properties on an animation element]

Awesome, thanks for the quick answer!

 

Do you know if there is a way to call clearProps without having to wait until the tween completes?

 

Thanks again for the help!

[clearing all CSS properties on an animation element]

How would you clear all CSS properties that were applied to an animation element by TweenMax?

var tween = TweenMax.to($image, 5, {css:{ scale:1.5 }, ease: Linear.easeInOut, 
       onComplete: function(){
	      tween.invalidate().progress(0);
	}
});

I basically want to reset or clear all CSS properties that TweenMax adds to the inline style tag. So i can get the element back to its original state before it was animated by TweenMax.

 

I was testing with tween.invalidate() .. but I was unsure if this was correct?

 

Thank you for any help!

[Is there a way to infinitly scale an image]

Thanks Jack for the advice, i will only scale for a specific amount of time to keep the CPU processing low. And thanks jamiejefferson for the better solution, thanks!!!

[Is there a way to infinitly scale an image]

Hello,

 

Im trying to find away to infinitely scale an image. The only way i can think of is using a recursive function. I tried to use 'repeat: -1, but it just restarts the tween from the beginning value of the css property.

start();
function start(){
       TweenMax.to($(img),
                   4,
                   { css:{ scale:'+=0.5' },
                   ease: Power0.easeInOut,
                   onComplete: function(){
                            start(); 
                   }
         });
}

I was wondering if there is a better way using TweenMax or TimelineMax to infinitely scale an image? Either using (transform) scale or width and height (css or dom).

 

Basically I want to keep animating the value up, infinitely. By incrementing up, infinitely.

 

Any help will be highly appreciated! Thank You!