Smoother Sliding Transitions

[shubhra]

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.

[Shaun Gorneau]

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

tl.to(oldSection, 0.5, {x:'-100%', onComplete:oldComplete, autoAlpha:0});

[shubhra]

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.

[Carl]

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.

[shubhra]

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.

[Shaun Gorneau]

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.