How to build this animation?

[jackew 0 Likes (Newbie)]

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 😃

[ZachSaucier 7,151 Likes (Superhero)]

Hey jackew and welcome to the GreenSock forums. Given that site uses GSAP for its animation I'd say it's quite doable with GSAP  

 

With that being said there are multiple aspects to that transition:

• A tool like Barba or Swup to transition between pages.
• A clip-path animation to hide content inside of the container.
• Translations on all the content in the viewport to animate it in as well.

Creating something like this requires building each piece and combining it all together. There's no one plugin that you can throw in there to do it all for you