Jump to content
Search Community

simple color tween not functioning

mheavers test
Moderator Tag

Recommended Posts

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,
    repeatRefresh:true
  });

 

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

 

https://www.snorkl.tv/use-gsap-utils-wrap-to-cycle-through-array-values/

 

 

 

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