Romanus Posted December 21, 2022 Share Posted December 21, 2022 Hello! Recently Next js has been updated to version 13. Added app directory. I have a server component, the text in which is loaded from the database. I would like to animate this text using gsap. I can't figure out how to do it right. Animations can only be added in client components, and loaded from the database only in server components. I would be very grateful for an example with good practice Next 13 and gsap 1 Link to comment Share on other sites More sharing options...
Cassie Posted December 21, 2022 Share Posted December 21, 2022 Hey there! Could you possibly put a demo together showing what you've tried? We have a stackBlitz collection with some starter templates. If you could show us how you have to load text in, I'm sure we can help you to figure out the missing GSAP piece of the puzzle.https://stackblitz.com/@GreenSockLearning/collections Link to comment Share on other sites More sharing options...
Rodrigo Posted December 23, 2022 Share Posted December 23, 2022 Hi, I'm working on a NextJS using the app folder with ScrollSmoother, so please stand by. But I don't have any experience with the app folder since it's still a beta feature, so please have a bit of patience on the subject. Please stand by. Happy Tweening! Link to comment Share on other sites More sharing options...
Rodrigo Posted December 26, 2022 Share Posted December 26, 2022 Hi, This is a working example for using ScrollSmoother in a NextJS app using the app folder. Basically the approach is to create the ScrollSmoother instance in the main layout component and check the pathname of Next's router to revert and create the ScrollSmoother instance via GSAP Context. https://stackblitz.com/edit/stackblitz-starters-lq58ww If someone gets or finds a better way to approach this, we're all ears. In no way we want to impose a way of doing things but to create a healthy and constructive debate so we all can find the best approach to these issues and features. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
arnevankauter Posted November 29, 2023 Share Posted November 29, 2023 Hello, unfortunately the stackblitz link you shared is not working anymore. Are there any leads on how to tackle this? Link to comment Share on other sites More sharing options...
Rodrigo Posted November 29, 2023 Share Posted November 29, 2023 Hi, I can't recall why that link is not working anymore, sorry about the inconvenience it generated. We have an up-to-date demo using Next's app router here: https://stackblitz.com/edit/stackblitz-starters-lq58ww I also updated the previous post just in case. Happy Tweening! Link to comment Share on other sites More sharing options...
arnevankauter Posted November 29, 2023 Share Posted November 29, 2023 Oh great, thank you! 1 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