Animating box shadow smoothly with GSAP

[padders]

Hi, 

 

I found a rather nice animated rainbow effect in a text demo a few days ago, and I wanted to recreate it with GSAP to try and improve the performance and hopefully add some nice effects to it as well. When I do however I get choppy transitions instead of the smooth transitions I get using the original CSS from the demo.

 

Here's the CSS version

 

See the Pen mJKezY by padders1980 (@padders1980) on CodePen

 

and here's my simple GSAP version

 

 

I added a timer to my GSAP version so you could see when the timeline starts (although it seems to go out of sync if you leave it a while...). I'm obviously doing something strange but I can't spot it, and I've been staring at rainbows so long now that I feel dizzy! Does anyone have any ideas? Also, can anyone think of some nice ways to improve the effect?

 

The original demo is here by the way, it has some rather nice SVG text effects

 

http://tympanus.net/codrops/2015/02/16/create-animated-text-fills/

See the Pen waXKOK by padders1980 (@padders1980) on CodePen

[GreenSock]

It wasn't your fault - it's just that named colors aren't parsed as tweenable for boxShadow, so you should use either hex values or rgb(). In other words, replace "purple", "yellow", and "red" with "#800080", "#FFFF00", and "#FF0000" like this:

http://codepen.io/GreenSock/pen/9d05d09b2cd8b9ac2c2f8ea704c27aba/

 

Is that what you were looking for? 

[padders]

Nice, yeah that's spot on. Thanks again, you guys are pretty amazing with your support I have to say