Jump to content


Warning: Extra attributes from the server: style

Recommended Posts

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?


CleanShot 2023-01-21 at 11.03.51@2x.png


CleanShot 2023-01-21 at 11.04.32@2x.png

Link to comment
Share on other sites

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?


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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') === '') {


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...

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 useEffectuseIsomorphicLayoutEffect hook.


hope this helps

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

  • 1 month later...

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.