Jump to content
GreenSock

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

Fill color of a circle

Recommended Posts

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.

 

.2018-09-03_1150_001.png.8aea18d45ce78c523c5a9cce74403bc5.png pink circle that I want to color blue...: 2018-09-03_1151.png.d996c2717bcdec1c3bc9eef0bde0c35d.png 

 

 

The closest I have got changes the bounding box...not the circle fill:

2018-09-03_1150.png.92d678debef15dd6d564bab0f7dad551.png

 

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...?

Link to comment
Share on other sites

It's hard to tell without seeing a working demo, but it looks like you're not targeting the correct element.

 

Is this jQuery?

var tweenableWidget = widget.$().children(); 

 

What do you see in your dev console if you log it out?

console.log(tweenableWidget);

// or 
console.log(tweenableWidget[0]);

 

Targeting the correct element will depend on how the markup is nested. Here's a shot in the dark.

var tweenableWidget = widget.$().children()[0].firstChild; 

// or maybe
var tweenableWidget = widget.$().children()[1].firstChild; 

 

 

  • Like 3
Link to comment
Share on other sites

Hey man and thanks for replying! Yeah - I know it would be easier with a working demo but it's an Axure project as I said, so I can't really embed it. Anyway... I have tried drilling into the widget object itself....targeting children & children's children etc but not really getting anywhere.

Pretty sure I'm targeting the correct element... as I said I can set the opacity using:  

 

var tweenableWidget = widget.$().children();
TweenMax.to(tweenableWidget, 2, {
        css: {opacity: 0}
    });

 

 

And debugging in the browser I can set the backgroundColor css property manually (for the widget and all it's children) but again it sets the surrounding area of the circle with color....if at all.

 

 

2018-09-03_1516.png.0746114270fc7ec938d75f329b99fac8.png

 

 

The circle element is rendering with transparency as you can see from the debug elements screenshot above but there doesn't appear to be a css (or object)  attribute for changing the fill color of the circle... the backgroundColor property fills the transparent areas.

 

I can achieve what I want using different methods (built into Axure) but it seems such a fundamental thing to be able to do in js / css...and I want to use some more advanced tweening effects which is why I'm using GSAP....and this is only a tiny part of the overall prototype.

 

 

2018-09-03_1510.png

Link to comment
Share on other sites

Hmmm. Well besides selecting the correct element, the problem is that the circle is an image. Is that something you have control over, or did axure create it?

 

The only way to change the color of an image is with canvas or by using an SVG color matrix filter, but either of those options might be hard to integrate with what you're using. And for accurate coloring, it would require the circle image to initially be white.

 

If you could somehow get the circle to be an actual HTML or SVG element, you shouldn't have any issues changing the color.

 

See the Pen PdmWjG by osublake (@osublake) on CodePen

 

  • Like 4
Link to comment
Share on other sites

yeah... Axure seems to render native shapes as png images. Just tried importing an svg into Axure and running that. So I'm seeing a .svg file rendered in the browser debug....but still not able to set the fill on this object. Not in code and not directly in the browser css definitions...

 

2018-09-03_1722.png.09a3f3b55f11c868df467dc08850cc91.png

 

 

 

 

2018-09-03_1722_001.png.f86cd3fd258d3b7790e8fa752ff9be43.png

 

 

Looks like I'm gonna be trying filters next!

 

Thanks for your input anyway!

Link to comment
Share on other sites

Well, axure sure is being difficult. You still can't access the svg when it's being used for the src of an image.

 

This article might help if you go the filter route. 

https://css-tricks.com/color-filters-can-turn-your-gray-skies-blue/

 

 So something like this if you wanted to animate a color matrix.

<svg>
  <filter id="my-filter">
 	<feColorMatrix id="color-matrix" type="matrix"
     values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
	</filter>
</svg>

 

#u0_img {
  filter: url(#my-filter);
}

 

TweenMax.to("#color-matrix", 1, {
  attr: {
    values: "0.5 0 0 0 0 0 0.5 0 0 0 0 0 0.5 0 0 0 0 0 1 0"
  }
});

 

I have no idea what that will result in. I'm sure somewhere online there is a tool that makes figuring out those values easier.

 

 

 

  • Like 4
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.
×