Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
oligsap

Toggleclass on elements entering viewport with Scrolltrigger

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 post
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 3
Link to post
Share on other sites
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 post
Share on other sites

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 post
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 post
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 post
Share on other sites

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

Link to post
Share on other sites

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 post
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 JjRrGaB 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 poEWgaN by akapowl (@akapowl) on CodePen

 

 

Hope this helps.

 

  • Like 3
Link to post
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.

×