Jump to content
Search Community

preventing matrix transform from staying on element when transform is 0

bawwb 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

I have something that's been kinda bugging me for a bit when tweening an element's css scale property with js gsap. so i figured i would ask about it since i haven't been able to find anything bout this topic on the forum here.

 

let's say i tween something that changes the transform matrix of an element like:

 

TweenLite.to( elem, 0.5, { ease: Back.easeIn, css: { scale: 0 }});

 

and then say when i tween the element back in with:

 

TweenLite.to( elem, 0.5, { ease: Back.easeOut, css: { scale: 1 }});

 

the transform css property will stay on the element ( transform: matrix(0, 0, 0, 0, 0, 0); ) even if the scale was set back to 1.0. is there an alternative solution for scaling elements that will remove the transform automatically afterwards? or is the only solution going to be using the onComplete callback to remove the transform myself after it's done?

 

thanks!

  • Like 1
Link to comment
Share on other sites

We recently added a clearProps property that CSSPlugin recognizes that allows you to clear out any inline styles, you can clear them all or just specific ones. Check the CSSPlugin Docs:

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

 

To clear the scale:

 

 

 

TweenLite.to( elem, 0.5, { ease: Back.easeOut, scale: 1, clearProps:"scale"});
 

 

 

also to clear all transforms just use clearProps:"transform"

 

Grab the latest js files and give it a shot.

 

Also, the css{} object wrapper is no longer necessary:

http://www.greensock.com/update-2013-01/

  • Like 5
Link to comment
Share on other sites

And just to clarify, it's not possible to clear only portions of transforms because in css, all transforms are in a single property (this has nothing to do with GSAP - it's just how the spec is for all the browsers). For example, you cannot clear scale but not rotation. So if you clearProps:"scale" it will have exactly the same effect as clearProps:"transform" - both will wipe out the inline transform style ("-webkit-transform" in Chrome and Safari, "-o-transform" in Opera, etc.) It'll figure out the prefix for you. 

  • Like 1
Link to comment
Share on other sites

vuury nice. happy you added that ;)

 

noticed on safari it'll keep the backface-visibility and z-index props on tho, even after i asked it to reset the scale. but i just added z-index to the list to clear and it works good now.

 

thanks'gain!

 

_bob

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...