redrooster Posted March 1, 2023 Share Posted March 1, 2023 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 More sharing options...
Solution PointC Posted March 1, 2023 Solution Share Posted March 1, 2023 Please try this: onReverseComplete: function() { gsap.set(swatches[i], {clearProps: 'transform'}); }, 2 Link to comment Share on other sites More sharing options...
redrooster Posted March 1, 2023 Author Share Posted March 1, 2023 Thanks PointC - perfect. So... have I just read the docs wrong for this by using 'tl'? Link to comment Share on other sites More sharing options...
Cassie Posted March 2, 2023 Share Posted March 2, 2023 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! 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now