GSAP ScrollTrigger(horizontal pinned scrolling) & Locomotive scroll

[Marcos Aidos]

Hello,

 

I'm new to GSAP but i was able to put some parallax and some pinned section with horizontal scroll working with ScrollTrigger, but now i wanted to add Locomotive Scroll for smooth scroll and other text animations but GSAP doesnt seem to like it.

 

After adding Locomotive scroll and initializing it, all animations done with ScrollTrigger stopped working.

 

Cant figure out the reason why.

 

I saw this in the scrollerProxy info tried to apply it to my case but with no success

const locoScroll = new LocomotiveScroll({
  el: document.querySelector(".masterpage"), //my main container (data-scroll-container)
  smooth: true,
});

locoScroll.on("scroll", ScrollTrigger.update);

ScrollTrigger.scrollerProxy(".masterpage", {
  scrollTop(value) {
    return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
  },
  getBoundingClientRect() {
    return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
  },
  pinType: "transform"
});

Anyone could help me?

 

Thank you in advance

[Cassie]

Hey there @Marcos Aidos

This recent thread may shine some light on the implementation side of things for you. Check back in if it doesn't help. ☺️
 

 

[Marcos Aidos]

Hello @Cassie,

 

Thank you for showing me that post, i read it, and tried the solution, but there they went with full horizontal scroll, i have a mixed of both in my page, i start with vertical scroll and some special sections become horizontal scroll.

 

I still didnt get how to make Locomotive scroll and gsap work well together, it seems o need to chose one scroll direction and go with it.

 

But hey, maybe its me not seeing the full picture or still not undertstanding how it all works.

[Cassie]

No worries!

Yeah, It's not a simple one. As mentioned in the thread I linked to, locomotive scroll isn't a GSAP product, so we don't really have any control over how it works alongside GSAP. 

 

There was an example in that thread of the GSAP smooth scroll helper, did you see that?

If not, here - I popped together a little demo for you.

See the Pen QWMOxBr?editors=1010 by GreenSock (@GreenSock) on CodePen

Alternately -  here's another thread with mixed horizontal and vertical solutions that may help.

 

[Marcos Aidos]

I applied that pen you showed with GSAP only, and partially worked.

 

Smooth scroll is applied but pinned sections with horizontal scroll dispear from the viewport when i reach them with scroll.

But if i resize the page and then scroll it all works well.. very strange.

[GreenSock]

@Marcos Aidos can you please provide a minimal demo? It sounds like maybe you have things dynamically loading in or something is shifting around the layout AFTER the page loads (and after you created your animations/ScrollTriggers). You can call ScrollTrigger.refresh() to force it to recalculate the start/end scroll values AFTER your layout is done shifting around. 

 

For example, if you dynamically load in a 1000px-tall image that had no size set in the CSS, it could push everything below it down by 1000px after it loads, but ScrollTrigger wouldn't know that (if it happens after the page finishes loading). ScrollTrigger pre-calculates all the start/end values in order to maximize performance at runtime. 

 

If you still need help, please provide a minimal demo and we'd be happy to take a peek. 

[Marcos Aidos]

Yes, its was something like that, since i have a master js file where i have global stuff, and then separate files with the animations, the master file was running after the other files... 

 

I'm dumb.. well thats how we learn 😅

 

Thank you to everyone.

 

BTW GSAP is awsome

[GreenSock]

Yay, glad you figured it out. And no, you're not dumb - we've all done stuff like that before. Trust me  

 

Nice to hear that you're enjoying GSAP. 🎉