Page Transitions in NextJS with GSAP

In this video, we're going to learn how to use NextJS and GSAP to make page transitions. This technique is simple but very effective, and you can use it anywhere in your own app/page.

Full code here:

0:00 Introduction
0:23 Figma design
2:00 Project walkthrough
3:32 Code start
7:35 First page (Image grid)
10:22 Animations for image grid
26:35 Tweaking image grid timeline
28:40 Page transition explanation
31:40 End page (Hero component)
32:20 Text reveal animation
34:25 End page animation
36:10 Storing multiple refs in array
37:30 Setting up animation functions
39:00 Final animations
41:40 Project walkthrough
42:10 Outro

[abdellah.coding]

Thanks so much bro, I was always searching to learn animations :( but all what YouTube search show me is simple stuff, thanks for sharing with us this long complex tutorial on your channel, I really really really appreciate it brother ❤

[strangertongues]

Great tutorial. I used GSAP's new useGSAP hook in place of useEffect, and scoped my animations to the outermost container of the component. It worked really well and met I didn't have to have multiple ref's floating around, but the core of this tutorial still stands.

[roguegoblin]

I've been stuck trying to create a page transition between the pages on my website and I always had an issue with how it played out (maybe cause I was using useEffect instead of useLayoutEffect lol). This video saved me, great explanation.

[AlleinArk]

damn, this style really reminds me with camillemormal or netherland design company I've seen before.
really great job

[agustc]

I love your videos, you are the only one to make this kind of videos and I was waiting for this for a long time 👌

[sinamaleki]

We call "<" sign as "less than" ;)

[_overmono_]

Big Thanks for all the explanations and the work you give here !

[jayasaikiran]

Bro if possible make a video tutorial on Gsap page transition overlay with loading text or percentage while navigating from one component to another component using NextJS 13 and GSAP.

[khaledxify]

man you are awesome your videos are unique great there is not a lot content like yours on youtube keep going ...

[juancastorino]

This is amazing! Very clear and solid!!! thanks!!

P.s. Please!! next time make your font size BIGGER!!

[dopetag]

That is so sick! I will watch the whole thing tomorrow an d hope i will help with my current project!
Cheers! Subscribed.

[abdrahim]

damn, this is soo good.
thank you soo much, keep it up and i hope your channel grow and grow.

[andrealvaradocampos]

excelent bro thank so much, plz more afectos with gsap so amazing!!!

[dopetag]

It is not the best solution though. It does not work with Next.js native Link component and is more like a work around.

[code.design]

What setting causes your vscode to put all attributes on a new line? Looks tidy

[healthadvice]

When I heard react I immediately say bye 😅. I only use cms 😊