Toggleclass on elements entering viewport with Scrolltrigger

[oligsap]

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

[ZachSaucier]

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).

[oligsap]

Awesome thanks for the quick answer !

[hybrid09]

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.

[ZachSaucier]

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.

[hybrid09]

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. 

[ZachSaucier]

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. 

[hybrid09]

That was my first approach, the trouble I had with that was toggling a class with the timeline. 

[ZachSaucier]

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.

[akapowl]

 

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.

 

[rexarvind]

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.

[OSUblake]

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.

 

[apvd]

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
        }
      }
    )

 

[akapowl]

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

[apvd]

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