Looking for advice on page transitions

[jackew 0 Likes (Newbie)]

Hi, this is my first time working with GSAP (and barba.js), and so far its been amazing. I've got some super basic page transitions running, but I'd really appreciate  some advice/guidance how to take them to the next step.. 

 

I'd really like to be able to recreate something like this websites page transitions, specifically between 'work' and 'contact'  https://alitwotimes.com/

It feels like a totally seamless transition, the old content slides out as the new content slides in.. its so nice but I'm pretty lost on how to create anything even remotely similar

 

I believe I can create an easing thats similar here (please correct me if I'm wrong) https://greensock.com/docs/v3/Eases  but I'm lost on how to do the rest of the animation, are there any specific docs I should take a look at? I'm kinda confused as to how I can 'learn' or 'improve' my abilities with GSAP..

 

thanks for looking 😃

 

below is my current simple & basic page transitions 

 

// Function to add and remove the page transition screen

function pageTransitionIn() {

// GSAP methods can be chained and return directly a promise

// but here, a simple tween is enough

return gsap

// .timeline()

// .set(loadingScreen, { transformOrigin: 'bottom left'})

// .to(loadingScreen, { duration: .5, scaleY: 1 })

.to(loadingScreen, { duration: 1, scaleY: 1, transformOrigin: 'bottom left'})

}

// Function to add and remove the page transition screen

function pageTransitionOut(container) {

// GSAP methods can be chained and return directly a promise

return gsap

.timeline({ delay: 1 }) // More readable to put it here

.add('start') // Use a label to sync screen and content animation

.to(loadingScreen, {

duration: 1,

scaleY: 0,

skewX: 1,

transformOrigin: 'top left',

ease: 'slow.out'

}, 'start')

.call(contentAnimation, [container], 'start')

}

 

[ZachSaucier 7,151 Likes (Superhero)]

Hey jackew. The transitions on this site was asked about in these forums:

 

20 hours ago, jackew said:

I'm kinda confused as to how I can 'learn' or 'improve' my abilities with GSAP..

That comes mostly from practice! Over time you learn what properties and tools are useful for creating particular effects. Most of your learning is actually about how to use certain CSS/SVG/Canvas/WebGL properties to create the effect that you need. Then you animate those properties with GSAP  You're welcome to try and answer people's questions in these forums to get practice and learn. It's a great way of learning as at least one of our moderators, PointC, attested.