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')
}
