| Shapes | Android | iOS (Core Animation) | iOS (Main Thread) | Windows | Web (SVG) | Web (Canvas) | Web (HTML) |
|---|---|---|---|---|---|---|---|
| Shape | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Ellipse | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Rectangle | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Rounded Rectangle | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Polystar | 👍 | 👍 | 👍 | ⛔️ | 👍 | 👍 | 👍 |
| Group | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Repeater | 👍 | 👍 | ⛔️ | 👍 | 👍 | 👍 | 👍 |
| Trim Path (individually) | 👍 | 👍 | 👍 | ⛔️ | 👍 | 👍 | 👍 |
| Trim Path (simultaneously) | 👍 | ⛔️ | 👍 | 👍 | 👍 | 👍 | 👍 |
| Fills | Android | iOS (Core Animation) | iOS (Main Thread) | Windows | Web (SVG) | Web (Canvas) | Web (HTML) |
| Color | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Opacity | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Fill Rule | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Radial Gradient | 👍 | 👍 | ️️️️️️️️👍 | 👍 | 👍 | 👍 | 👍 |
| Linear Gradient | 👍 | 👍 | ️️️️️️️️👍 | 👍 | 👍 | 👍 | 👍 |
| Strokes | Android | iOS (Core Animation) | iOS (Main Thread) | Windows | Web (SVG) | Web (Canvas) | Web (HTML) |
| Color | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Opacity | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Width | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Line Cap | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Line Join | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Miter Limit | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Dashes | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Gradient | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Transforms | Android | iOS (Core Animation) | iOS (Main Thread) | Windows | Web (SVG) | Web (Canvas) | Web (HTML) |
| Position | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Position (separated X/Y) | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Scale | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Rotation | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Anchor Point | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Opacity | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Parenting | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Auto Orient | ⛔️ | ⛔️ | ⛔️ | ⛔️ | 👍 | 👍 | 👍 |
| Skew | ❓ | 👍 | 👍 | ❓ | 👍 | 👍 | 👍 |
| Interpolation | Android | iOS (Core Animation) | iOS (Main Thread) | Windows | Web (SVG) | Web (Canvas) | Web (HTML) |
| Linear Interpolation | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Bezier Interpolation | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Hold Interpolation | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Spatial Bezier Interpolation | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Rove Across Time | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Masks | Android | iOS (Core Animation) | iOS (Main Thread) | Windows | Web (SVG) | Web (Canvas) | Web (HTML) |
| Mask Path | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Mask Opacity | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Add | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Subtract | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Intersect | 👍 | 👍 | 👍 | ⛔️ | ⛔ | ⛔ | ⛔ |
| Lighten | ⛔️ | ⛔️ | ⛔️ | ⛔️ | ⛔️ | ⛔ | ⛔ |
| Darken | ⛔️ | ⛔️ | ⛔️ | ⛔️ | ⛔️ | ⛔ | ⛔ |
| Difference | ⛔️ | ⛔️ | ⛔️ | ⛔️ | ⛔️ | ⛔ | ⛔ |
| Expansion | ⛔️ | ⛔️ | ⛔️ | ⛔️ | ⛔️ | 👍 | 👍 |
| Feather | ⛔️ | ⛔️ | ⛔️ | ⛔️ | ⛔️ | ⛔ | ⛔ |
| Mattes | Android | iOS (Core Animation) | iOS (Main Thread) | Windows | Web (SVG) | Web (Canvas) | Web (HTML) |
| Alpha Matte | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Alpha Inverted Matte | 👍 | 👍 | 👍 | ⛔️ | 👍 | 👍 | 👍 |
| Luma Matte | ⛔️ | ⛔️ | ⛔️ | ⛔️ | ❔ | ❔ | ❔ |
| Luma Inverted Matte | ⛔️ | ⛔️ | ⛔️ | ⛔️ | ❔ | ❔ | ❔ |
| Merge Paths | Android | iOS (Core Animation) | iOS (Main Thread) | Windows | Web (SVG) | Web (Canvas) | Web (HTML) |
| Merge | 👍 (KitKat+) | ⛔ | ⛔ | 👍 | ⛔ | ⛔ | ⛔ |
| Add | 👍 (KitKat+) | ⛔ | ⛔ | 👍 | ⛔ | ⛔ | ⛔ |
| Subtract | 👍 (KitKat+) | ⛔ | ⛔ | 👍 | ⛔ | ⛔ | ⛔ |
| Intersect | 👍 (KitKat+) | ⛔ | ⛔ | 👍 | ⛔ | ⛔ | ⛔ |
| Exclude Intersection | 👍 (KitKat+) | ⛔ | ⛔ | 👍 | ⛔ | ⛔ | ⛔ |
| Layer Effects | Android | iOS (Core Animation) | iOS (Main Thread) | Windows | Web (SVG) | Web (Canvas) | Web (HTML) |
| Fill | ⛔️ | ⛔️ | ⛔️ | ⛔️ | 👍 | 👍 | 👍 |
| Stroke | ⛔️ | ⛔️ | ⛔️ | ⛔️ | 👍 | 👍 | 👍 |
| Tint | ⛔️ | ⛔️ | ⛔️ | ⛔️ | 👍 | 👍 | 👍 |
| Tritone | ⛔️ | ⛔️ | ⛔️ | ⛔️ | 👍 | 👍 | 👍 |
| Levels Individual Controls | ⛔️ | ⛔️ | ⛔️ | ⛔️ | ❔ | 👍 | 👍 |
| Gaussian blur | 👍 (4.1+) | ⛔️ | ⛔️ | ⛔️ | ❔ | ❔ | ❔ |
| Drop Shadows | 👍 (4.1+) | 👍 | 👍 | ⛔️ | ❔ | ❔ | ❔ |
| Text | Android | iOS (Core Animation) | iOS (Main Thread) | Windows | Web (SVG) | Web (Canvas) | Web (HTML) |
| Glyphs | 👍 | ⛔️ | ⛔️ | ⛔️ | 👍 | 👍 | 👍 |
| Fonts | 👍 | 👍 | 👍 | ⛔️ | 👍 | 👍 | 👍 |
| Transform | 👍 | 👍 | 👍 | ⛔️ | 👍 | 👍 | 👍 |
| Fill | 👍 | 👍 | 👍 | ⛔️ | 👍 | 👍 | 👍 |
| Stroke | 👍 | 👍 | 👍 | ⛔️ | 👍 | 👍 | 👍 |
| Tracking | 👍 | 👍 | 👍 | ⛔️ | 👍 | 👍 | 👍 |
| Anchor point grouping | ⛔️ | ⛔️ | ⛔️ | ⛔️ | 👍 | 👍 | 👍 |
| Text Path | ⛔️ | ⛔️ | ⛔️ | ⛔️ | 👍 | 👍 | 👍 |
| Per-character 3D | ⛔️ | ⛔️ | ⛔️ | ⛔️ | 👍 | 👍 | 👍 |
| 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 | Android | iOS (Core Animation) | iOS (Main Thread) | Windows | Web (SVG) | Web (Canvas) | Web (HTML) |
| Expressions | ⛔️ | ⛔️ | ⛔️ | ⛔️ | 👍 | 👍 | 👍 |
| Images | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Precomps | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
| Time Stretch | 👍 | 👍 | 👍 | ⛔️ | 👍 | 👍 | 👍 |
| Time remap | 👍 | 👍 | 👍 | ⛔️ | 👍 | 👍 | 👍 |
| Markers | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 | 👍 |
Drop shadows and gaussian blur effects on Android are applied on each fill or stroke not on the final layer. This has the following side effects:
- If you have many shapes in a layer that has a drop shadow, each shape will get its own shadow and it may appear darker in some areas than others due to overlapping shadows.
- If your blur or shadow extends beyond the bounds of a precomp, the blur or shadow will be clipped. To avoid this, add padding to your precomp.
- Dynamic properties must target the individual fill or strokes that have a blur or shadow even if the effect is applied on the whole layer. The easiest way to do this is to append "**" after the layer name in the KeyPath. This will apply the dynamic property to all applicable children within the layer.
Lottie for iOS includes two rendering engine implementations, which are responsible for actually displaying and rendering Lottie animations:
- The Core Animation rendering engine (enabled by default in Lottie 4.0+) uses Core Animation
CAAnimations to deliver better playback performance than the older Main Thread rendering engine. - The Main Thread rendering engine (the default before Lottie 4.0) runs code on the main thread once per frame to update and re-render the animation.
You can learn more about the Core Animation rendering engine in this post on Airbnb's Tech Blog: Announcing Lottie 4.0 for iOS.
Most animations are rendered exactly the same by both rendering engines, but as shown above the Core Animation rendering engine and Main Thread rendering engine support slightly different sets of functionality.
As of Lottie 4.0, Lottie uses the Core Animation rendering engine by default. If Lottie detects that an animation uses functionality not supported by the Core Animation rendering engine, it will automatically fall back to the Main Thread rendering engine. You can also configure which rendering engine is used by configuring the LottieConfiguration.renderingEngine.