Declaratively define the index used inside a color object

[DevC 7 Likes (Newbie)]

I have an animation that runs through a list of hsl colors as you scroll over sections. I'd like to be able to define which index the object starts on per section. Also, I took a shot at making the list loop back around to index 0 once you've reached the end of the array. Not sure if this is correct.

 

 

See the Pen jOpdLKE by dcha (@dcha) on CodePen

[Rodrigo 5,899 Likes (Superhero)]

Hi,

 

Just use the wrap utility method to go through the arrays length based on the current index, starting with the index of the main section. Something like this:

const num = gsap.utils.wrap(0, gradients.length);

// The hook for making this reusable
sections.forEach((section, i) => {
  ScrollTrigger.create({
    trigger: section,
    start: "top center",
    end: "bottom center",
    toggleActions: "play reverse play reverse",
    markers: true,
    id: "section",
    onToggle: (self) => {
      console.log(self.isActive);
      self.isActive ? bar.play() : bar.reverse();
    }
  });

  let bar = gsap.timeline({ paused: true });
  bar.to(".GradientBar", {
    translateY: 0
  });

  let vhsections = section.querySelectorAll(".vh");

  vhsections.forEach((section, currentIndex) => {
    let k = num(currentIndex + i);
    gsap.to(".GradientBar", {
      "--stop-one": gradients[k].stopOne,
      "--stop-two": gradients[k].stopTwo,
      "--stop-three": gradients[k].stopThree,
      "--stop-four": gradients[k].stopFour,
      scrollTrigger: {
        trigger: section,
        start: "top center",
        markers: true,
        id: "section" + currentIndex,
        immediateRender: false,
        toggleActions: "play pause play reverse"
      }
    });
  });
});

Here you can read more regarding the wrap method:

https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap()

 

Hopefully this helps. Let us know if you have more questions.

Happy Tweening!