Jump to content
Search Community

Declaratively define the index used inside a color object

DevC test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution



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) => {
    trigger: section,
    start: "top center",
    end: "bottom center",
    toggleActions: "play reverse play reverse",
    markers: true,
    id: "section",
    onToggle: (self) => {
      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:



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

Happy Tweening!

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