JSignage animation events

 

This page is about the JSignage functions used to add animation events. For adding an animation layer, see jSignage media layers page.

Animation events

The visual appeal of digital signage applications can be greatly enhanced with jSignage due to the possibility to add different types of animation events: effects, transitions or custom animations.

Effects

jSignage effects can be used to improve the way a layer appears (in effect) or disappears (out effect) from the scene.

// add fade in and fade out effects to all the images in the document
$('image').fadeIn({ dur: '0.5s' }).fadeOut();

// add an SVG clock to the document with a fade in animation
$('svg').add( 
    $.animation ({ href: 'clock.svg', id : 'clk1' }).fadeIn({ dur: '3s' })
);

See also how to create new effects with jSignage.

Transitions

jSignage transitions are applied between consecutive items of a playlist or slideshow. A transition is a combination of an out-effect on the current slide and an in-effect on the next one.

// create a playlist of images with a cross-fade transition between them and add it to the document
$.playlist({
    data: [ 'A.jpg', 'B.jpg', 'C.jpg', 'D.jpg' ],
    defaultTransition : $.crossFade( )
}).addTo( 'svg' );

See also JSignage:Creating new transitions.

Custom animations

Custom animations are created with the following functions:

• animateColor()

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

• animateMotion()

  Creates a motion animation for a jSignage layer.

• animateOpacity()

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

• animateRotate()

  Creates a rotation animation for a jSignage layer.

• animateZoom()

  Creates a zoom animation for a jSignage layer.

• svgAnimation()

  Add an SVG animation onto a specified target element.