with Multiple Animations - Lottie Typing CST Test
Loading…
with Multiple Animations — Lottie Code
Displays multiple Lottie animations on the same page.
# lottie/demo/multiple.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script>
</head>
<body>
<div id="anim1" style="width:150px;height:150px;"></div>
<div id="anim2" style="width:150px;height:150px;"></div>
<script>
lottie.loadAnimation({ container: document.getElementById('anim1'), path: 'data/anim1.json', renderer: 'svg', loop: true, autoplay: true });
lottie.loadAnimation({ container: document.getElementById('anim2'), path: 'data/anim2.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.