Jump to content

Alessandro Serra

Pin a section and toggle class every 100vh of scrolling

Recommended Posts

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"
Link to comment
Share on other sites

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


  • Like 4
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.