The issue when combining ScrollTrigger and scrollTo plugin

[NirvanaWorld]

Hi! guys,There is a conflict between the element with ScrollTrigger pin enabled and the element with ScrollTrigger scrollTo enabled.

 

Here is a small reproduction of the issue: https://stackblitz.com/edit/nuxt-starter-g86tl5?file=pages%2Findex.vue

 

You have observed that when ScrollTrigger triggers scrollTo, the page first scrolls from the current position to the top and then to the expected scrollTo position. However, you expect it to scroll directly from the current position to your desired position. You have tried removing the element with ScrollTrigger pin enabled, and everything works fine in that case. Therefore, you believe that the issue lies in the conflict between pin, pinSpacing, and scrollTo. Has anyone identified any mistakes I made in the minimal reproduction?

 

[mvaneijgen]

What do you expect this block of code to do? 

  gsap.to(window, {
    scrollTo: scrollToWrapper.value,
    scrollTrigger: {
      trigger: scrollToWrapper.value,
      start: 'top bottom',
      end: `bottom bottom`,
      markers: true,
    },
  });

To me this will on page load scroll to the pixel values scrollToWrapper.value will give and the ScrollTrigger will do nothing in this case. Usually you would create a scrollTo tween on an interaction like click and then scroll to the desired location, this will in my eyes never have a ScrollTrigger object. Other elements (or even the same element you scroll to can have ScrollTrigger logic, but not inside a scrollTo tween itself)

 

2 hours ago, NirvanaWorld said:

You have observed that when ScrollTrigger triggers scrollTo, the page first scrolls from the current position to the top and then to the expected scrollTo position

 I don't see this happening, for me it just scrolls to scrollToWrapper.value on page load. 

 

My advice would be split all the ScrollTrigger logic and the scrollTo logic apart, they can be in the same tween and start by creating your ScrollTriggers  before you create the scrollTo logic. Hope it helps and happy tweening! 

[NirvanaWorld]

35 minutes ago, mvaneijgen said:

What do you expect this block of code to do? 

  gsap.to(window, {
    scrollTo: scrollToWrapper.value,
    scrollTrigger: {
      trigger: scrollToWrapper.value,
      start: 'top bottom',
      end: `bottom bottom`,
      markers: true,
    },
  });

To me this will on page load scroll to the pixel values scrollToWrapper.value will give and the ScrollTrigger will do nothing in this case. Usually you would create a scrollTo tween on an interaction like click and then scroll to the desired location, this will in my eyes never have a ScrollTrigger object. Other elements (or even the same element you scroll to can have ScrollTrigger logic, but not inside a scrollTo tween itself)

 

 I don't see this happening, for me it just scrolls to scrollToWrapper.value on page load. 

 

My advice would be split all the ScrollTrigger logic and the scrollTo logic apart, they can be in the same tween and start by creating your ScrollTriggers  before you create the scrollTo logic. Hope it helps and happy tweening! 

Hi, thank you for your response.

 

As you can see, scrollToWrapper is a container that covers the entire screen. I expect this code to trigger a scrollTo when scrollToWrapper is about to enter the viewport, causing scrollToWrapper to scroll to the edge and align with the viewport, just like setting scroll-snap-align for an element.

 

Everything happens in an instant, and it may require multiple attempts to carefully observe the movement of the scroll bar in order to identify the issue. Indeed, as I mentioned, when scrollTo is triggered, the page does scroll to the top of the entire page first and then scrolls to the desired position

[NirvanaWorld]

Now I have added some contrasts in the code for you to observe. Please pay attention to these two different scenarios separately. I would like to remind you again that everything happens very quickly, and you may need to try multiple times and focus on the scroll bar.

[Rodrigo]

Hi,

 

What exactly are you trying to do?  You want the window to jump to a specific section when you scroll to some point? If that's the case then use ScrollTrigger's create method in order to use one of the callbacks to create the GSAP instance with the ScrollTo plugin.

 

Something like this:

ScrollTrigger.create({
  trigger: element,
  start: "top bottom",
  end: "bottom top",
  onEnter: () => {
    gsap.to(window, {
      scrollTo: {
        y: // value here,
      }
    });
  },
});

Keep in mind that ScrollTrigger has multiple callbacks available: onEnter, onLeave, onEnterBack and onLeaveBack.

 

Finally it might be helpful to take a look at this example:

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

 

Hopefully this helps.

Happy Tweening!