Animation
Element Animation makes it easy to integrate animations into web applications, contributing to the creation of engaging and interactive user interfaces. It offers a wide range of customization options, including setting the delay, duration and number of animation repeats.
Basic usage
When to use
Use wje-animation when you need a consistent WebJET-based implementation for this UI concern.
When not to use
Do not stretch the component beyond its responsibility; compose smaller primitives for edge cases.
Accessibility
Validate keyboard behavior, focus states, contrast, and meaningful labels for interactive elements.
Best Practices
- Prefer component APIs over direct DOM manipulation.
- Stick to design tokens and naming conventions.
- Test components with realistic data before production rollout.
Attributes and Properties
No properties available for this component.
Events
No events available for this component.
Methods
getAnimationsArray
| Description | Method to fetch and parse the animations array from a CSS file. |
| Signature | () => Array |
destroyAnimation
| Description | Terminates and cleans up the currently active animation if it exists. Calls the cancel method to stop the animation process. |
| Signature | () => void |
play
| Description | Plays the currently assigned animation, if available. |
| Signature | () => void |
cancel
| Description | Cancels 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
| Name | Description |
|---|---|
--size | The size of the avatar. |
Slots
| Name | Description |
|---|---|
default | Default slot for the main component content. |