Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mheavers

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.

 

https://codepen.io/heaversm/pen/poyXmXg

 

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

Link to post
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 post
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 post
Share on other sites

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

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

×