Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

preventing matrix transform from staying on element when transform is 0

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?



  • Like 1

Share this post

Link to post
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:



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:


  • Like 3

Share this post

Link to post
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. 

Share this post

Link to post
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.





Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.