clearprops issue

[redrooster 4 Likes (Newbie)]

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

[PointC 14,429 Likes (Superhero)]

Please try this:

 

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

 

[redrooster 4 Likes (Newbie)]

Thanks PointC - perfect.

 

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

 

[Cassie 5,411 Likes (Superhero)]

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!