SVG Animate

SVG Animate allows you to create stunning animations with ease. No need for complicated workarounds and going deep into the code. Instead, you can create animations individually on every element of your Figma creation by using a simple but powerful animation editor.

How it create SVG Animations:

Select the Frame you want to animate and click on Enable SVG Export.

Select a node within that Frame to set up animations such as X Position, Y Position, Scale, Rotation and Opacity.

Use the built-in live-preview to tweak your animations until you're happy with the result.

Download or copy the animated SVG and paste it on your website.

How to use SVG Animations on my Website:SVG Animate uses a small web component library under the hood to make your animations work.

This library uses GreenSock GSAP, a powerful, lightweight and performant animation engine.

When exporting from SVG Animate, you can download or copy the snippet with the click of a button, and paste it on your website. No complicated setup needed.