Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

jackew

Members
  • Posts

    2
  • Joined

  • Last visited

jackew's Achievements

0

Reputation

  1. 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') }
  2. Hi guys, on this website https://alitwotimes.com/ im trying to create the sliding transition between 'work' and 'bio' ive been attempting it with swup.js but havent had any luck, so i took a look through their code and noticed they're using GSAP. ive looked for any similar examples on youtube or in the plugins section but haven't found anything. could someone confirm for me this is do-able with GSAP, and also which plugins i should look at? any info would be great as im relatively a noob with anything like this. thanks 😃
×