Collision with pure css transition (scale persists). with -vendor-transforms

[Benew]

Hi! I'm having a problem with a webpage.

It contains 6 elements that are animated via css for :hover behaviours:

.mySel{

    -xx-transform: scale(0.8);

}

.mySel:hover{

    -xx-transform: scale(1);

}

 

On intro, I need to tween these elements' y position individually, so I use TweenLite:

 

TweenLite.to(this,1,{css:{y:50}});

 

Problem is, when my tween finishes, the tweened elements have inline styles overriding my :hover behaviour:

 

-webkit-transform: matrix(0.8, 0, 0, 0.8, 0, 0);

 

I see why jack did this but I'm open to manually resetting inline styles onComplete, but I have no way of using TweenLite to do so. I'll have to deal with vendor prefixes manually.

 

I was wishing for TweenLite.to(this,0,{css:{scale:"" or scale:"none" or scale:"auto"}}) to reset the property but no dice...

 

Can someone help me in any way?

[GreenSock]

Wish granted   I just uploaded a new version that recognizes a "clearProps" special property that's a comma-delimited list of property names that you want cleared at the end of the tween. Like this:

 

TweenLite.to(element, 1, {y:50, color:"red", width:200, clearProps:"y,color"});
 

 

Notice a few things:

• It's smart enough to recognize the "y" is part of the "transform" property and it'll clear that appropriately. It'd do the same if you used "scale" or "rotation" or "transform". It even adds the vendor prefix if necessary.
• In the tween above, I'm only clearing the transform and color properties, not the width. You get precise control of which properties get wiped. 
• If you want to clear all properties, just use the "all" keyword, like clearProps:"all"
• I didn't define things inside a css:{} wrapper because the latest version of GSAP doesn't require it (actually, it creates the wrapper for you internally if you don't do it). Of course it's perfectly fine to use the css:{} wrapper. In fact, it's slightly faster for the engine if you do, but a lot of people prefer the more concise syntax that omits the css:{} wrapper.

Please snag the latest version and let us know if it works well for you. http://www.greensock.com/gsap-js/

[Carl]

One approach would be to tween top instead of y so that there isn't any conflict with the hover.

 

With the updated files you can tween a className which will not leave any inline-css behind. Your :hover can freely change the scale of the element that has a transform:translateY() applied.

 

I made a simple demo for you here: 

See the Pen 5266771667377cdbf2eb4a64b778d0e9 by GreenSock (@GreenSock) on CodePen

 

Let us know if the new features suit your needs.