How to temporarily disable ScrollTrigger and compute global progress

[iongion]

I try to understand the following

 

- Disable animations temporarily while jumping between sections

- Know the total progress and add it to a linear scrollbar of .globalProgressbar input slider

 

Context for disabling

I would like to disable animations this way, when a user clicks directly to go to a section, then all should be suspended except the start one and destination.

I need this because on a typical workflow, there are nested complex animations linked to the scroll trigger, 3d transitions and when users jump directly to a section then there is an abuse of animations for the browser, would like to make it more efficient.

 

Context for slider

I would like the slider to indicate and control the complete scroll progress as one.

I tried summing up per section but sometimes the onUpdate for a certain section is not completing to 100%

 

It is my first try of gsap for something useful after 7 years of moving away from Flash and I am so excited, thank you, it remembers me the good times when minimalcomps made me fall for UI forever!

See the Pen OJRgrPL by iongion (@iongion) on CodePen

[ZachSaucier]

Hey iongion and welcome to the GreenSock forums.

 

1 minute ago, iongion said:

- Disable animations temporarily while jumping between sections

Sounds like you need to use ScrollTrigger's enable and disable methods where necessary. You could either keep an array of ScrollTriggers that should be disabled or use the .getAll() method if you want to toggle all of them.

 

2 minutes ago, iongion said:

- Know the total progress and add it to a linear scrollbar of .globalProgressbar input slider

It's probably easiest to create a ScrollTrigger that takes up the full size of the page for this. We show how to do this sort of thing in this demo, found in the ScrollTrigger demos list.

[iongion]

Wow, thank you @ZachSaucier I think I have a good global progress bar now - 

See the Pen dypRExv by iongion (@iongion) on CodePen

 

But is it reliable ? I am using `window.scrollY` and `ScrollTrigger.maxScroll(window)` to know the progress

Most likely I will have to take care of window resizing to make it more scalable.

[iongion]

I have tried to disable / enable while jumping from section to section using getById

 

See the Pen oNzejeG by iongion (@iongion) on CodePen

 

But it seems triggers stay disabled even after enabling them.  Now everything works, tada! 😁

 

The goal is to have the current viewport scroll trigger(s) do its(theirs) leave and destination one to do its enter (from front or back) but I still need the in between to be disabled (I am adding 3d scene transitions so If I keep the scroll trigger for all, it becomes a visual abuse)

Edited December 20, 2020 by iongion
Updated codepen