oligsap Posted August 28, 2020 Share Posted August 28, 2020 Hi guys ! I'm looping on an array of elements to toggle a class on these elements each time they enter the viewport but I don't think my code is optimized. Is there anything I could do to simplify this : const buttons = gsap.utils.toArray('.btn'); buttons.forEach((btn) => { gsap.from(btn, { scrollTrigger: { start: 'top bottom', end: 'bottom top', trigger: btn, onEnter() { btn.classList.remove('disable'); }, onLeave() { btn.classList.add('disable'); }, onEnterBack() { btn.classList.remove('disable'); }, onLeaveBack() { btn.classList.add('disable'); } } }); }); Thanks for your help Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 28, 2020 Share Posted August 28, 2020 ScrollTrigger has a toggleClass functionality that adds a class when entering/exit. So you could change your CSS to have an enable class (instead of a disable one) and then use toggleClass: const buttons = gsap.utils.toArray('.btn'); buttons.forEach((btn) => { gsap.from(btn, { scrollTrigger: { start: 'top bottom', end: 'bottom top', trigger: btn, toggleClass: 'enable' } }); }); But if you need to keep disable then what you have is good (other than your syntax errors - it should be onEnter: () => { } for example). 4 Link to comment Share on other sites More sharing options...
oligsap Posted August 28, 2020 Author Share Posted August 28, 2020 Awesome thanks for the quick answer ! 1 Link to comment Share on other sites More sharing options...
hybrid09 Posted December 22, 2020 Share Posted December 22, 2020 On 8/28/2020 at 6:24 PM, ZachSaucier said: ScrollTrigger has a toggleClass functionality that adds a class when entering/exit. So you could change your CSS to have an enable class (instead of a disable one) and then use toggleClass: const buttons = gsap.utils.toArray('.btn'); buttons.forEach((btn) => { gsap.from(btn, { scrollTrigger: { start: 'top bottom', end: 'bottom top', trigger: btn, toggleClass: 'enable' } }); }); But if you need to keep disable then what you have is good (other than your syntax errors - it should be onEnter: () => { } for example). Hey Zach, Is there anyway for me to increase the time/distance between the scrolltriggers? The buttons are scrolling one after another and I would like there to be some time gap after each button. I made a small demo: See the Pen ExgvBzW by mallabiplav (@mallabiplav) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 22, 2020 Share Posted December 22, 2020 Hey @hybrid09. That is simply determined by your ScrollTrigger's start and end positions. So either change how your elements are laid out or change the start and/or end values of your ScrollTriggers to get the effect that you want. Link to comment Share on other sites More sharing options...
hybrid09 Posted December 22, 2020 Share Posted December 22, 2020 Thank you for replying @ZachSaucier, How would I make it so that the next scrolltrigger won't start without the previous one ending, do I have to individually define the triggers? If I change the end time it will make the scrolltrigger longer but the one after will have already started without the prior ending. Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 22, 2020 Share Posted December 22, 2020 29 minutes ago, hybrid09 said: How would I make it so that the next scrolltrigger won't start without the previous one ending, do I have to individually define the triggers? You could change each one individually. Or you could create a timeline that changes each in sequence and apply a ScrollTrigger to the timeline. Link to comment Share on other sites More sharing options...
hybrid09 Posted December 22, 2020 Share Posted December 22, 2020 That was my first approach, the trouble I had with that was toggling a class with the timeline. Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 22, 2020 Share Posted December 22, 2020 Why do you need to toggle a class at all? Just animate the properties that you want to change. Regardless it's impossible for us to help you figure out what you were doing wrong without you showing us what you tried. Link to comment Share on other sites More sharing options...
akapowl Posted December 22, 2020 Share Posted December 22, 2020 Hey @hybrid09 If you just set the end of your ScrollTriggers for each heading to 'bottom center' while the start is at 'top center' their classes would nicely be toggled one after the other. See the Pen 14fb7205d2bce358c4574c0d6f674466 by akapowl (@akapowl) on CodePen If you wanted to have the 'duration' be a specific amount of pixels to scroll (like you have in your example there with the 100) you would have to calculate the start for each of the ScrollTrigger's accordingly - something like in the example below maybe. But there is no way, you would get each of them to be triggered in the same place in relation to the page anymore - that is just a logic thing. 🤔 See the Pen f6187fb1b87e972f57e735eb3957e3d2 by akapowl (@akapowl) on CodePen Hope this helps. 4 Link to comment Share on other sites More sharing options...
rexarvind Posted May 6, 2022 Share Posted May 6, 2022 How can I toggle "active" class to element in center of screen (only one element at a time) See the Pen BaYowgR by rexarvind (@rexarvind) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted May 6, 2022 Share Posted May 6, 2022 Welcome to the forums @rexarvind It's usually best to start a new topic, but you should look into the containerAnimation features. See the Pen WNjaxKp by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
apvd Posted June 1, 2022 Share Posted June 1, 2022 how can you toggle a class on a different element? like here for example on this.btn and not on the trigger element this.el, is this the best possible solution? gsap.to( this.btn, { scrollTrigger: { trigger: this.el, start: () => '-=150px', onEnter: () => this.btn.classList.add('active'), onEnterBack: () => this.btn.classList.add('active'), onLeave: () => this.btn.classList.remove('active'), onLeaveBack: () => this.btn.classList.remove('active'), end: () => '+=' + this.el.parentElement.getBoundingClientRect().height } } ) Link to comment Share on other sites More sharing options...
akapowl Posted June 1, 2022 Share Posted June 1, 2022 You can use toggleClass as an object and define the targets as well as the className to be toggled. Object - To toggle a class for elements other than just the trigger, use the object syntax like toggleClass: {targets: ".my-selector", className: "active"}. The "targets" can be selector text, a direct reference to an element, or an Array of elements. https://greensock.com/docs/v3/Plugins/ScrollTrigger Link to comment Share on other sites More sharing options...
apvd Posted June 1, 2022 Share Posted June 1, 2022 28 minutes ago, akapowl said: You can use toggleClass as an object and define the targets as well as the className to be toggled. Object - To toggle a class for elements other than just the trigger, use the object syntax like toggleClass: {targets: ".my-selector", className: "active"}. The "targets" can be selector text, a direct reference to an element, or an Array of elements. https://greensock.com/docs/v3/Plugins/ScrollTrigger completely missed that, it works thanks 2 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