Hello,
I'm working on a rather large one page website with loads of different tweens, scrolltriggers, pins, timelines, etc.
The site uses the ScrollSmoother plugin for smooth scrolling but i noticed weird behaviour when using the smooth scroll.
I've included a pen to mimic the part that's causing problems
When using ScrollTrigger.refresh() the order of the triggers being refreshed is different when using the ScrollSmoother.
In the included pen i have 3 sections with 3 different types of animation. the order of the tweens in js is not the same as the order of the sections:
1 - normal tween with scrolltrigger - section #2
2 - timeline tween with scrolltrigger - section #3
3 - Scrolltrigger.create() - section #1
When not using the ScrollSmoother, the refresh order is: 1 - 2 -3 (as it should be)
But when i enable SmoothScroller the refresh order is: 3 - 1 - 2.
This messes up my triggers because 1 and 2 both have pinspacing.
I've tried refreshing the timelines' scrolltrigger as mentioned here, but no success.
I did manage to get it to work using refreshPriority:-1, but i don't think that's a fitting solution for me (because of the large amount of tweens/triggers/etc).
So i was wondering if this is expected behavior or if i missed something or did something wrong or anything.
Just trying to wrap my head around it.
Any help would be highly appreciated!
Cheers,
Oscar