Warning: Extra attributes from the server: style

[cdedreuille 11 Likes (Newbie)]

I'm working on a Nextjs 13 app and GSAP is working well but I have an annoying warning sign. GSAP is automatically adding an empty `style` tag on the body causing the bug. Is there a way to avoid this?

 

 

[Cassie 5,128 Likes (Superhero)]

Hi there!

 

I haven't seen this before actually. Would you mid giving me some clues? Were you animating the body? What plugins are you using?

 

[GreenSock 18,255 Likes (Superhero)]

Why would an empty style tag cause a bug? ScrollTrigger has to set inline styles temporarily during refresh() in order to ensure things are measured correctly and then it removes them of course. I’m baffled as to why that would cause any problems for you. I think it also sets scroll-behavior to make sure it’s not “smooth” which would break things.

[cdedreuille 11 Likes (Newbie)]

I believe this is due to the new server components structure in Nextjs 13. Our code is working fine but this warning is really annoying.

I’m also using Framer Motion who add and remove inline style as well but when styles are empty it doesn’t leave an empty style tag and no warning.

I’m using a basic scroll trigger animation and no other plugins.

is there a way to make sure style disappear if there’s no style applied to the body?

[Cassie 5,128 Likes (Superhero)]

Just an idea?

 

From the docs - 

Advanced: listening for refresh/refreshInit events

ScrollTrigger will perform a "refreshInit" event immediately BEFORE refreshing all of the ScrollTriggers on the page, and then a "refresh" event immediately AFTER it's done. You can add a listener accordingly to call a function of your choice:

So maybe you could do something like this?

ScrollTrigger.addEventListener("refresh", function() {
  if(document.body.getAttribute('style') === '') {
    document.body.removeAttribute('style')
  }
});

 

[cdedreuille 11 Likes (Newbie)]

I’ll try. It just feel weird to have to do that. Perhaps this could be something to fix in the next version of the plug-in.

[Cassie 5,128 Likes (Superhero)]

Yeah, thanks for flagging. It's very strange that it's throwing errors though as there's no negative implications of an empty style tag whatsoever.

[chacrasoftware 2 Likes (Newbie)]

run into similar issue using the app directory in NextJS 13. I'm using ScrollTrigger and ScrollSmoother plugin and managed to fix it by moving the gsap.registerPlugin(ScrollTrigger, ScrollSmoother) inside of useEffect/ useIsomorphicLayoutEffect hook.

 

hope this helps

[RawrBear 12 Likes (Newbie)]

@chacrasoftware Thank you for posting a fix! This worked for me!