Issues with Gsap animations using Nextjs 13.4.5 (Production mode only)

[mimo328]

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

[Cassie]

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.  

 

 

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

[mimo328]

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

[Cassie]

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!