ScrollTrigger intermittent triggering :/

[NickWoodward]

Hi all,

I was trying to help someone out earlier with this scrolling effect that triggers a modal when they get to the bottom of the page
It was a little hacky as I haven't used scrolltrigger in a while: I tried using an `onEnter` on a fake element:
 

ScrollTrigger.create({
    trigger: '.fake-panel',
    onEnter: () => console.log('onEnter'),
    markers: true
})

It worked fine in vanillajs and codepen, so I moved it over to a React example for them. Seemed to work fine again.

They then mentioned that it seemed to only work every so often, and it started misbehaving for me too. I've obviously missed something, like I've just added the start and end properties to the scrolltrigger object and I'm only seeing the scroller-start and scroller-end, but not the triggers on the element itself.

What have I've missed? 😄

Thanks,

Nick

See the Pen vYvYZbQ?editors=1011 by nwoodward (@nwoodward) on CodePen

[Cassie]

Hey Nick,

 

So you'll need to define where the trigger point on the element is, and also define a scroller as the body isn't scrolling -

 

See the Pen Yzdzrmx?editors=0011 by GreenSock (@GreenSock) on CodePen

 

If you're using React there's a few gotchas. But this article (and context) has you covered
 

Hope this helps!

[NickWoodward]

58 minutes ago, Cassie said:

Hey Nick,

 

So you'll need to define where the trigger point on the element is, and also define a scroller as the body isn't scrolling -

 

 

 

 

If you're using React there's a few gotchas. But this article (and context) has you covered
 

Hope this helps!

Hi Cassie!

I knew there was something I must have deleted when I removed the scroll trigger defaults, and the scroller option was the one!  Was driving me nuts. Thanks!

Also, the start and end options get defaults at the top and bottom of the element, right?

Thanks again!
 

[NickWoodward]

 

Hi @Cassie

Got it working (ish), but it occassionally just gets stuck and the footer won't animate out, which is kind of a design flaw on my part XD

See the Pen abPbVay?editors=1111 by nwoodward (@nwoodward) on CodePen

 

[Cassie]

Hey again!

 

So I wouldn't trigger an animation in callbacks like that. It's kinda like inventing the wheel. That's what scrollTrigger does, it can be linked to timelines.

Like so

 

See the Pen zYyYREg?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Also you're popping a fixed element on top of a scrolling element (that isn't the body), so that's blocking the scroll events from propagating. You'll need to add pointer-events:none to that fixed element to fix that. 

If you have links in there you'll need to toggle pointer-events so that it's only applied during scroll, otherwise you won't be able to click your links. Maybe there's another solution around event propagation? Not certain. Give it a bash and pop back if you're struggling.

Hope this helps!

[NickWoodward]

39 minutes ago, Cassie said:

So I wouldn't trigger an animation in callbacks like that. It's kinda like inventing the wheel. That's what scrollTrigger does, it can be linked to timelines.

ah, not sure what my brain was doing 😄 thanks

 

39 minutes ago, Cassie said:

 

Also you're popping a fixed element on top of a scrolling element (that isn't the body), so that's blocking the scroll events from propagating. You'll need to add pointer-events:none to that fixed element to fix that. 

*frantically googles how scroll events work*
why would a fixed element change how the scroll events propagate?

just out of interest, do you think there's a better way to achieve the same effect? that was just my first quick effort at it, there's no reason it's a sticky element

[Rodrigo]

Hi,

 

What you could try is the Observer plugin in order to check for wheel/touch events in that particular element:

https://greensock.com/docs/v3/Plugins/Observer
 

Finally there is a possibility that if you're using a third party package for the modal that could be blocking the events as well or setting the overflow to hidden in the body while the modal is open, that would also block the scroll events. Well not block them but they would never get triggered.

 

Another option is that since you are using react, perhaps the way you're handling the state or maybe the way you are integrating GSAP Context into all of this.

 

We have a collection of starters using GSAP with React so you can take a look and fork one in order to create a minimal demo that clearly illustrates the issue you're having:

https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters

 

Hopefully this helps.

Happy Tweening!

[Cassie]

Just jumping in to avoid confusion here - it's not react or a custom modal. This is just how browsers work.

You're not scrolling the body, you're scrolling an element.

 

You have to be in that element in order to scroll and a position fixed element is outside of that elements flow. If you were scrolling the body this wouldn't be an issue. It's because you're scrolling a different div

 

See, no GSAP -

 

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

 

[NickWoodward]

27 minutes ago, Rodrigo said:

Hi,

 

What you could try is the Observer plugin in order to check for wheel/touch events in that particular element:

https://greensock.com/docs/v3/Plugins/Observer
 

Finally there is a possibility that if you're using a third party package for the modal that could be blocking the events as well or setting the overflow to hidden in the body while the modal is open, that would also block the scroll events. Well not block them but they would never get triggered.

 

Another option is that since you are using react, perhaps the way you're handling the state or maybe the way you are integrating GSAP Context into all of this.

 

We have a collection of starters using GSAP with React so you can take a look and fork one in order to create a minimal demo that clearly illustrates the issue you're having:

https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters

 

Hopefully this helps.

Happy Tweening!

I will definitely take a look at that plugin, and those templates once I move this to react again. Thanks

@Cassie ohhhh, yeah ok thanks. Weird that it sometimes gives issues, but not others? Either way now I understand the problem, thanks. First thought - if I accept that the sticky footer will never scroll, could I attach a listener to the element that reverses the animation on scroll? Will let you know XD

*edit lol at lorem weeeeeeeee 😄

[Cassie]

There are a lot of issues that could have caused the intermittent behaviour

 

1) Not using the correct scroller

2) Not defining proper start points

3) Using callbacks instead of linking up a timeline

4) Scroll events being blocked by the fixed element

 

Quote

Weird that it sometimes gives issues, but not others? 

I don't know what you mean by "it" here. There have been a few adjustments to your original demo. Maybe we're not seeing the same thing?

 

This one (your one with the fixed footer) I can't ever scroll out of, it's just flat out broken for me.

See the Pen abPbVay by nwoodward (@nwoodward) on CodePen

 

This one that I adjusted works all the time - right? Unless you have a different bug that I can't see?

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

 

---

 

Quote

 if I accept that the sticky footer will never scroll, could I attach a listener to the element that reverses the animation on scroll? Will let you know XD

Could work! Def do some testing though -

 

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