mimo328 Posted June 13, 2023 Share Posted June 13, 2023 Hello, I've been using gsap for a while and I try my best to implement it in all of my projects. Due to the recent changes of Nextjs, I have been transfering all of my pure React.js applications to Nextjs. However, I am encountering some issues when it comes to animations and elements showing before the animation begins. Since I learned about gsap.context, I've been using it in my React.js and early Nextjs projects and it works perfectly. However, it seems that Nextjs 13.4.5 is having problems even when using gsap.context within useLayoutEffect. The issue occurs on the first render of the page. In oder words, it happens when you first visit the website. If you refresh it, the element stuttering wont happen. What I usually do is that I clear my history and cache to reproduce the issue again. The website will show the contents for one or less than a second, and the animation will play. I have developed a very basic application and deployed it on Vercel. I would like to know if anyone has had any problems with animations with the latest version of Nextjs and, if so, what are some possible solutions. I'm not sure if this a problem of Nextjs when loading files or gsap's compatability with the latest version of Nextjs. But I'm leaning more towards Nextjs due to the other problems I've been having with it. Here are the links to the website and Github repo: Website: https://gsap-animation-nextjs13-4-5.vercel.app/ Github: https://github.com/andresfelipe328/gsap-animation-nextjs13.4.5.git Thank you Link to comment Share on other sites More sharing options...
Solution Cassie Posted June 14, 2023 Solution Share Posted June 14, 2023 Hi there! This is just a flash of unstyled content, it happens in most sites with above the fold 'entrance' animations as the HTML and CSS are parsed before the JS This is far more apparent with next than React because React (if you're doing stuff client side, loads errrything with JS, so you don't get the brief moment where HTML and CSS are there but JS isn't) Whereas Next server side renders all the markup and then layers in JS. It's not really a problem, in all honestly it's far better to get content served fast and then have JS kick in, Next's time to first paint is far better than normal React. You just have to develop above the fold animations with this in mind. Old school thinking! i.e. Set up the initial states in the CSS See the Pen wvQKOJa by GreenSock (@GreenSock) on CodePen It's important to provide a fallback for cases where the JS doesn't load. I usually use a no-js class on the body and a little CSS animation, but you could also use a noScript tag. I've always been unsure whether style tags in noScript are valid or not? Can anyone clarify that? Usually you won't see the flash if your network is fast enough, but here's a little video showing the flash with a slow network connection. Kapture 2023-06-14 at 09.11.39.mp4 Here's some stack overflow answers - https://stackoverflow.com/questions/4454551/check-if-javascript-is-enabled-with-php/9503382#9503382 - https://stackoverflow.com/questions/218162/embedding-extra-styles-with-noscript 2 Link to comment Share on other sites More sharing options...
mimo328 Posted June 14, 2023 Author Share Posted June 14, 2023 Hello Cassie, I was able to find a solution by following your example. It's really interesting that this is just happening. I found it weird because I have done a couple of Nextjs 12 apps a while ago, and I didn't have a problem with this. Thank you for response 1 Link to comment Share on other sites More sharing options...
Cassie Posted June 15, 2023 Share Posted June 15, 2023 Maybe you were either on a fast connection or not animating elements in from 0 opacity? It's certainly not anything new or unique to Next or GSAP. This has always been a thing, it's how most websites work. Glad you got it sorted though! 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