Jump to content


Smoother Sliding Transitions

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello to all,


Firstly, thank you for making such a wonderful and amazing plugin. I am a complete newbie in the world of javascript so please be patient with me.


I am making a slide in and out page transition after an ajax request, however, Its not very smooth and flawless. Can I please get some pointers on what options I can use to make this look beautiful like the transitions here - http://tympanus.net/Development/PageTransitions/


See how the footer jumps after new content is loaded.

See the Pen ojvGRX by shubhra (@shubhra) on CodePen

Link to comment
Share on other sites

Tween the x and autoAlpha properties rather than the left and opacity properties

tl.to(oldSection, 0.5, {x:'-100%', onComplete:oldComplete, autoAlpha:0});
  • Like 1
Link to comment
Share on other sites

Thanks Shaun, do I need to make some changes in the CSS or the timeline because there are still jumps and the new_content leaves a gap above the footer before sliding from right to left. Sorry for the trouble.

Link to comment
Share on other sites

Yup, as Shaun suggested, changing to x/y should be much better than left and right. 


It appears the reason your  footer is moving is because you are adding new content to the DOM / HTML. The footer has to move out of the way as soon as that happens.


Unfortunately I think you are going to have tweak the logic a bit regarding when the new content is added and account for the varying heights of the old content and new content. I would suggest the following order of operation.


  1. load new content (do NOT add it to DOM)
  2. record height of old content
  3. move old content off screen
  4. figure out height of new content
  5. animate the height of the content wrapper to match the height of the new content
  6. add new content to DOM
  7. animate the new content in

Not exactly sure how you are envisioning this working, but you need to account for the fact that the height is going to change and you will want to handle that smoothly I assume. Unfortunately that is a bit beyond what we typically do to help. Someone might have a simple solution for you, but we really have to stay focused on the core GSAP API.

Link to comment
Share on other sites

Thank you for helping me out. I will get to work on what you have suggested. I love watching Greensock demos on codepen. So much to learn.

Link to comment
Share on other sites

Yeah, there's a bit that would have to be done from a CSS standpoint. Not entirely sure what your looking to do ... but here are some CSS mods that might help.


See the Pen RWbjML by sgorneau (@sgorneau) on CodePen

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.