Why the timeline reverse is not putting the H1 back to its original place?

[selfspirit 0 Likes (Newbie)]

I am trying to create a page transition animation. In the codepen attached, you will find two sections. Both sections has the same H1 element, which I am trying to mimic that its moving from right to left as the page transition happen.

The H1 element has initial margin-left: auto. to move it to the right side of the container. 

The animation works okay, however, when I run the timeline in reverse. It doesn't go back to its initial position. 

 

Can somene please guide me, I am new to GSAP. Also, if there is something else I could improve in this code. Please suggest. Thanks!

Click on "Home" and "About" links on the top...

See the Pen mdzqYqZ by vikramsoni (@vikramsoni) on CodePen

[Rodrigo 5,907 Likes (Superhero)]

Hi @selfspirit and welcome to the GreenSock forums!

 

Yeah, it seems that the calculations are getting a bit off in this case.

 

On top of that animating position properties like margin, top/left, etc., is not very performant. One alternative is to use transform values like X.

 

Another is to use the Flip Plugin:

See the Pen NWOXENd by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[selfspirit 0 Likes (Newbie)]

Thank you! that solves it. I was considering the Flip plugin but was hesitant to include a plugin just to move one item from right to left.

Probably I will utilize more features of this plugin now on my site.