Better framework for GSAP page transitions - Next or Nuxt?

[JLernDesign]

Hi, I'm a long time GSAP fan dating back to the Flash days and trying to migrate to a js framework to build a SPA with nice fluid page transitions that integrate with a router. Curious of opinions on a better framework that really lets you be free with GSAP animations. I've been learning React/Next and finding that page transitions are not that intuitive and have noticed a lot of beautiful animated sites out there were done in Nuxt. Curious if I should change course and learn Vue/Nuxt to get the most out of all the animation goodness I love from GSAP? Thanks!

[Shaun Gorneau]

Hi @JLernDesign,

 

Have you looked into Barba.js along with its router plugin?

[Rodrigo]

Hi,

 

In no case this means that React can't work with GSAP, you can use GSAP in react environments without any issues. The problem stems from a shortcoming (and this is 100% a personal opinion and in no case a reflection of the thoughts of GreenSock on the subject) in the way React was created, since at no point a native animation solution was considered. By this I don't mean React creating an animation library or anything like that is about controlling animations, that's why developers have to resort to external libraries and packages to handle some aspects of the animations (like animate before unmounting, right after mounting, control render states, etc.), which sometimes feels quite hacky and convoluted.

 

On the other hand Vue did considered animations and added them to it's core:

https://vuejs.org/guide/built-ins/transition.html

 

Using the JS hooks in Vue is super simple and reduces the hassle you have to go through in order to create animations and you don't need any external libraries to make it work. Of course Nuxt abstracts this even more making something simple even simpler:

https://nuxt.com/docs/getting-started/transitions

 

If you're still on the fence of which framework to choose, I'd strongly recommend you to go the Vue/Nuxt route (again 100% personal opinion), they general approach is simpler and cleaner. Directives are far more intuitive IMHO than JSX, you can scope your styles on an easier way with Vue, they keep JS out of the HTML and Vue is compatible with the web component API:

https://developer.mozilla.org/en-US/docs/Web/API/Web_components

 

I haven't dig on Svelte but I heard nothing but great things about it. I know that @Dipscom uses it on his projects and that's good enough for me. Also @SteveS one of our superstars here in the forums made a nice presentation for the Svelte summit that you can find here:

 

Finally demos, because those speak more than words.

 

Page Transitions in Next:

https://stackblitz.com/edit/nextjs-13cw4u

 

Page Transitions in Nuxt:

https://stackblitz.com/edit/nuxt-starter-bthjlg

 

Hopefully this helps. If you have more questions feel free to ask.

Happy Tweening!

[JLernDesign]

Thanks @Rodrigo for the thorough explanation. That was my hunch and you've confirmed it for me. I was just reading another post you had commented in (https://gsap.com/community/forums/topic/29470-gsap-page-transitions-in-nextjs/) that had me question if React was the best choice for my interest in a heavily animated website. While it's certainly possible, it seems to me that Vue is more intuitive and easier to work with from an animation perspective. Thanks for the resources appreciate the help!