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

Info

  • Version: 1.4.0
  • Updated: about 1 month ago
  • License: MIT

Share

By using our website, you agree to the use of cookies as described in our  Privacy Policy —
I Agree