iongion Posted December 19, 2020 Share Posted December 19, 2020 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 1 Link to comment Share on other sites More sharing options...
Solution ZachSaucier Posted December 19, 2020 Solution Share Posted December 19, 2020 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. 1 Link to comment Share on other sites More sharing options...
iongion Posted December 20, 2020 Author Share Posted December 20, 2020 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. Link to comment Share on other sites More sharing options...
iongion Posted December 20, 2020 Author Share Posted December 20, 2020 (edited) 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now