From SpinetiX Support Wiki

Jump to: navigation, search

This page is related to jSignage animation events.


.animateOpacity( attributesObject );
.animateOpacity( target, attributesObject );

Returns: jSignage Object


Animates the opacity of one of the colors of a linear gradient, a radial gradient, a shape, or a layer.


  • attributesObject
    Type: Plain Object.
    An object containing any of the following attributes:
  • target (optional)
    Type: Number or String.
    Specifies the index of the gradient stop whose opacity is to be animated, or the name of the color attribute whose opacity is animated for a geometric shape (e.g., 'fill', 'stroke').


Flashing rectangle

// create a rectangle and animate the opacity of the interior
    x: 0, y: 0, width: 1280, height: 720
}).animateOpacity( 'fill', { 
    dur: 10, from: 0, to: 1, repeatCount: 'indefinite' 

Flashing text

// create a solid color element and add it to the document
var myTextColor = $.solidColor({ color: 'white' }).addTo('svg');

// animate the opacity from o to 1
    begin: 1, dur: 1, repeatCount: 'indefinite', values: [ 0, 1, 0 ]   
// create a text area whose text appears and disappears repeatedly
    width: '90%', height: '15%', top: '75%', left: '5%', fontSize: '50px', fill: myTextColor.ref(), frame: { backColor: 'blue' }
}).text("Flashing text !").addTo('svg');
This page was last modified on 9 May 2022, at 12:56.