Lottie files are a versatile way to bring animations and editable motion graphics into your projects. However, it’s important to understand the features Design Huddle supports and does not support to ensure your Lottie files function properly in your videos.
Supported Features
When creating or importing Lottie files into Design Huddle, be sure to take advantage of the supported features listed below to ensure compatibility:
- Basic Shapes & Custom SVGs: Design Huddle fully supports vector shapes, including ellipses, rectangles, stars and any other outline you create.
- Solid Fills & Strokes: Solid color fills and strokes work perfectly within our platform.
- Trim Paths: This feature, which animates the strokes of shapes, is supported, enabling dynamic line animations.
- Masks: Design Huddle supports mask animations to create smooth transitions and reveals.
- Opacity & Transformations: Adjusting the opacity or transforming (scaling, rotating, etc.) elements in your Lottie file is fully supported.
- Gradient Fills: Both linear and radial gradients are supported, adding depth and color variation to your animations.
- Embedded Images: Images in a lottie file will be layered in the Design Huddle editor to easily be switched out by an user
- Text Layers: Text will be layered in the Design Huddle editor to be switched out by an user
For more details on the specific features supported by Design Huddle, see the list below.
Shapes
- Shape
- Ellipse
- Rectangle
- Rounded Rectangle
- Polystar
- Group
- Repeater
- Trim Path (individually)
- Trim Path (simultaneously)
Fills
- Color
- Opacity
- Fill Rules
- Linear Gradient
- Radial Gradient
Strokes
- Color
- Opacity
- Width
- Line Cap
- Line Join
- Milter Limit
- Dashes
- Gradient
Transforms
- Position
- Position (separated X/Y)
- Scale
- Anchor Point
- Opacity
- Parenting
- Auto Orient
- Skew
Interpolation
- Linear Interpolations
- Bezier Interpolation
- Hold Interpolation
- Spatial Bezier Interpolation
- Rove Across Time
Masks
- Mask Path
- Mask Opacity
- Add
- Subtract
- Difference
- Expansion
Mattes
- Alpha Matte
- Alpha Inverted Matte
- Luma Matte
- Luma Inverted Matte
Merge Paths
- Merge
Layer Effects
- Fill
- Stroke (partial support)
- Tint
- Tritone
- Levels Individual Controls
Text
- Glyphs
- Fonts
- Transform
- Fill
- Stroke Tracking
- Text Alignment Options
- Text Path
- Range Selector (Units)
- Range Selector (Based on)
- Range Selector (Amount)
- Range Selector (Shape)
- Range Selector (Ease High)
- Range Selector (Ease Low)
- Range Selector (Randomize order)
- Expression Selector
Other
- Expressions
- Images
- Precomps
- Time Stretch
- Time Remap
- Markers
- Slots
Unsupported Features
Certain features in Lottie files may not render correctly in Design Huddle. To avoid issues with your animations, avoid using the following:
3D Effects
Shapes
- Offset Path
Masks
- Intersect
- Lighten
- Darken
Merge Paths
- Add
- Subtract
- Intersect
- Exclude Intersection
Layer Effects
- Stroke (partial support)
Recommendations for Optimal Use
To ensure the best performance of your Lottie files within Design Huddle, follow these best practices:
- Simplify Your Animations: Keep animations lightweight by using basic shapes, solid fills, and avoiding unsupported effects.
- Test Your Files: Always preview your Lottie files in Design Huddle to ensure they display as expected.
- Optimize File Size: Compressing your Lottie files can improve performance and loading times.
- Image Embedding: Verify that any images in the Lottie file are embedded in the image and not being externally referenced.
By adhering to these best practices, you’ll ensure your animations run smoothly and look great across all devices. For more information on Lottie file compatibility, please reach out to support@designhuddle.com.