Locomotive Scrolling Not Working with GSAP/BarbaJS

[Giovanny7]

For some reason when I put locomotive scrolling in a function and call it on the once() function inside the barbaJS init everything seems to stop working?

 

Purpose: As soon as the page loads I want locomotive to start and all the animations should start working as well. 

 

What I did: I put the locomotive scroll functionality outside a function without it being called and everything works, but I'd like to do it within the barbajS once() function. Anyone has an idea of what is causing this error?

See the Pen GRYRBvb by officialgio (@officialgio) on CodePen

[Rodrigo]

Hi @Giovanny7 and welcome to the GreenSock forums!

 

Unfortunately I have literally no experience with Locomotive and Barba so I can't really help you with this. Also both are not GSAP products/plugins so we don't have the bandwidth to give proper support for these tools. The one thing I see is that your codepen example is throwing this error when I try to scroll with the mouse wheel:

Uncaught TypeError: Cannot read properties of undefined (reading 'length')

Maybe create all your GSAP instances in the Barba callback as well, I mean wait for everything barba related to be completed to then create your GSAP and Locomotive code.

 

There are more than a few examples of using ScrollTrigger with Locomotive so my main suspect is Barba and when exactly your code is running.

 

Sorry I can't be of more assistance.

Happy Tweening!