Guest Posted March 11 Share Posted March 11 Hello! Giving context: I'm coming from Framer Motion and porting a menu animation to GSAP. I'm using the same ease and duration as I used in Framer Motion, but I get this strange delay when the reversed animation is played (when you click "CLOSE" you can feel a delay before going back to "MENU"), if I would guess, it looks like the ease is reversed too, giving this strange animation. If it is the ease, what can I do to use the same ease but in the right direction? (sorry for my bad English) See the Pen wvZGQQP by projects-yuri (@projects-yuri) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 11 Share Posted March 11 Hi @Yuri Silva welcome to the forum! It is indeed the ease reversing what you're seeing, but there is a neath little trick by setting ease: "none" on the tween/timeline. You can then use a .tweenTo() function to play to a specific point but then use your fancy ease on that animation. https://gsap.com/docs/v3/GSAP/Timeline/tweenTo()/ Also all the transform properties are easily accessible in GSAP translateY are split in y and yPercent if you want to tween percentage values, no need to convert them to strings. Hope it helps and happy tweening! See the Pen poByqRB?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen Link to comment Share on other sites More sharing options...
Guest Posted March 11 Share Posted March 11 20 minutes ago, mvaneijgen said: Hi @Yuri Silva welcome to the forum! It is indeed the ease reversing what you're seeing, but there is a neath little trick by setting ease: "none" on the tween/timeline. You can then use a .tweenTo() function to play to a specific point but then use your fancy ease on that animation. https://gsap.com/docs/v3/GSAP/Timeline/tweenTo()/ Also all the transform properties are easily accessible in GSAP translateY are split in y and yPercent if you want to tween percentage values, no need to convert them to strings. Hope it helps and happy tweening! Thank you for the answer! This fix the main problem but I noticed that now I can't spam the button (the animation kinda waits till it reaches the end), is it related to the if statement (animation progress maybe)? Link to comment Share on other sites More sharing options...
Solution GreenSock Posted March 11 Solution Share Posted March 11 You can just use a variable to track the open/closed state: See the Pen bGJpzGP?editors=0010 by GreenSock (@GreenSock) on CodePen Spam-click as much as you want! 🙂 2 Link to comment Share on other sites More sharing options...
Guest Posted March 11 Share Posted March 11 26 minutes ago, GreenSock said: You can just use a variable to track the open/closed state: Spam-click as much as you want! 🙂 Wow! That's perfect! Thank you and mvaneijgen for the help! Appreciate that! 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