Share Posted September 17, 2021 Hey everyone! I've been working on a fun demo project called TweenPages to show how I do complex page transitions with GSAP in Next.js. I haven't shared it yet with anyone publicly until now. Would love to get some early feedback. Especially on the docs where I go into detail on the code side of things. Am I doing it right? Am I doing it wrong? Are there things I can improve? Fun! - https://tweenpages.vercel.app/ Docs - https://tweenpages.vercel.app/docs Code - https://github.com/johnpolacek/TweenPages Hope the project helps anyone who want to do GSAP animations like these on Next.js. 14 Link to comment Share on other sites More sharing options...
Share Posted September 18, 2021 Hi John! Thanks for sharing, this looks like a really useful resource. I'll take a look and pop you the feedback if I think of anything useful. Link to comment Share on other sites More sharing options...
Share Posted October 1, 2021 Hello John, Thanks for sharing. I've been looking for something like this. 1 Link to comment Share on other sites More sharing options...
Share Posted November 10, 2021 Thanks a lot for this John, been looking for resources like this since migrating from Gatsby --> Next! Great work, will try this out very soon! 1 Link to comment Share on other sites More sharing options...
Share Posted May 18, 2022 Hi John, this is great! I downloaded the repo and ran it locally. I'll be dissecting the code and adding the functionality to my own projects. Thanks for sharing this! Link to comment Share on other sites More sharing options...
Author Share Posted May 18, 2022 Thanks everyone - glad you're finding it useful! Haven't had much time to keep the project up to date as I started a new job but the approach should continue to work. 1 Link to comment Share on other sites More sharing options...
Share Posted May 18, 2022 Looks really amazing John. Thanks for sharing. Link to comment Share on other sites More sharing options...
Share Posted December 16, 2022 Really great resource. Wish someone had the skills to adapt it to next.js 13 ...with bonus points for using the app folder, if that is even possible. Link to comment Share on other sites More sharing options...
Share Posted December 16, 2022 There shouldn’t be any difference in using gsap with Next 13 app directory as far as I’m aware. The only thing is Next 13’s app directory uses React server components by default until you mark a component as client. You can’t use gsap in server components since server components do not allow useEffect() which gsap with React relies on. So use it in the components marked as client. (Also worth noting Next 13’s app directory is still in beta) 2 Link to comment Share on other sites More sharing options...
Share Posted December 16, 2022 Thanks, @omarel ...I know it's beta, but since it's a side project and something that probably won't come online, I am also using it as an opportunity to learn next + GSAP. To be honest also trying to decide if GSAP or Framer Motion is a better fit for my needs and way of working. RE: GSAP working in next.js 13, I think you're right... no issues as long as you mark the right files with "use client". But as I am learning, I wanted to pick apart exactly this demo / resource ...which is wonderful, and to see it working and adapted to the new app model. I am also trying to be convinced that page transitions, more specifically exit page transitions, are working *at all* in next.js at present, again...using the app approach. But I am not sure if the failure is with next.js or Framer Motion. I'm using "failure" gently here, I know, I know... it's beta! Link to comment Share on other sites More sharing options...
Share Posted December 16, 2022 The repo above was done in Next 12. So the first step I would do is take the repo above clone it on Next 13 as is and see if it works. Then if it does you know it works in 13 then you can move into debugging your own project. 1 Link to comment Share on other sites More sharing options...
Share Posted December 16, 2022 Yep that was the first thing I did... and it didn't go well! But I went straight for a conversion to the app folder, probably ambitious I'll try again tomorrow and see if I can get it stable in /pages and on 13, and then take it from there. 🙏 Link to comment Share on other sites More sharing options...
Share Posted December 18, 2022 Hi, In the mean time while either John or someone else can update the package to work with NextJS 13, here is a simple example that uses GSAP and React Transition Group to create the animated transitions between pages: https://stackblitz.com/edit/nextjs-13cw4u Right now it seems that Stackblitz has a few issues with their webcontainer (what they use to run Node and SSR on the browser). Here is the same example but using React and React Router: https://stackblitz.com/edit/react-6rzfpp Hopefully this helps in the meantime. Let us know if you have more questions. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Share Posted December 18, 2022 Awesome. Thanks @Rodrigo. I have looked for a way to export the nextJS 13 example to codesandbox.io, hoping maybe it would run there. 🧐 Not sure if that is a function in stackblitz and I just can't find it, or if it's not possible. Otherwise I can rebuild it from the package.json and give it a spin. Or locally. I'll let you know how I get on. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now