Jump to content
Search Community

Add class in forEach loop

Alessandro Serra test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

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

Edited by Alessandro Serra
codepen added
Link to comment
Share on other sites

Hello Alessandro,

 

you should be seeing an error in the console of your dev-tools, that gives you a pointer to what is wrong with your code - it is the section: any     

 

// bad
gsap.utils.toArray(".section-animated-text").forEach((section: any) => {
  ...
  
  
// better
gsap.utils.toArray(".section-animated-text").forEach(section => {
  ...

 

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

 

  • Like 1
Link to comment
Share on other sites

4 hours ago, akapowl said:

you should be seeing an error in the console of your dev-tools, that gives you a pointer to what is wrong with your code - it is the section: any     

 

That's TypeScript, and should be fine assuming they are using TypeScript. But like all ScrollTrigger questions, is hard to fully answer a question without a minimal demo.

 

  • Like 1
Link to comment
Share on other sites

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

 

 

Link to comment
Share on other sites

  • Solution

You could set once: true on your ScrollTriggers to get it working like that.

 

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

 

But given the fact that you are using timelines there, I assume you might have tweens associated with that, which you still want to be playing as usual. In that case I think it might be better to just add some simple conditional logic for adding the class onEnter 'manually'.

 

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

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