From SpinetiX Support Wiki

Jump to: navigation, search

This page is related to jSignage animation events.


.animateColor( attributesObject );
.animateColor( target, attributesObject );

Returns: jSignage Object


Animates the color of a linear gradient, a radial gradient or a shape.


  • target (optional)
    Type: Number or String.
    Specifies the index of the gradient stop whose color is to be animated, or the name of the color attribute to be animated for a geometric shape (e.g., 'fill', 'stroke').


Rectangle with animated fill color

// after 5s, start to indefinitely animate the color of a rectangle from blue to red during 10s
    x: 0, y: 0, width: 1280, height: 720, fill: 'blue' 
}).animateColor( 'fill', {
    begin:5, dur: 10, from: 'blue', to: 'red', repeatCount: 'indefinite'

Text layer with flashing background

// create a solid color background and add it to the document
var backgroundColor = $.solidColor('grey').addTo('svg');

// animate the color to white and back to grey during 0.2s
    begin: 1, dur: 1, repeatCount: 'indefinite',
    keyTimes: [ 0, 0.8, 0.9, 1 ],
    values: [ 'grey', 'grey', 'white', 'grey' ]      

// add the flashing background to a text area
    width: '90%', height: '15%', top: '75%', left: '5%', fontSize: '30px',
    frame: { backColor: backgroundColor.ref() }
}).text("Text with flashing background !").addTo('svg');
This page was last modified on 20 February 2019, at 17:11.