Wow!! This is driving me crazy! I am designing a prototype in Axure, which I'm linking to an external javascript file and manipulating elements with TweenLite. All good except the simplest of things....animating a fill color change on a circle - pink to blue.
. pink circle that I want to color blue...:
The closest I have got changes the bounding box...not the circle fill:
I've tried all kinds of approaches..... tweening css properties, color, backgroundColor, fill etc...
I'm passing the widget to the javascript function correctly (I can set opacity for example) but I'm not able to change the circle's inner color.
The function looks like this...: (this changes the bounding box as shown above...)
function tweenColor (widget, speed, delay, color) {
var tweenableWidget = widget.$().children();
TweenMax.to(tweenableWidget, speed, {
delay: delay,
css: {backgroundColor: '#00CCFF'}
});
}
What am I missing...?