ScrollTrigger threshold

[Bartzel]

Good day!

I have a pretty simple ScrollTrigger setup; where a bar with sticky titles animates up or down, based on the scroll direction. But there's a small bug / unwanted behaviour in it: when the content changes (certain elements can be removed), even if it's less than a pixel, the ScrollTrigger fires and the header bar moves up. Is there any way to add a threshold of some sort? 

This is what i currently have:

const headingScrollTrigger = ScrollTrigger.create({
    start: '400',
    end: 'max',
    scrub: 1,
    fastScrollEnd: true,
    onEnter: () => gsap.to('.compare__heading-container', {
      duration: 0.5,
      ease: 'sine.out(1.7)',
      y: 60,
      opacity: 1,
    }),
    onLeaveBack: () => gsap.to('.compare__heading-container', {
      duration: 1,
      ease: 'expo.out',
      y: -210,
      opacity: 0,
    }),
    onUpdate: (self) => {
      if (breakpoint >= 4) {
        self.direction === -1
          ? (document.querySelector('.compare__heading-container').style.transform = 'translateY(120px)')
          : (document.querySelector('.compare__heading-container').style.transform = 'translateY(60px)');
      }
    },
  });

[Cassie]

Hey Bartzel!

 

You possibly could check for velocity? I can't remember exactly what you get back value-wise without a demo but you could only do the transform logic if it's scrolling above a certain velocity.

 

onUpdate: (self) => {
  console.log(self.getVelocity());
}

 

I'd also usually recommend using GSAP to tween that y value rather than directly target the style like that - but again, I'm not sure exactly what you're doing without seeing it working.

[GreenSock]

Yeah, I don't quite understand the question here - a minimal demo will go a LONG way to getting you a solid answer. But I will say that you DEFINITELY shouldn't be directly assigning transforms values in one function, and then trying to tween them in another. Set all transform values via GSAP because it'll perform better, be more accurate, and solve various browser inconsistencies. 

[Bartzel]

On 12/14/2021 at 9:47 PM, GreenSock said:

Yeah, I don't quite understand the question here - a minimal demo will go a LONG way to getting you a solid answer. But I will say that you DEFINITELY shouldn't be directly assigning transforms values in one function, and then trying to tween them in another. Set all transform values via GSAP because it'll perform better, be more accurate, and solve various browser inconsistencies. 

A demo will be quite hard, as there's a lot of other elements and code that surround this. It may also just be React, triggering a re-render and the ScrollTrigger going back to it's initial state.

As for the transforms; i initially had a separate tween, which I called in the ScrollTrigger. This resulted in very buggy behaviour, probably because it's based on scrolling up or down. Tweens where abruptly overwriting each other. For some reason, it works fine with the transforms. 

 

 

On 12/14/2021 at 6:43 PM, Cassie said:

Hey Bartzel!

 

You possibly could check for velocity? I can't remember exactly what you get back value-wise without a demo but you could only do the transform logic if it's scrolling above a certain velocity.

 

onUpdate: (self) => {
  console.log(self.getVelocity());
}

 

I'd also usually recommend using GSAP to tween that y value rather than directly target the style like that - but again, I'm not sure exactly what you're doing without seeing it working.

I'll look into the velocity, thanks!
 

[Bartzel]

Update; with a bit more research, I found out that ScrollTrigger returns to its OnEnter state after React fires a re-render. Any idea how to keep it from doing that?

[Cassie]

Have you read our react articles at all?

Lots of helpful tips in there
 

 

[Bartzel]

Interesting indeed, thanks!

I did manage to get it working, with the getVelocity() and by removing the onEnter animation. Also I've changed the transforms to gsap.to animations. Now that the scroll direction is controlling the animation, it seems to work as expected.