Struggling to add ScrollSmoother to a ScrollTrigger using a previous function

[Mattrudd]

Happy Monday folks... just when I thought I'd finally finished my site, one last* issue 

Have been looking at this one all day... can't seem to come up with the correct way of incorporating ScrollSmoother into this ScrollTrigger setup (which was the subject of a previous forum fix 🙌)

 

When I add ScrollSmoother into the setup, I get the error: 'undefined is not an object (evaluating 'self.previous().end')'

I've not yet found a way to add in ScrollSmoother properly so the previous() function works as it does when ScrollSmoother setup is commented out.

The previous ScrollTrigger function is a bit advanced for me, but would be great to get this working so the animation plays with ScrollSmoother switched on.

Any ideas on where I'm going wrong/what I'm missing here?

 

Tried removing normalizeScroll - have a feeling it's to do with incorporating the 'scroller' constant properly.

Thanks in advance!

 

*hopefullyyyyyyy!

See the Pen YzOjxoj?editors=1111 by matt-rudd (@matt-rudd) on CodePen

[elegantseagulls]

I'm not seeing that error in the CodePen... I'm using FireFox.

[Mattrudd]

2 hours ago, elegantseagulls said:

I'm not seeing that error in the CodePen... I'm using FireFox.

Try now? May have been I'd momentarily commented out the ScrollSmoother setup just when you viewed!

[Rodrigo]

Hi,

 

I just tested the Codepen example from your first post and I get no errors on the console. Also everything seems to be working as expected, maybe I'm missing something here 🤷‍♂️

[Mattrudd]

13 minutes ago, Rodrigo said:

Hi,

 

I just tested the Codepen example from your first post and I get no errors on the console. Also everything seems to be working as expected, maybe I'm missing something here 🤷‍♂️

That's really strange! I was getting the 'undefined...' error on both Chrome and Safari on my end, and as you say it does now seem to be working!

I just tried the pen fullscreen in a Chrome Incognito window, and it didn't cycle past the first 'logo' header that animates in from the right. It took a few scrolls to show headings 2 to 4 - which makes me think there's still some kind of issue with my code...

But no wonder it baffled me - thought it was just another big gap to fill in my dev knowledge! Thanks for your time, hopefully it was just an isolated thing on my machine.

[Mattrudd]

***Update...

 

Hmm - it would appear I'm still getting the 'undefined' error with Safari, which is a bummer!

[GreenSock]

That's because self.previous() is returning null initially since the other ScrollTriggers have lower refresh priorities and the Lottie ones aren't even loaded yet so they don't exist. 

 

There are several ways to solve this: 

1. Assign a variable to the previous ScrollTrigger instance and just use that instead of self.previous()
   

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

2. -OR- explicitly set a refreshPriority on your ScrollTriggers so that you have control of the order. The higher the priority ones should be toward the top of the page, descending. 

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

There are more ways too, but I don't want to overwhelm you

[Mattrudd]

Not sure how I managed to miss this solution Jack @GreenSock, but just came to implement this section in my build and am, as ever, very grateful. You've saved me an afternoon at least!