[Scroll to section inside scrollTrigger]

sorry I totally forgot to add the IDs to my codepen example...
I managed to make it work with "scrollTo" instead of "scrollIntoView".

 

Thanks!

[Scroll to section inside scrollTrigger]

Hello

I am trying to scroll to a section with scroll trigger.

As soon as I enter the section it should take the current section to the top of the page by simulating a snap scroll.

It's not working for me, could you help me understand why?

 

Thank you!

See the Pen vYppxWw by alessandroserra97 (@alessandroserra97) on CodePen

[Add class in forEach loop]

Thank you so much!

[Add class in forEach loop]

Hi, thanks for your quick replies!

I edited the question to add the codepen with a quick demo of what I would like to do ... only instead of the toggleClass I would like to understand if it is possible to simply add a class in order to set the new background color permanently even during the scroll up. I tried the ways listed above but they don't work...

 

 

[Add class in forEach loop]

hello  

I am new to greensock and i have a doubt ...   I am trying to add a class every time i scroll inside a section within a loop.

Works correctly with the toggleclass but it's not what i need ...

gsap.utils.toArray(".section-animated-text").forEach((section: any) => {
  const tls = gsap.timeline({
    scrollTrigger: {
      trigger: section,
      start: "top 30%",
      markers: true,
      toggleClass: "section-animated-text-start",
    },
  });
});

i've tried multiple ways but it doesn't work for me

gsap.utils.toArray(".section-animated-text").forEach((section: any) => {
  const tls = gsap.timeline({
    scrollTrigger: {
      trigger: section,
      start: "top 30%",
      markers: true,
    },
    css: {
      className: "+=section-animated-text-start"
    }
  });
});

 

gsap.utils.toArray(".section-animated-text").forEach((section: any) => {
  const tls = gsap.timeline({
    scrollTrigger: {
      trigger: section,
      start: "top 30%",
      markers: true,
    },
    onStart: titleVisible,
  });
  function titleVisible (){
    // do stuff
  }
});

anyone have any ideas?

See the Pen qBPGBbO by alessandro-serra (@alessandro-serra) on CodePen

[Pin a section and toggle class every 100vh of scrolling]

Thank you so much!!! 

[Pin a section and toggle class every 100vh of scrolling]

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