TweenPagesOriginally published on 9/24/2021
One of the things that makes Next.js so great is that you can create a modern, slick single page app experience while keeping the performance and other benefits of classic server-side rendering and routing.
There is an official next-page-transitions example that demonstrates how to add a loading state when navigating to a page, wait for the page to load its content and animate in when it's ready.
What about something more ambitious and complex? We could offer something more ambitious:
- Intro and outro animations defined at the component level
- A higher order component that manages page transitions and the animations of nested child components
- Re-usable, declarative animation componenents
- No flash of unstyled content on initial page load
That’s what I’ve built with TweenPages which brings the power of the Greensock Animation Platform (GSAP) into Next.js. Check it out:
If you’re new to GSAP, a great place to get started with GSAP and React is to read GSAP + React, First Steps & Handy Techniques and GSAP + React, Advanced Animation Techniques.