Pin a section and toggle class every 100vh of scrolling

[Alessandro Serra]

Hi everyone :),
I am new here and i have a little bit of difficulty using gsap.
I need to pin a component to the top of the screen with a height of 300vh and at every 100vh of scroll there will be a toggleclass to the pinned section. I was only able to pin the component but I would need to understand if it is possible to do the toggleclass every 100vh with gsap. I have already looked on many pages of the forum without finding a situation similar to mine

 

gsap.to(".section-slides", {
  scrollTrigger: {
    trigger: ".section-slides",
    start: "top top",
    end: "+=300%",
    scrub: true,
    pin: true,
    toggleClass: "slide-1"
  }
})

[akapowl]

Welcome to the forums @Alessandro Serra

 

A concept like this could work:

 

First wrap the section in a div and pin the section itself with one ScrollTrigger. Then for as many toggles as you need, create ScrollTriggers using the wrapper as the trigger with the start dependent on its top and the amount of window-heights scrolled.

 

Like in this example everything is dependent on the number of colors in that array.

 

I'm not sure what exactly it is you are going for, but you can give it a shot and fiddle around a bit with that example.

 

See the Pen VwMqXZX by akapowl (@akapowl) on CodePen

 

[Alessandro Serra]

Thank you so much!!!