Jump to content


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

Moderator Tag
Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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!

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.