arl1nd Posted August 5, 2020 Share Posted August 5, 2020 Hi there, Congratulations for your brilliant new plugin ScrollTrigger, this seems to be a life saver for me in lot of situations. I am trying to adapt ScrollTrigger to build a complex sticky header and I am looking for few advices or you can take as suggestions to add as new features in new the upcoming updates: 1. Events Is it possible to add Events just like for GSAP animations with eventCallback method. I am using ScrollTrigger.create so there will be a situation when I want to add an event callback after the initialization. For example: let sample = ScrollTrigger.create( { trigger: '.selector', } ); // Later in code if ( certainCondition ) { sample.eventCallback( 'onToggle', ( self ) => console.log( self.isActive ) ); } 2. In my case I am building a sticky header scene where I simply need to toggle fixed class (without pining) the element, so in this case, I would prefer using only a starting point but a NULL ending point. So my question is, is it possible to have no 'end' position for scroll trigger? Simply I can track when elements enter certain scroll position: let toggler = ScrollTrigger.create( { trigger: '.site-header', onToggle: ( self ) => console.log( self.isActive ), start: 'top top', end: null, } ); The current version will trigger twice onToggle function. I hope my explanation is clear. Best, Arlind Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 5, 2020 Share Posted August 5, 2020 3 minutes ago, arl1nd said: Is it possible to add Events just like for GSAP animations with eventCallback method. Yep, check out the .addEventListener() function. (the docs are great for learning more about GSAP features by the way) 4 minutes ago, arl1nd said: is it possible to have no 'end' position for scroll trigger? Just give it a really large value like 99999. Other alternatives are covered in this thread: 2 Link to comment Share on other sites More sharing options...
arl1nd Posted August 5, 2020 Author Share Posted August 5, 2020 Thank you very much @ZachSaucier for your swift reply. Events: Sorry I didn't saw that function even though I read the docs, I thought would be eventCallback. Have a great day and thank you once again for your fast support. Link to comment Share on other sites More sharing options...
arl1nd Posted August 5, 2020 Author Share Posted August 5, 2020 Actually, the .addEventListener() function works on static way, its not possible to add onToggle, onEnter, onEnterBack, onLeave and onLeaveBack. Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 5, 2020 Share Posted August 5, 2020 3 hours ago, arl1nd said: the .addEventListener() function works on static way, its not possible to add onToggle, onEnter, onEnterBack, onLeave and onLeaveBack. What's your use case for needing to do that? Can you please make a minimal demo? Link to comment Share on other sites More sharing options...
GreenSock Posted August 5, 2020 Share Posted August 5, 2020 You cannot add listeners to an individual ScrollTrigger instance. We put a lot of work into optimizing ScrollTrigger since scrolling can be so performance-sensitive. Event dispatching can be expensive. Callbacks are cheaper, and we further optimize things by having you declare your callbacks initially (not add them dynamically later). I have yet to come across a scenario where someone would need to add a handler dynamically. Is there some reason you can't just declare them upon creation? 2 Link to comment Share on other sites More sharing options...
arl1nd Posted August 10, 2020 Author Share Posted August 10, 2020 On 8/6/2020 at 1:08 AM, GreenSock said: You cannot add listeners to an individual ScrollTrigger instance. We put a lot of work into optimizing ScrollTrigger since scrolling can be so performance-sensitive. Event dispatching can be expensive. Callbacks are cheaper, and we further optimize things by having you declare your callbacks initially (not add them dynamically later). I have yet to come across a scenario where someone would need to add a handler dynamically. Is there some reason you can't just declare them upon creation? Totally understandable. Well, this is the scenario: because I provide my StickyHeader library as global variable already initialized as window.StickyHeader (in a bestselling WordPress theme) which uses ScrollTrigger, and users can access custom functionality such as StickyHeader.switchLogo or StickyHeader.setTransparentHeader so I thought there would be a good way to simply forward JS snippets for my theme customers for examle: StickyHeader.on( 'toggle', function( scrollTrigger ) { // Sticky mode if ( ! scrollTrigger.isVisible ) { this.switchLogo( { src: '...', width: 100, height: 50 } ); } } ); But I'll manage to find a way to fix this. Thank you very much for your help. Link to comment Share on other sites More sharing options...
Vlado Posted June 24, 2021 Share Posted June 24, 2021 Maybe something like this: // Mark section as loading let introLoading = true; gsap.timeline({ ease: "power2.out", scrollTrigger: { trigger: '#section-intro', pin: '.wrap', start: "top top", scrub: 0.25, snap: false, onEnter: self => { // Mark as loaded after first time enter event is fired // Would be same as on init if ( introLoading ) { // Mark as init after 1000ms setTimeout( () => { introLoading = false; }, 1000); } }, } }); 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