JSignage transitions

 

This page is related to jSignage animation events. See also the "Create new transitions with jSignage" page for how to extend the framework with new transitions.

Introduction

Transitions are similar to JSignage effects, but they link two medias of a Playlists or two slides of a Slideshow together, so both the in and out effects are part of the transition. They are applied to Slideshows or Playlists using the transition or defaultTransition attribute.

A different transition can be specified for each slide or media. The transition applies to the slide with which it is associated, i.e. for the period of time that starts with the slide and ends with the start of the next slide. For transitions such as the fade where the out effect is applied before the next slide and thus before the next transition is decided, this implies that the out effect will be applied regardless of what the next transition is.

Typically, transitions are applied to a playlist using the defaultTransition attribute, as shown below.

$.playlist({
    data: [ 'images/1.jpg', 'images/2.jpg', 'images/3.jpg', 'images/4.jpg' ],
    defaultTransition: $.wipe({ dur:0.5, type:'iris'})
}).addTo( 'svg' );

All the transition support the dur attribute, which controls the duration of the transition effect(s). Its default value is usually '0.5s'. Some transitions, such as the fade, are composed of two effects: a fade to the background at the end of the current media and a fade from the background at the beginning of the next media. Setting this attribute to 1s means that both fades last for 1s, so the total duration of the transition effect is actually 2s.

jSignage.random()

Selects a transition at random.

jSignage.random( attributesObject )

Returns: jSignage Transition Object

Parameters

• attributesObject

  Type: Plain Object

  An optional object containing the dur attribute (common to all transitions)

Note:

The arguments are simply passed to whatever transition is selected, so transition specific arguments should not be used as the default value would call for a random type (or subtype if the transition offers variations) resulting in a random choice among the transition available variations.

Example

 $.random({ dur: '1s' });

jSignage.crossFade()

Classical cross-fade: a new slide cross-fades over the previous one as it starts playing.

jSignage.crossFade( attributesObject )

Returns: jSignage Transition Object

Parameters

• attributesObject

  Type: Plain Object

  An optional object containing the dur attribute (common to all transitions). Default: '1s'

Example

 $.crossFade({ dur: '2s' });

jSignage.fade()

Fades out the current slide, then fades in the next slide from the background.

jSignage.fade( attributesObject )

Returns: jSignage Transition Object

Parameters

• attributesObject

  Type: Plain Object

  An optional object containing any of the following attributes:

  • dur: Duration of each fade. Default: '1s'
  • color: Fade color or null (default value) for transparent (fading to/from the background)

Example

 $.fade({ dur: '1s', color: 'black' });

jSignage.slide()

Introduce the new slide with a slide-in effect over the previous, frozen, slide.

jSignage.slide( attributesObject )

Returns: jSignage Transition Object

Parameters

• attributesObject

  Type: Plain Object

  An optional object containing any of the following attributes:

  • dur: Duration of the effect. Default: '0.5s'
  • direction: Direction of sliding motion, one of: random (default), rightToLeft, leftToRight, bottomToTop, topToBottom

Example

 $.slide({ dur: '1s', direction: 'leftToRight' });

jSignage.push()

Introduce the new slide with a "fly in" effect while pushing the previous slides flies out, like with an old slide projector.

jSignage.push( attributesObject )

Returns: jSignage Transition Object

Parameters

• attributesObject

  Type: Plain Object

  An optional object containing any of the following attributes:

  • dur: Duration of the effect. Default: '0.5s'
  • direction: Direction of flight motion, one of: random (default), rightToLeft, leftToRight, bottomToTop, topToBottom

Example

 $.push({ dur: '1s', direction: 'leftToRight' });

jSignage.wipe()

Introduce the new slide with one of the multiple types of wipe effects over the previous, frozen, slide.

jSignage.wipe( attributesObject )

Returns: jSignage Transition Object

Parameters

• attributesObject

  Type: Plain Object

  An optional object containing any of the following attributes:

  • dur: Duration of the effect. Default: '0.5s'
  • type: Wipe type according to the taxonomy of SMPTE 258M-1993 (see below)
  • subType: Wipe subtype (see below)

SMPTE Wipe types and subtypes

• "random" (default) any type of wipe
• "bar"
  • "random" (default) any direction
  • "leftToRight"
  • "rightToLeft"
  • "topToBottom"
  • "bottomToTop"
• "box"
  • "random" (default) any direction
  • "topLeft"
  • "topRight"
  • "bottomRight"
  • "bottomLeft"
  • "topCenter"
  • "rightCenter"
  • "bottomCenter"
  • "leftCenter"
• "barnDoor"
  • "random" (default) any orientation
  • "vertical"
  • "horizontal"
• "iris"
  • "rectangle"

Example

 $.wipe({ dur: '1s', type: 'barnDoor', subType: 'vertical' });

jSignage.page()

Introduce the new slide with a page in effect over the previous, frozen, slide which fades out quickly.

jSignage.page( attributesObject )

Returns: jSignage Transition Object

Parameters

• attributesObject

  Type: Plain Object

  An optional object containing the dur attribute (common to all transitions). Default: '0.375s'

Example

 $.page({ dur: '0.5s' });

jSignage.flip()

Flip the current slide over to the new one.

jSignage.flip( attributesObject )

Returns: jSignage Transition Object

Parameters

• attributesObject

  Type: Plain Object

  An optional object containing any of the following attributes:

  • dur: Duration of the effect. Default: '0.5s'
  • orientation: Orientation of the pivot axis, one of: random (default), horizontal, vertical

Example

 $.flip({ dur: '1s', orientation: 'horizontal' });

jSignage.cubeFace()

Introduce the new slide with a pseudo-3D simulation of the rotation of a cube from the current slide facing the screen to one of the other 4 peripheral faces.

jSignage.cubeFace( attributesObject )

Returns: jSignage Transition Object

Parameters

• attributesObject

  Type: Plain Object

  An optional object containing any of the following attributes:

  • dur: Duration of the effect. Default: '0.5s'
  • direction: Direction of flight motion, one of: random (default), rightToLeft, leftToRight, bottomToTop, topToBottom

Example

 $.cubeFace({ dur: '1s', direction: 'leftToRight' });

jSignage.zoom()

Fade in and zoom the slide as it appears, from a smaller size to the nominal size of the layer; zoom again and fade out when it disappears.

jSignage.zoom( attributesObject )

Returns: jSignage Transition Object

Parameters

• attributesObject

  Type: Plain Object

  An optional object containing any of the following attributes:

  • dur: Duration of the effect. Default: '1s'
  • factorIn: Zoom factor at beginning. Default: '20%'
  • factorOut: Zoom factor at end. Default: '20%'
  • keepZooming: Keep zooming while the slide is displayed. If true, the zoomOut factor is ignored. Default: 'false'

Example

Show text layers which are continuously in motion.

 $.slideshow({
   begin: '0s',
   repeatCount: 'indefinite',
   defaultSlideDur: 5,
   defaultTransition: $.zoom({ keepZooming: true, factorIn: '10%' }),
   data: [ 'This is text:', 'Text is good for you !', 'You need text.' ],
   renderToSVG: function() {
     return $.textArea({ fontSize: 48, fontFamily: 'Arial Black', fill: 'white' }).tspan( this );
   }
 }).addTo('svg');