Jump to content


clearprops issue

Moderator Tag
Go to solution Solved by PointC,

Recommended Posts

Hi all,


I am having an issue clearing props as per the codepen attached.


On mouseenter, I want to animate each column to 100% width and translate its x position to 0 (so rectangle covers 100% width)


On mouseout, I want to reverse the animation to its start state but also remove the translate GSAP injects.


When I add:


onReverseComplete: function() {
   tl.set(swatches[i], {clearProps: 'transform'});


it is not acting how I expect and does not remove any props, it retains a pixel value for the translate....this means when browser is resized all coluns are not aligned.

See the Pen dyqvXvN by marklawrencedesign (@marklawrencedesign) on CodePen

Link to comment
Share on other sites

  • Solution

Please try this:


onReverseComplete: function() {
   gsap.set(swatches[i], {clearProps: 'transform'});


  • Like 2
Link to comment
Share on other sites

Thanks PointC - perfect.


So... have I just read the docs wrong for this by using 'tl'?


Link to comment
Share on other sites

Hey there, timelines are for animations that need to be sequenced one after another.

In your reverseComplete callback you're clearing properties in an instant 'set' tween. This doesn't need to be sequenced on a timeline as it's not placed in relation to any other tweens. It's just being run instantly when the callback fires.

Hope this helps!

  • Like 2
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.