# Lottie animation

Native Lottie playback synchronized with the shared slide clock.

Source: https://legend.so/slides/effects/lottie-player/

Legend Slides: Preview.

[← All effects](https://legend.so/slides/effects/)![Lottie animation in Legend Slides](https://legend.so/slides/effects/previews/lottie-player/f684369e6cbbe3686473dbdc4c489fdca7f35ec770b75dac4c0453972404bf79.png)

Still captured in Legend Slides for macOS (development build).

[Install in Slides](legend-slides://effects/install?pack=animation&version=1.0.0)[Open example in Slides](legend-slides://effects/example?effect=lottie-player)[Download example](https://legend.so/slides/effects/examples/lottie-player/b75d0bf97db20a2ba1e3ec267a743eb8a2e005b2d50cfa5f2156a21677a0bfda.mdx)

Requires a Legend Slides build with effect installation support. Installs the animation pack (1.0.0, 2 KB source) and its dependencies. macOS host capabilities: reanimated, lottie. Installed decks work offline.

## Use it in a deck

```mdx
---
title: Lottie animation
---

import { View, Text } from "react-native";
import { LottiePlayer } from "slides:animation/LottiePlayer";

export const animation = {"v":"5.9.0","fr":30,"ip":0,"op":90,"w":400,"h":400,"nm":"Orbit","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Disc","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[200,200,0]},"a":{"a":0,"k":[0,0,0]},"s":{"a":1,"k":[{"t":0,"s":[40,40,100],"e":[100,100,100],"i":{"x":[0.5],"y":[1]},"o":{"x":[0.5],"y":[0]}},{"t":45,"s":[100,100,100],"e":[40,40,100],"i":{"x":[0.5],"y":[1]},"o":{"x":[0.5],"y":[0]}},{"t":90,"s":[40,40,100]}]}},"shapes":[{"ty":"el","p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[220,220]},"nm":"Circle"},{"ty":"fl","c":{"a":0,"k":[0.4,0.9,1,1]},"o":{"a":0,"k":100},"r":1}],"ip":0,"op":90,"st":0,"bm":0}]};

# Lottie animation

<View style={{ width: 1696, height: 650 }}>
<LottiePlayer source={animation} durationSeconds={3} style={{width: 600,height: 600,alignSelf: "center"}} />
</View>
```

## Configure

**source**

Parsed Lottie JSON supplied by the deck.

**durationSeconds**

Map native progress to slide time.

**previewProgress**

Choose the static presenter preview.

Only imported effects enter the compiled deck. [Installation and versioning →](https://legend.so/slides/effects/installation/)

[View Markdown](https://legend.so/slides/effects/lottie-player.md)[Report a documentation correction](https://github.com/LegendApp/legend-docs/issues/new?title=Docs%3A+Lottie+animation&body=Page%3A+https%3A%2F%2Flegend.so%2Fslides%2Feffects%2Flottie-player%0A%0AWhat+is+incorrect+or+missing%3F%0A%0AExpected+behavior+or+supporting+source%3A%0A)