Effects
LEGEND APPSPreview
Lottie animation
Native Lottie playback synchronized with the shared slide clock.
← All effects
Still captured in Legend Slides for macOS (development build).
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
---
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 →