Change color after 50% progress

[felipejorge]

Hi,

 

I have an infinite animation I want to do (think of rainfall). After it reaches the halfway mark I want to randomly pick between green and red to change the background color, and then when it loops back to  the top, it goes back to the original grey color. 

 

I already have this going which simulates the infinite "rainfall". I just can't figure out how to change the bg color of the circle at the halfway mark

 

  gsap.to(droplet, {
        duration: duration,
        y: 620,
        delay: delay,
        repeat: -1,
        modifiers: {
          y: gsap.utils.unitize(x => parseFloat(x) % 620) //force x value to be between 0 and 500 using modulus
        },
        ease: "none"
      });

 

 

This is the desired effect:

See the Pen gOxYbOj by felipejorge7 (@felipejorge7) on CodePen.

[OSUblake]

Welcome to the forums @felipejorge

 

You should check out this blog post for 3.7. There are some demos that do exactly that.

 

See the Pen RwpBOvR by GreenSock (@GreenSock) on CodePen.

 

See the Pen OJpwYXO by GreenSock (@GreenSock) on CodePen.

 

 

[felipejorge]

thank you so much @OSUblake

 

this pointed me in the right direction