Jump to content
Search Community

Smoother Sliding Transitions

shubhra test
Moderator Tag

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

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

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.
×
×
  • Create New...