Lottie Segment Playback - Lottiefiles Typing CST Test
Loading…
Lottie Segment Playback — Lottiefiles Code
Plays only selected frame segments from the animation.
# lottiefiles/demo/segment.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
</head>
<body>
<button id="part1">Play Part 1</button>
<button id="part2">Play Part 2</button>
<div id="segAnim" style="width:200px;height:200px;"></div>
<script>
const anim = lottie.loadAnimation({
targets: document.getElementById('segAnim'),
path: 'data/segment.json',
renderer: 'svg',
loop: false,
autoplay: false
});
document.getElementById('part1').onclick = () => anim.playSegments([0, 60], true);
document.getElementById('part2').onclick = () => anim.playSegments([61, 120], true);
</script>
</body>
</html>Lottiefiles Language Guide
LottieFiles is a platform and library ecosystem for rendering and sharing lightweight, high-quality animations on web, mobile, and desktop. It uses JSON-based Lottie animations exported from Adobe After Effects via Bodymovin, enabling scalable, interactive animations without heavy asset overhead.
Primary Use Cases
- ▸Mobile and web app onboarding animations
- ▸Interactive icons and buttons
- ▸Progress indicators and loaders
- ▸Marketing websites with micro-animations
- ▸Cross-platform animations in Flutter, React Native, and web
Notable Features
- ▸JSON-based vector animations for small file sizes
- ▸Cross-platform playback via Lottie libraries
- ▸Supports interactivity and dynamic properties
- ▸Integrates with design tools like Adobe After Effects
- ▸Animation preview, sharing, and versioning via LottieFiles
Origin & Creator
Lottie was created by Airbnb in 2017, and LottieFiles emerged as a community platform to host, share, and manage Lottie animations.
Industrial Note
LottieFiles is widely used in app onboarding flows, interactive UI elements, micro-interactions, marketing sites, and mobile app animations, especially when lightweight, scalable, and responsive animations are critical.