GSAP example on Locomotive Scroll no longer working

[TaiwoJazz]

Hi guys, So I checked GSAP example on Locomotive Scroll and I found out that it doesn't work again...
I understand that the GSAP team is not managing locomotive and it's a third-party dependency I could say, but considering the fact that it's one of the listed examples in the docs... If it's no longer compatible with GSAP, I think it will be better GSAP remove it from the docs...

Even the current example shown the in the docs is not working... Kindly check...

[Reksa Andhika]

Hi @TaiwoJazz
I have test it, and example demo still working, maybe you need to check on wider Codepen demo, because Locomotive Scroll not initiate to small screen.

You can check here: fullscreen codepen demo (sorry no hyperlink, becuase gsap will detect codepen link and embed it)

https://codepen.io/GreenSock/full/zYrELYe

[GreenSock]

It sure seems like @Reksa Andhika is exactly right, as if LocomotiveScroll disables the smooth scrolling effect below a certain viewport width or something like that. If I open the demo on my desktop with an adequate browser width, LocomotiveScroll does its smoothing. 

 

As far as I can tell, this has absolutely nothing to do with GSAP/ScrollTrigger. It's purely a LocomotiveScroll thing. We didn't create that tool, so we can't really speak with authority or actively support it here. The demo in the docs is meant as a courtesy for those who were trying to use LocomotiveScroll, especially before we created ScrollSmoother which of course integrates seamlessly with ScrollTrigger, is fully supported here, and doesn't disable itself based on viewport size. 

 

https://greensock.com/scrollsmoother 

 

Happy tweening!

[TaiwoJazz]

Thanks guys... I will check GSAP scrollsmoother out.

[akapowl]

 

Yeah, looks like it's working fine - What I noticed though is that the example does contain the content twice in HTML (meaning the panels from blue to gray) So while scrolling through the first set of those works as intended, when you arrive at the second set nothing will happen, because everything already was animated/pinned with the first set.

 

Maybe someone could remove the bonus set of sections in there? @GreenSock @Rodrigo @Cassie

 

 

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

 

[Rodrigo]

Thanks for pointing that out Paul! 🙌

 

The example is updated and the extra content removed.

 

Happy Tweening!