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

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 🙏

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

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

[Pinning and scrub once but without whitespace?]

Thank you so much! finally found some limitation on locomotive-scroll with GSAP. Will try this out with Scroll smoother 

 

Updated: This is how it looks like when implement with scrollSmoother (no flash/jump)

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

[Pinning and scrub once but without whitespace?]

I'm working on something that look similar to this codepen [locomotiveScroll + ScrollTrigger]. All scrub and pin work perfectly on orange section until I add "once:true" this will leave white space 100% viewport as we setup in end parameter and push orange section under pin's whitespace. I believe that this is how scrub and pin spacing work. What I really want to do here is to improve UX in my app by stop scrub animation when it onComplete or play animation once just like how I add "once:true" but want to acheive this without pin's whitespace. I'm not sure about the pinType either since I use locomotiveScroll with scrollTrigger, this force me to use pinType as transform instead of fixed. I have tested it without locomotiveScroll but whitespace still remain so I believe it's not the caused of whitespace. Any suggestion on this? Thanks in advance 

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

[Weird flip animation when using with scrollTrigger]

Update:  I just find out the cause of problem here. Have made slightly change from my codepen. It looks like setIsRow is called synchronously with Flip getState. I try to add delay by wrapping setIsRow with setTimeout to ensure that Flip getState is called first before the DOM change as you mentioned and it works perfectly. 

 

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

 

[Weird flip animation when using with scrollTrigger]

Thank you for you tips and thoughts. It seems like the problem either come from React or timeline. I will try to recreate a new starting point on React and investigate what cause the problem.

[Weird flip animation when using with scrollTrigger]

Hi I just discovered GSAP 4-5 days ago. Have seen a lot of amazing demo and play around like crazy this tools really motivate me and spark a lot of ideas and creativity. Thanks for this amazing tool.  I'm working on transforming grid layout with React, locomotive scroll, and GSAP. What I really want to do here is to reveal text and do flip animation on grid cols (2 -> 6)  when scrollTrigger is entered. This work perfectly if I didn't set scrollTrigger but use toggle by pressing the flip button instead you can try it from the codepen. There is a weird animation happen if I setup a scrollTrigger, text will start spinning and instantly change to position. Also, If you flip before the reveal animation end this will cause the text reposition instantly. I would like to make the flip animation scrub too by start at onEnter and stop at some point maybe at the end of section.

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