Jump to content
Search Community

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

Benew test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

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


    -xx-transform: scale(0.8);



    -xx-transform: scale(1);



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




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?

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

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.

Link to comment
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.
  • Create New...