Animator
Benjamin den Boer
Overview
An SVG Path animator component. Connect the component to any Graphic element with an SVG Path, and it will automatically animate to its length, while offering a suite of animation controls. Supports multiple path animations, but in order to get the most reliable results, use the Join Boolean Operation to combine all paths within your Graphic Container. Happy animating!
Quick Start
- Go to https://feathericons.com/
- Download an SVG Icon
- Drag onto Canvas
- Double-click to convert
- Join all paths (optional but recommended)
- Connect to component
Properties
| Property | Type | Description | Default |
|---|---|---|---|
| State | boolean |
Play or pause. | play |
| Fill | boolean |
Inherit or remove. | inherit |
| Time | number |
Duration in seconds. | 2 |
| Delay | number |
Delay in seconds. | 0 |
| Count | number |
Animation iteration count. | 1 |
| Direction | enum |
Forwards, backwards, or alternating. | forwards |
| Curve | boolean |
Ease or Bezier. | ease |
| Type | enum |
Easing options. | ease |
| Values | string |
Custom bezier curve. | 1, 0, 0, 1 |