Timeline reverse brakes x and y position for other elements

[JPM]

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

[Rodrigo]

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!

[JPM]

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.