How to change color and SVG mask at the same time?

[raana]

I wrote the following code to change the shape of svg, but this code has a problem. I want the color of #rect to change at the same time every time atr changes.
Is it possible to do the same code with another solution?

 

    var tl = gsap.timeline({});
    //2
    tl.to("#Tear", {
      attr: {
        d: First
      }
    });
    //3
    tl.set("#rect", {
      attr: {
        style: "fill:#FB7185"
      }
    }).to("#Tear", {
      attr: {
        d: Second
      }
    });
    //4
    tl.set("#rect", {
      attr: {
        style: "fill: #38BDF8"
      }
    }).to("#Tear", {
      attr: {
        d: Third
      }
    });
    //5
    tl.set("#rect", {
      attr: {
        style: "fill: #A78BFA"
      }
    }).to("#Tear", {
      attr: {
        d: Fourth
      }
    });

 const scroll = ScrollTrigger.create({
      trigger: ".J02ig",
      pin: true,
      scrub: 0.5,
      start: "top top",
      end: "max",
      animation: tl
      // onToggle: self => console.log("toggled, isActive:", self.isActive),
      // onUpdate: self => console.log("direction:", self.direction)
    });
    scroll.scroll();

 

[mvaneijgen]

Have you looked at the position parameter? With it you can set tweens to start with the previous tween, at a specific time or 0.3 seconds after the  previous tween has started '-=0.3' and more! (See the doc)

 

A minimal demo would really help to show you how it would work, so if it is not clear please include one.

[raana]

1 hour ago, mvaneijgen said:

Have you looked at the position parameter? With it you can set tweens to start with the previous tween, at a specific time or 0.3 seconds after the  previous tween has started '-=0.3' and more! (See the doc)

 

A minimal demo would really help to show you how it would work, so if it is not clear please include one.

Thank you very much, it worked. 

Sometimes the colors were not displayed correctly.

I changed the set()s to to() and set Absolute time.