JPM Posted July 26, 2023 Share Posted July 26, 2023 Hi, I want to animate a text container so that it appears to be coming from the center of a clicked rectangle and whill stop at the center of the screen. When clicking the x button the animation should be reversed, meaning that the text will move from the center to the div it came from. Everyhting works fine expect if I click on another rectangle or the same one again. The start position of the text container seems to be broken after reversing the animation. How can I fix this issue? The target (text container) top and left value seems to be different after the reverse animation is executed... See the Pen GRwYNKm by jaypm (@jaypm) on CodePen Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted July 26, 2023 Solution Share Posted July 26, 2023 Hi @JPM and welcome to the GreenSock forums! The problem is that there is no resetTimeline method in your example that reverts all the styles applied to the modal, so when you click in another element, the modal's initial position gets weird because of that. Reversing the timeline has nothing to do with this. Here is a fork of your codepen that takes that into account: See the Pen vYQVgrb by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
JPM Posted July 26, 2023 Author Share Posted July 26, 2023 Thanks a lot. I totally forgot to add the resetTimeline method to codepen but actually I wasn't aware of the clearProps attribute. Thanks this solved my problem. 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