SmoothScroller's element stops moving at a certain point when used with CSS grid

[skadoosh]

I'm trying to create a layout where images are scatter around and overlap each other using CSS grid and apply different data-speed to make it looks parallax by using smoothscroller.  This works fine with flexbox but when I used with CSS grid, Image start to move until it hits the top of viewport and then it stop moving. In demo, you can clearly see how the second image stop moving when it hit the top of viewport. This seems weird because when I used with flexbox it works perfectly.

See the Pen JjpmvzN by skadooshmp (@skadooshmp) on CodePen

[GreenSock]

That's because the ".item" elements are actually much shorter than you think they are  Try setting a border on them and/or overflow: hidden and you'll see what I mean. 

 

So ScrollSmoother is doing its job of only animating those while they're in the viewport...but you've got nested images in there that are still on-screen when the items are technically outside the viewport. 

 

So you'll need to either adjust your CSS/layout so that the images are fully contained within those ".item" elements or just put your data-speed on the images themselves instead of their container(s). 

 

See the Pen NWYxwRo?editors=0010 by GreenSock (@GreenSock) on CodePen

[skadoosh]

Thank you so much for pointing this out. I've some problem when applying data-speed on gatsby-plugin-image component in my real project so I have to wrap image with div and add data-speed on it. Haven't think that would cause a problem my bad 🙏

[GreenSock]

No problem! Glad it's clear now. And thanks for being a Club GreenSock member. 💚