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.io/
👽 Discord - / discord
👾 GitHub: github.com/sixfwa/nextjs-gsap...

Пікірлер: 34

  • @iamrithmic
    @iamrithmic

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

  • @ispamtime2777
    @ispamtime2777

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

  • @Michael-Martell
    @Michael-Martell

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

  • @HenryBabbage
    @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
    @xam858

    damnnnnn first app router page transition tutorial im blessed

  • @StabilDEV
    @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.

  • @shehabwaleed6447
    @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

  • @dikshantsinghadhikari5899
    @dikshantsinghadhikari5899

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

  • @zeustechbr
    @zeustechbr

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

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd21 күн бұрын

    Thank you so much

  • @WALiD-ot8ik
    @WALiD-ot8ik

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

  • @user-rh9wd7qx7o
    @user-rh9wd7qx7o

    Your a G ,man

  • @kyleatienza3773
    @kyleatienza3773

    "long ass import statement" got me dying

  • @stylem8132
    @stylem8132

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

  • @wchorski
    @wchorski

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

  • @darkintaqt
    @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

  • @dvizionfilmz
    @dvizionfilmz

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

  • @CodeFull45
    @CodeFull45

    brother javascript next time plz>>>>

  • @toblamabor7072
    @toblamabor7072

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

  • @effekt.design
    @effekt.design

    Hey brother, thanks for what you put out to the community 🤝 appreciate you.