Loop Animation - Lottie Typing CST Test
Loading…
Loop Animation — Lottie Code
Plays a Lottie animation on loop.
# lottie/demo/loop.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
</head>
<body>
<div id="loopAnim" style="width:200px;height:200px;"></div>
<script>
const anim = lottie.loadAnimation({
container: document.getElementById('loopAnim'),
path: 'data/loop.json',
renderer: 'svg',
loop: true,
autoplay: true
});
</script>
</body>
</html>Lottie Language Guide
Lottie is an open-source animation library that renders Adobe After Effects animations in real-time on web, mobile, and desktop platforms. It allows designers and developers to ship high-quality animations as JSON files exported via Bodymovin.
Primary Use Cases
- ▸App onboarding animations
- ▸Micro-interactions (buttons, loaders, checkmarks)
- ▸Marketing website animations
- ▸Animated illustrations and icons
- ▸Interactive storytelling and tutorials
Notable Features
- ▸Lightweight JSON animation files
- ▸Cross-platform support (Web, iOS, Android, Flutter)
- ▸High-quality vector animations without GIFs or videos
- ▸Supports dynamic property control via code
- ▸Looping, speed control, and playback direction
Origin & Creator
Lottie was developed by Airbnb Design in 2017 to bring high-quality After Effects animations to mobile and web in a lightweight and scalable way.
Industrial Note
Lottie is widely used in mobile apps, marketing sites, onboarding flows, UI animations, and anywhere designers need scalable, high-fidelity animations without heavy assets.