Jump to content
GreenSock

raana

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

Go to solution Solved by mvaneijgen,

Recommended Posts

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();

 

Link to comment
Share on other sites

  • Solution

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.

  • Like 1
Link to comment
Share on other sites

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. 

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