Jump to content

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

kineticjs linear gradient arrays

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi there,
i'm developping a kind of tactical rpg game using html5 canvas and kineticjs to display most of the elements.
i've just started to set up the first animations and tried out gsap to manage most of it.
it's working pretty great for now.
But i've encountered a problem recently and can't seem to understand why it's not working.
i'll try to explain clearly here :
i have lifebars drawn on my canvas and they need updates when one of the character on screen takes damage.
my lifebars are Kinetic.Rect with a linear gradient fill with a stroke.
i can't manage to make my tweenline update the fillLinearGradient on my Kinetic.Rect.
i made some tests and there is no problem updating a simple fill color in my simpleFillRect like this exemple : 

tweenLine.to( simpleFillRect, 4, {
		    kinetic: {
			fill: 'green'
		} );

but i can't update the properties needed for linear gradient :

tweenLine.to( linearGradientFillRect, 4, {
		    kinetic: {
			fillLinearGradientStartPoint: [ 0, 0 ],
			fillLinearGradientEndPoint: [ 200, 0 ],
			fillLinearGradientColorStops: [ 0, 'blue', 0.5, 'yellow', 1, 'blue' ],
		} );

i wondered if it was because these properties are array of values, and particularly the color stop array.

actually it's even throwing an error on every frame :

Uncaught TypeError: Object [object Array] has no method 'charAt'


i then tried this kind of code :

tweenLine.to( linearGradientFillRect, 4, {
		    kinetic: {
			fillLinearGradientStartPoint: ''+[ 0, 0 ],
			fillLinearGradientEndPoint: ''+[ 200, 0 ],
			fillLinearGradientColorStops: ''+[ 0, 'blue', 0.5, 'yellow', 1, 'blue' ],
		} );

but then it just does nothing.

what am i missing here ?


by the way, thx for all the job you done on this api. it's amazing of simplicity and readability !

really pleasant to discover and dig into this !

and please, excuse my poor french english !

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


Congrats on your success with GSAP and KineticJS.


As you have suspected the trouble is that all those gradient props are not simple values, they are complex arrays with potentially varying numbers of values. Currently the KineticPlugin does not support tweening those gradient values, but you could tween your own properties of a proxy object and then apply those values to the object's gradient fill like so:


rect = new Kinetic.Rect({
        x: 0,
        y: 75,
        width: appWidth,
        fillLinearGradientStartPoint: [ 0, 0 ],
        fillLinearGradientEndPoint: [ appWidth, 0 ],
        fillLinearGradientColorStops: [ 0, 'blue', 0, 'yellow', 1, 'blue' ]  


//create proxy object to hold tweenable values
gradientObject = {

//tween various values in gradientObject
TweenMax.to(gradientObject, 2, {yellowStop:1, onUpdate:applyGradient, repeat:20, yoyo:true, delay:0.4})
TweenMax.to(gradientObject, 1, {colorProps:{lastColor:'red'}, repeat:20, yoyo:true, delay:0.4});

//apply new values to rects fill and draw()
function applyGradient() {
  rect.setFillLinearGradientColorStops([0, 'blue', gradientObject.yellowStop, 'yellow', 1, gradientObject.lastColor]);


DEMO: http://codepen.io/GreenSock/pen/vhIEg


*note the above demo loads ColorPropsPlugin to assist in tweening 'blue' to 'red'


  • Like 1
Link to comment
Share on other sites


thank you for your help !

i know now that it's not directly possible right now with the kinetic plugin.

but your solution seems perfect !


i also have many ways of displaying my lifebars differently so i don't have to use gradients :)

but thank you so much for the time you spent on helping me.

i'll remember the proxy object solution.

and i'm going to check the colorprops plugin.

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.