John Polacek

Chicago Web Developer

Engineering manager and frontend lead at Howl

My product recommendations at shop.howl.me

Shipping open source on Github

Follow me at @johnpolacek

TweenPages

Originally published on 9/24/2021
GreenSock plus Next.js

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.