NextJS Page Animation Transitions with GSAP

How to quickly get animation transitions working with NextJS and GSAP.
Follow me on Twitter: / rithmio
👨‍💻 Looking for a web developer job, visit: www.webdevjobs...
👽 Discord - / discord
👾 GitHub: github.com/six...

[@iamrithmic]

lol I had a cold when recording, anyway join the Discord server to show off what you made: discord.gg/TwUV34F6wC

[@nedyking6389]

I'm sorry to hear that and I'd like to ask you a question, if the animation is triggered independently by gsap, is it possible to simply add that functionality to the layout.tsx and not use the template.tsx?

[@nedyking6389]

Great tutorial by the way, easy to follow and most importantly to understand

[@Michael-Martell]

You should do a minor refactor to use the useGsap() hook provided by GSAP, to ensure that the animation unmounts cleanly.

[@shehabwaleed6447]

I have been searching for a proper tutorial especially with the app router and I can tell you I have found nothing, from the bottom of my heart thank you so much for it you have no idea how you saved me haha, ps the discord invitation link isn’t working for me

[@iamrithmic]

You are more than welcome and thanks for such a nice comment! Uhh Discord links always feel so flimsy. If not you can try the DIscord link in my bio

[@HenryBabbage]

Thanks for making this; was about to investigate app router page transitions, so this came at the perfect time. Would gladly see more gsap + next.js app router vids :)

[@xam858]

damnnnnn first app router page transition tutorial im blessed

[@StabilDEV]

Great tutorial, very clean! Thank you! For more semantic html I'd suggest to use an anchor tag instead of a for the (with e.preventDefeault()) which would also add progressive enhancement at no cost. And put the outside the tag and probably wrap the nav links in an too.

[@ispamtime2777]

This channel is so under rated, nice work thank you.

[@iamrithmic]

Much appreciated!

[@laeioun]

big +rep to you, this tutorial saved my project the night before deadline

[@WALiD-ot8ik]

Straight to the point , thank you dude. But u forgot cleanup things

[@stylem8132]

Thanks for the great content! Is it possible to use framer motion instead of gsap to achieve a similar effect while retaining SSR?

[@zeustechbr]

Going to recommend you for my students thanks for sharing! pretty good content

[@iamrithmic]

Awesome! This is great to hear :) More to come

[@zeustechbr]

@@iamrithmic Will be tuned in!

[@kyleatienza3773]

"long ass import statement" got me dying

[@iamrithmic]

😂

[@lawrenceborabo8935]

lol

[@wchorski]

have you messed around with the useGSAP hook or do you prefer the regular js implementation?

[@iamrithmic]

No I am going to though. Depending on how I find it, will try and do a video on it

[@SubhasishDas-r5o]

Which vscode theme are you using?

[@dikshantsinghadhikari5899]

Thank you so much for this, i wish i could thank you for million times i love you mate

[@aymenbachiri-yh2hd]

Thank you so much

[@BelalRezk-c1w]

Your a G ,man

[@iamrithmic]

Haha thanks bro :)

[@DhruvPansuriya05]

Awesome 🫡🫡🫡

[@dvizionfilmz]

great tutorial. I think using useRef is preferable to direct DOM manipulation though

[@seemol.chakroborti]

It's look awesome

[@effekt.design]

Hey brother, thanks for what you put out to the community 🤝 appreciate you. A quick question, Since we now use the “Transition link” to push between routers, We can no longer use the Next Link with this method right?

[@iamrithmic]

Hey bro, thanks for the comment, it means a lot! And yes unfortunately that would be the case. Maybe there is a way to incorporate it, Im not sure

[@effekt.design]

@@iamrithmic i have been searching for page transitions with Next14 App router, this is the first tutorial that seems to solve it in an elegant manner and scalable manner. We can also have different transitions based on current href and the href we moving to, i will play around with it and see if there is anyway to incorporate Next link with this. And If you have a discord channel, I’ll join and update you 🤝 thanks man

[@iamrithmic]

Yes exactly. The plan was to make this video so people can just expand on it. And yeah would be cool for you to join. There's a Discord link in the description :)

[@darkintaqt]

While the animation itself and the impmentation is good, I would personally hate using it. It makes the time you need to navigate the page a lot longer which, in my opinion, ruins the user experience

[@iamrithmic]

I would be surprised to see this on most websites. However can be a good way for portfolios to stand out or those sites where branding is built into the website

[@CodeFull45]

brother javascript next time plz>>>>

[@toblamabor7072]

In animations.ts the "onComplete" makes the navigation very slow, instead "onStart" looks good too especially for user experience