Change Div colors based on scroll GSAP

[rohitmishra89]

Hello folks,

I am very new to the gsap framework.
I am trying to achieve a UI requirement for my project where I want to lock the div to change the child div's background color till the div reaches center of the viewport.

I tried to achieve this but not sure how to start changing color of the first div after the scroll-lock starts and also to complete the color change of the 3rd div little before the scroll-lock ends.

 

See the Pen wvVgMKd by mishraji89 (@mishraji89) on CodePen

[AntonioNB4]

See the Pen abepdLe by Antonio-Nocella (@Antonio-Nocella) on CodePen

[rohitmishra89]

@AntonioNB4



can you also help me achieve the same functionality by adding active class in the div that has class card.

I want to add active class to each .card while scrolling from top and remove active class while scrolling back to top from bottom.

[Rodrigo]

Hi,

 

Maybe something like this:

See the Pen JjgEBBa by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps

Happy Tweening!

[rohitmishra89]

@Rodrigo


 

I tried using the GSAP Genius gpt and here's what I've got. Please see if the implementation is in correct code standards.

See the Pen wvVgMKd by mishraji89 (@mishraji89) on CodePen

 

 

[Rodrigo]

Yeah that's a good approach, if it works it works.

 

Another option could be this:

const toggleClass = (e) => {
  const _d = tl.scrollTrigger.direction;
  if (_d > 0) {
    e.classList.add("active");
  } else {
    e.classList.remove("active");
  }
};

cards.forEach((card, i) => {
  tl.to(
    card,
    {
      backgroundColor: "red",
      duration: 1 // Add some duration to see the color change effect
    },
    i * (1 / totalCards)
  ).call(() => toggleClass(card), [], "<+=0.05"); // Adjust the timing for each card
});

Here is my demo updated:

See the Pen MWNpbBg by GreenSock (@GreenSock) on CodePen

 

But if your code works the way you intend, just keep it: "If is not broken, don't fix it"

 

Hopefully this helps

Happy Tweening!