Scrolltrigger sprite animation in nextjs is not working

[Tal Kleiner]

here is the demo that doesn't work:
https://stackblitz.com/edit/nextjs-xu9wek?file=pages%2Findex.js
 

I copied the demo from 
in my local machine it's the same problem, for some reason there's a height: 0px, max-height: 0px

how do I make the sprite animation on scrolltrigger work?

 

See the Pen mdVEpKK by GreenSock (@GreenSock) on CodePen

[GreenSock]

It's just CSS stuff. You've wrapped everything in 2 <div> elements that don't have height: 100%, so it's throwing everything off. I assume you wanted to do something more like this?:

https://stackblitz.com/edit/nextjs-zghs7e?file=styles%2Fglobals.css,pages%2Findex.js

 

Right? 

[Tal Kleiner]

3 hours ago, GreenSock said:

It's just CSS stuff. You've wrapped everything in 2 <div> elements that don't have height: 100%, so it's throwing everything off. I assume you wanted to do something more like this?:

https://stackblitz.com/edit/nextjs-zghs7e?file=styles%2Fglobals.css,pages%2Findex.js

 

Right? 

ok yeah so the problem in my project is that the container is overflow: hidden, position: relative
https://stackblitz.com/edit/nextjs-x4kkrj?file=styles%2Fglobals.css
I edited your solution with my css of the container

if I put height 100%, it will obviously not scroll

what are my options?

it's not a new project so I don't see me changing the overflow: hidden to something else,

is there a workaround it?

[GreenSock]

Sorry, @Tal Kleiner, we really try to keep these forums focused on GSAP-specific questions (see the forum guidelines). We just don't have the resources to troubleshoot CSS-related issues. If you've got a GSAP question, we'd love to help. 👍