mheavers Posted October 2, 2020 Share Posted October 2, 2020 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 comment Share on other sites More sharing options...
Carl Posted October 2, 2020 Share Posted October 2, 2020 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 3 Link to comment Share on other sites More sharing options...
Carl Posted October 2, 2020 Share Posted October 2, 2020 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/ 3 Link to comment Share on other sites More sharing options...
mheavers Posted October 2, 2020 Author Share Posted October 2, 2020 What a thorough and kind response! I learned a lot. Thanks 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now