Share Posted March 28, 2021 I have a gsap timeline, which I trigger on hover and play it reversed on mouseleave. However I need to change the easing when I play the timeline reversed. Is there a way I can do this without duplicating the whole timeline again? Here is a stripped down example, full example is in the codepen. const ease = 'power2.out' const tl = gsap.timeline({ paused: true }) // tweens here... card.addEventListener('mouseenter', (e) => { tl.play() }) card.addEventListener('mouseleave', (e) => { // need to somehow change the easing to 'power2.in' here tl.reverse() }) See the Pen abpZWOJ?editors=0010 by marco_fugaro (@marco_fugaro) on CodePen Link to comment Share on other sites More sharing options...
Share Posted March 28, 2021 Hey @marco.fugaro - welcome to the forums. I think technically exchanging the ease(s) would result in logic issues as was hinted to in this thead What you could do though, is tween on the time of the timeline instead and use different eases there as suggested by @PointC in this thread: With your example that could look something like this; seems to work quite right. Does that work for you? See the Pen 05ad643619fcaf511016a2ebf761bd74 by akapowl (@akapowl) on CodePen Please note, that I updated your GSAP version in this pen to 3.6.1 because from what I understood there were some issues with .tweenTo/.tweenFromTo in 3.6.0, as mentioned in this thread: 2 Link to comment Share on other sites More sharing options...
Author Share Posted March 28, 2021 Hey @akapowl, thanks for the solution, didn't know about that method. Worked out leaving `ease: 'none'` in the timeline and using the eases in `tweenFromTo` calls. 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