Reset inline "style" value when returned to default

[cmal]

I have the following TimelineLite animation:

tl
    .add(TweenLite.to(el, 0.1, {scale: 3.0}));
    .add(TweenLite.to(el, 0.3, {scale: 1.0, ease: Power2.easeInOut}));

As you can see, the animation ends by returning the scale to its original value. The problem is that the "scale" is still being set in the inline "style" in the HTML, and this is interfering with a CSS :hover state I have set.

 

So the question is: is there a way to have TweenLite intelligently remove any inline styles if the end value is equal to the original value? And if not, is there a good workaround for accomplishing the same thing?

[Rodrigo]

Hi,
 
Use clearProps like this:

tl
    .add(TweenLite.to(el, 0.1, {scale: 3.0}));
    .add(TweenLite.to(el, 0.3, {scale: 1.0, ease: Power2.easeInOut, clearProps:"scale"}));

You can read more about it here:

http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html

 

At the very bottom of the page.

 

Hope this helps,

Cheers,

Rodrigo.

[cmal]

@rhernando

 

Fast answer and exactly what I was looking for. You rock.