A Lottie file is played by a separate program, and not every player draws every feature the same way. This page shows what we have actually tested, feature by feature, so you know what to expect before you ship.
Web players measured 2026-10-09 against lottie-web 5.13.0 and dotLottie 0.80.0. Android measured 2026-10-09 with lottie-android 6.7.1 on Android 16. Flutter measured 2026-10-09 with the lottie package 3.6.1. React Native measured 2026-10-09 with lottie-react-native 7.5.0. iOS measured 2026-10-09 with lottie-ios 4.6.0 in the iOS 26.2 Simulator.
Everything else in the full results below is drawn correctly by every player we tested. These are the exceptions, and what to do instead.
| What | Doesn't work in | What to do instead |
|---|---|---|
| Outlines that grow outwardIgnored, so anything built from it (shadow spread, outside strokes) is likely to look different. | iOS, Android, Flutter, React Native | Outside stroke: put two copies of the shape on top of each other — the lower one with a Center stroke, the upper one with the fill. Shadow: set spread and softness to 0, or put a larger copy of the shape behind it in the shadow colour. tested on Android, Flutter not yet on iOS, React Native |
| Outlines that shrink inwardIgnored, so anything built from it (inner-shadow spread, inside strokes) is likely to look different. | iOS, Android, Flutter, React Native | No tested replacement yet. If the animation is going into an app, avoid inside strokes and inner-shadow spread, and check the result in the app. |
| PicturesThis player does not read pictures embedded in the file; the app has to load them itself (a few lines of code). Once it does, they draw correctly. | Flutter | In the app, add the few lines of code that load embedded pictures. They then draw correctly. |
| A picture as the maskA picture used as a mask doesn't work. Use a shape as the mask instead. | lottie-web canvas, iOS, Android, Flutter, React Native | Use a shape as the mask instead of a picture. |
| Stretching width and height on different timingsWidth and height ease together and ignore separate timing. | dotLottie, iOS, Android, Flutter, React Native | Give width and height the same timing and easing, or scale both together. tested on dotLottie, Android, Flutter not yet on iOS, React Native |
| Jump cuts (holding a value)A held value never moves on to the next one. | Android, Flutter, React Native | Add a key one frame before the next move, with the same value, and use linear easing. It reads as a cut. tested on Android, Flutter not yet on React Native |
| Changing colourThe colours in between are blended differently, so the middle of a colour change looks lighter than on the web. | Android, Flutter, React Native | Add extra colour keys along the way, a few frames apart, so each step is small. The middle of the change then lands much closer to the web. Reduces the difference; it does not remove it. tested on Android, Flutter not yet on React Native |
Nothing to watch for here — every feature we tested is drawn correctly.
| lottie-web | dotLottie | Apps | |||||
|---|---|---|---|---|---|---|---|
| Canvas | SVG | .lottie | iOS (Simulator) | Android | Flutter | React Native (Android) | |
| Shapes and outlines | |||||||
| Rectangles | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Circles and ellipses | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Custom paths and polygons | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Shapes with holesWhat Combine ▸ Subtract produces | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Outlines (strokes) | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Outlines that grow outwardUsed by shadow spread and outside strokes | ✓ | ✓ | ✓ | ✗ | ✗ | ✗ | ✗ |
| Outlines that shrink inwardUsed by inner-shadow spread and inside strokes | ✓ | ✓ | ✓ | ✗ | ✗ | ✗ | ✗ |
| Colour and transparency | |||||||
| Linear gradients | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Radial gradients | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Gradient outlines | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Transparency on a group | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Transparency on a layer | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Layers and groups | |||||||
| Groups that move together | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Groups with their own position | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Fading a whole group | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Solid background | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Pictures | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✓ |
| Layers that appear and disappear | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Masks | |||||||
| Masking one layer with another | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| A group as the mask | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Masking a whole group | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| A picture as the maskUse a shape as the mask instead | ✗ | ✓ | ✓ | ✗ | ✗ | ✗ | ✗ |
| Animation | |||||||
| Moving | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Moving across and up/down on different timings | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Stretching width and height on different timings | ✓ | ✓ | ✗ | ✗ | ✗ | ✗ | ✗ |
| Jump cuts (holding a value) | ✓ | ✓ | ✓ | ✓ | ✗ | ✗ | ✗ |
| Morphing a shape | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Changing colour | ✓ | ✓ | ✓ | ✓ | ✗ | ✗ | ✗ |
| Fading in and out | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Rotating | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
✓ drawn correctly ✗ not drawn correctly — hover for why – not tested yet
Each row is one thing you can do in the editor. A green tick means we exported a small test animation using only that feature and the player drew it correctly, checked pixel by pixel. A red cross means it didn't. A dash means we haven't tested that player yet — it does not mean it works or doesn't.
The web players are what most sites use. lottie-web can
draw to a canvas or to SVG; we recommend
canvas (see the embed guide).
dotLottie plays .lottie files with a
different engine, which is why it can disagree with lottie-web.
iPhones. The iOS column was tested in Apple's iPhone Simulator on a Mac, not on a physical iPhone. It runs the same Lottie player code, so we expect a real iPhone to behave the same, but we haven't confirmed it. The Android, Flutter and React Native columns were each tested on one phone; other phones and versions use the same libraries but we haven't checked them. If your animation is going into an app, test it there before you rely on it.
React Native has no player of its own. We ran a real
React Native app (React Native 0.86.3 with lottie-react-native
7.5.0) on an Android phone. It uses the same Android player as the Android
column, at the same version, and it gave the same results. On iOS it uses
the same player as the iOS column (version 4.6.0), but we haven't run a
React Native app there, so its column covers Android only.
Combined effects. Soft shadows, inner shadows and text are built from several of the features above. We've seen small differences between players on shadows that we haven't explained yet, so check those by eye.