Jump to content
Search Community

Toggleclass on elements entering viewport with Scrolltrigger

oligsap test
Moderator Tag

Recommended Posts

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

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

  • Like 4
Link to comment
Share on other sites

  • 3 months later...
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

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

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

 

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.

 

  • Like 4
Link to comment
Share on other sites

  • 1 year later...
  • 4 weeks later...

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

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

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

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...