Jump to content
Search Community

Change color after 50% progress

felipejorge test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts



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

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