Skip to main content

Animation

shadow

wje-animation is a lightweight wrapper for playing Animate.css animations around slotted content. It applies keyframes to the first element in the default slot and plays them through the Web Animations API.

Basic usage​

The example below wraps a wje-avatar in wje-animation and shows both basic animation setup through the name attribute and imperative control through play() and cancel().

Things To Keep In Mind​

  • The animation is applied to the first assigned element from the default slot, so it works best with one main wrapper.
  • The default animation name is heartBeat.
  • The current implementation uses endDelay and iterationStart as camelCase attribute names.
  • The host itself is not interactive; it sets role="presentation".
  • Use getAnimationsArray() when you need to surface the available animation names in your own UI.

Accessibility​

  • Animation should support meaning, not replace it.
  • In important flows, consider reduced-motion behavior.
  • If the animated content is interactive, accessibility is handled by the slotted child.

Best Practices​

  • Use play() and cancel() for repeated control.
  • If you change name at runtime, verify that the component refreshes correctly in your specific use case.
  • For long-running or infinite animations, evaluate both distraction and performance, especially inside lists.

Attributes and Properties​

delay​

DescriptionThe delay before the animation starts.
Attributedelay
Typenumber
Default0

direction​

DescriptionThe playback direction of the animation.
Attributedirection
Typestring
Defaultnormal

duration​

DescriptionThe animation playback duration in milliseconds.
Attributeduration
Typenumber
Default1000

easing​

DescriptionThe easing function used by the animation playback.
Attributeeasing
Typestring
Defaultlinear

endDelay​

DescriptionThe delay applied after the animation completes.
AttributeendDelay
Typenumber
Default0

fill​

DescriptionThe fill mode used by the animation playback.
Attributefill
Typestring
Defaultauto

iterations​

DescriptionThe number of animation repetitions.
Attributeiterations
Typestring｜number
Default-

iterationStart​

DescriptionThe starting offset for the first animation iteration.
AttributeiterationStart
Typenumber
Default0

name​

DescriptionThe Animate.css animation name played on the slotted element.
Attributename
Typestring
DefaultheartBeat

Events​

No events available for this component.

Methods​

getAnimationsArray​

DescriptionMethod to fetch and parse the animations array from a CSS file.
Signature() => Array

destroyAnimation​

DescriptionTerminates and cleans up the currently active animation if it exists. Calls the cancel method to stop the animation process.
Signature() => void

play​

DescriptionPlays the currently assigned animation, if available.
Signature() => void

cancel​

DescriptionCancels the current animation if it is initialized and has a cancel method. Logs a warning if the animation is not initialized or the cancel method is unavailable.
Signature() => void

CSS Shadow Parts​

No CSS shadow parts available for this component.

CSS Custom Properties​

No CSS custom properties available for this component.

Slots​

NameDescription
defaultDefault slot for the main component content.

Content