Jump to content


simple color tween not functioning

Recommended Posts

Hi - I'm not sure why but I can't get a simple color tween working, and I can't seem to find anything in the documentation that explains it.


I've created a codepen here with what I feel should be the proper implementation.




See the Pen poyXmXg by heaversm (@heaversm) on CodePen

Link to comment
Share on other sites

I'd happy to help with this. Thanks for the demo.


There were a few issues with your demo. The biggest was that you had a function on an onComplete but an animation will never complete with repeat set to -1 (infinite). The trick is to use the onRepeat callback


In order for the backgroundColor value to get re-applied it needs to be a function-based value AND you need repeatRefresh to be set to true. repeatRefresh means that values will get invalidated on repeat and function-based values will be re-evaluated.


here are my modifications to your demo


See the Pen jOqjjLM by snorkltv (@snorkltv) on CodePen

  • Like 3
Link to comment
Share on other sites

GreenSock has utility function called wrap() which allows you to wrap (or cycle) through array values. This means you don't have to increment and reset your curColor value. It can keep going up and up and gsap will pull the proper color from the array. 


gsap.to("#morph", {
    backgroundColor: function() {
      return gsap.utils.wrap(colorArray, curColor++)
    duration: 0.5,
    repeatDelay: 0.1,
    repeat: 100,


See the Pen VwaJJBN?editors=0010 by snorkltv (@snorkltv) on CodePen


I have a free wrap() tutorial on my blog with video and demo. It is AWESOME with staggers






  • Like 3
Link to comment
Share on other sites

What a thorough and kind response! I learned a lot. Thanks

  • Like 1
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.