From SpinetiX Support Wiki

Jump to: navigation, search

This page is related to jSignage animation events.


Add an SVG animation onto a specified target element. If supported by the player, the animation is implemented with SMIL animations rather than with JavaScript timers.

$.svgAnimation( target, name, attributesObject );
$.svgAnimation( target, name, attributesObject, endCallback );

Returns: SVG Element


  • target
    Type: SVG Element.
    Target element for the animation.
  • name
    Type: String.
    Name of the animation tag. The following values are valid: animate, animateTransform, animateColor or animateMotion.
    Note that jSignage shortcut functions exists for animateColor and animateMotion.
  • endCallback
    Type: Callback.
    Optional callback to be executed at the end of the animation.


$(function () {    
    var img = $.media( {href: 'media/Fusion.jpg'} ).addTo('svg');
    // animate the opacity of the image up to 0 (invisible)
    $.svgAnimation( img[0], 'animate', {
        attributeName: 'opacity',
        from: '1',
        to: '0',
        dur: 10,
        fill: 'freeze'
This page was last modified on 6 December 2018, at 22:26.