Skip to main content

Animation

The <wje-animation> component makes it easy to animate a single embedded element without manually composing keyframes. Internally, it retrieves definitions from the Animate.css library and plays them through the Web Animations API.

The attributes you will use most often are:

  • name - the name of the animation from Animate.css, for example heartBeat,
  • duration - duration in milliseconds,
  • delay - delay before starting,
  • endDelay - delay after completion,
  • iterations - number of repetitions,
  • direction, easing, fill, iterationStart - more detailed playback settings.
note

The name of the animation is case-sensitive. In the current implementation, the default value is heartBeat, so use the names exactly according to Animate.css. Also note that the endDelay and iterationStart attributes are written in camelCase form.

Basic example​

The sample below combines declarative setting via attributes with programmatic control via play(), cancel() and loading a list of animations via getAnimationsArray().

Practical tips​

  • Insert one main element to be animated into <wje-animation>.
  • If you need to control the animation programmatically, use play() and cancel().
  • To offer the user a choice of animations, use getAnimationsArray() to display the names of the available animations in the custom UI.
  • For long or endless animations, think about both distractions and performance, especially in lists and dashboards.

For a complete list of attributes and methods, continue to the Animation component API page.

Content