Flow - Now with Lottie & Animated SVGs - Ship beautiful UI Animations. | Product Hunt Embed
asvg-compatibility

Tags icon

Animated SVG Compatibility (Beta)

The most up-to-date list of properties that Flow exports (and soon will) to animated SVG files.

Our aim is to get as much flexibility in export as possible from Flow. To reach some platforms we currently don’t support, we’ve introduced our new animated SVG export. Have a look at our Blog Post to learn more about Animating for SVG Export.


LEGEND

Animatable.
Non-Animatable.
Not Currently Implemented.
Broken… We’re looking into it..

Notes

There are a couple of things to remember when animating for SVG output.

  1. Set the anchor points for all layers, to the top left.
  2. You can’t have offset and overlapping width and height animations.
  3. We only export properties and animations that Flow handles. If it’s in the SVG spec, but not here, we don’t have plans to implement it, yet. For example: ripple effects.

Layers / Groups

Property Chrome Safari FireFox
X
Y
Width
Height
Anchor Point X
Anchor Point Y
Rotation
Opacity
Background Color
Border Width
Border Color
Border Radius
Shadow Color
Shadow Radius
Shadow Offset X
Shadow Offset Y
Flip Horizontal
Flip Vertical

Shapes

Property Chrome Safari FireFox
Path
Fill Gradient
Fill Image
Fill Color
Stroke Color
Stroke Width
Stroke Start
Stroke End
Miter Limit
Line Cap
Line Join
Dash Pattern
Dash Pattern Offset

Text

Property Chrome Safari FireFox
String
Font
Font Size
Font Color
Text Alignment
Truncation Mode

Images

Property Chrome Safari FireFox
Image
Content Mode

Groups

Property Chrome Safari FireFox
Mask Path

background Made with Flow.
underscore Made with Flow.
line2 Made with Flow.
line1 Made with Flow.
circle Made with Flow.
hit Made with Flow.

result(s) found for “”.