JSignage animation events

From SpinetiX Support Wiki

Jump to: navigation, search
Note  
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:

This page was last modified on 7 January 2021, at 18:17.