Using ScrollTrigger not to scroll anything (just using it instead of Window.scroll)

[iDad5]

Sounds crazy and probably is...

I have a page that has a komplex 'opening-sequence' that runs either automatic or can be controlled by the user via ScrollTrigger.

When fully opened I have a fixed header of a fixed height (depending on the Page width.) The original ScrollTriger ist killed by the end of the opening-sequence.

If the page is higher then the viewport I want to shrink the header, moving elements to the sides etc...

 

I first went for a timeline that rearranged the header content and after that worked the way I needed it, to I went about to add a ScrollTrigger to control it. Maybe I was doing it all wrong but I couldn't get it to work. One reason was that I make heavily use of css variables, and animating them with gsap is very cool but at least one of the variables that is crucial to the header also influences the body margin, therefore in some it produces a jittering loop half way...

 

My solution would be just to work with native Window.scroll and doing the math based on percentages.

BUT

The way browsers (used to) report scroll events was often problematic in past projects and being an admirer of @GreenSock's work for years now I understand that a lot of optimizations are worked into the gsap solutions.

SO

So is it, in your learned opinion, useful and possible to use ScrollTrigger simply as a kind of proxy to report Window.scroll? And if so, how would you go about it? 

 

 

 

 

[akapowl]

39 minutes ago, iDad5 said:

So is it, in your learned opinion, useful and possible to use ScrollTrigger simply as a kind of proxy to report Window.scroll? And if so, how would you go about it?

 

If you are using ScrollTrigger anyway, I'd say 'why not?'.

 

It is definitely possible - you could e.g. create a ScrollTrigger that covers the whole body (or whatever you need it to cover) and use

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/scroll()

 

to get the scrollposition onUpdate, or from outside without all the onUpdate stuff in the demo below.

 

But as always, your mileage may vary - if you have a rather specific scenario it might be neccessary to set things up a bit different.

 

That's why a minimal demo is always helpful to give a solid answer

 

See the Pen YzYqYbq by akapowl (@akapowl) on CodePen

 

[iDad5]

Thanks @akapowl. Your demo helped me a lot. I will probably implement both versions (native onScroll and the ScrollTrigger based variant) an do some testing and will report my experience.