Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
aroca

ScrollProxy with Locomotive & Nextjs

Go to solution Solved by GreenSock,

Recommended Posts

Hi,

 

im tying to use scrollProxy with locomotive like in the docs with Nextjs. Locomotive works fine but scrollTrigger its always at the initial position. It seams that the scrollTop inside the scrollerPoxy its not returning any value. I made a codesandbox to show the case:


Scroll component: 
https://codesandbox.io/s/nextjs-gsap-locomotive-qq11t?file=/src/components/scroll.jsx  

Live demo: 

https://qq11t.sse.codesandbox.io/
 

I'm looking for a good way to implement a smooth-scroll in nextjs so if any have an alternative to locomotive and works with gsap it would help any way.

Thx, for the support

Link to post
Share on other sites

Welcome to the forums, @aroca

 

We don't really support 3rd party libraries here, but we're happy to answer any GSAP-specific questions. I glanced at your demo and I didn't see any ScrollTriggers set up at all. I wasn't quite clear on what you were expecting to happen. 

 

These docs might help:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy()

Link to post
Share on other sites

Hi, thx for the answer.

 

This is what I have to sync scrollTrigger with locomotive:

src/components/scroll.jsx

 

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

          ScrollTrigger.scrollerProxy(scrollWrapper.current, {
            scrollTop(value) {
              console.log(locoScroll.scroll.instance.scroll.y);
              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: scrollWrapper.current.style.transform
              ? "transform"
              : "fixed"
          });

          ScrollTrigger.addEventListener("refresh", () => locoScroll.update());

          ScrollTrigger.refresh();

The docs shows a similar example but it seems that the scrollTop() is not working. This  "console.log(locoScroll.scroll.instance.scroll.y);" is working on the example but not there, thats what it makes me think that is something that i made in the wrong way with the scrollProxy.

The animation is here:
 

  const animationTl = gsap.timeline();
    ScrollTrigger.create({
      trigger: ".gsap-container",
      animation: animationTl,
      markers: true,
      start: "top center+=300px",
      end: "top center-=300px",
      scrub: true
    });

    animationTl.to(".square", {
      rotateZ: 90,
      x: "100%"
    });

 

And it works perfect without locomotive.

What I expect its that scrollTrigger takes the scroll position of locomotive instead of the main scroll as its 0 always with the overfllow: hidden of the body.

Thx for the help, I'll keep searching 😊
 

Link to post
Share on other sites

It looks like you forgot to define a "scroller" in your ScrollTrigger - remember, when you create a scrollerProxy(), you're basically saying "whenever someone uses this particular scroller _____, I want to use this special logic for it..."

 

In your case, you set up the scrollerProxy for scrollWrapper.current but you never defined scroller: scrollWrapper.current on your ScrollTrigger to point it to that one. 

  • Thanks 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×