Working with responsive animation on NextJs

[therealbeez]

I am currently working on a nextjs app and I am wondering what the correct, production-ready method is for creating animations that act differently on different screen sizes. My go to method used to be 'window.innerWidth' for the js bits, but that doesn't appear to work with ssr. So what would be the optimal way to do this?

[iDad5]

Maybe it is due to my lack of understanding of nextjs, but gsap animations are usually rendered in the browser, rendering them on the server side is something that seems odd to me. Do you have an example?

[GreenSock]

Yeah, it's tough to troubleshoot without a minimal demo, but you could probably use conditional logic like:

if (typeof(window) !== "undefined") {
  // do stuff that references window...
  if (window.innerWidth < 800) {
    //...
  } else {
    //...
  }
}

@iDad5 I think in some environments, the code actually runs multiple times - initially it runs server-side where there's no window object at all and that's where it's throwing errors for @therealbeez (I'm totally guessing here). But when when it runs in the browser (again), all the GSAP animation magic happens. 

[GreenSock]

By the way, you should definitely keep an eye out for the upcoming release of GSAP. I can't give anything away yet, but there might be a new feature that'll make responsive animations way easy.

 

[iDad5]

8 hours ago, GreenSock said:

Yeah, it's tough to troubleshoot without a minimal demo, but you could probably use conditional logic like:

if (typeof(window) !== "undefined") {
  // do stuff that references window...
  if (window.innerWidth < 800) {
    //...
  } else {
    //...
  }
}

@iDad5 I think in some environments, the code actually runs multiple times - initially it runs server-side where there's no window object at all and that's where it's throwing errors for @therealbeez (I'm totally guessing here). But when when it runs in the browser (again), all the GSAP animation magic happens. 

Ok, thanks for the explanation, guess I just assumed, that if would make no sense to let fron-end animation code run at the server at all, but I'm really not familiar with that stuff.