Web Implementation Guide
Framework-Specific Implementations
React Implementation
// Install React Lottie
npm install react-lottie-player
// Component usage
import { Player } from '@lottiefiles/react-lottie-player';
function AnimationComponent() {
return (
<Player
autoplay
loop
src="/animations/my-animation.json"
style={{ height: '300px', width: '300px' }}
/>
);
}Vue.js Implementation
// Install Vue Lottie
npm install vue-lottie
// Component usage
<template>
<lottie
:options="defaultOptions"
:height="400"
:width="400"
@animCreated="handleAnimation"
/>
</template>
<script>
import Lottie from 'vue-lottie';
import animationData from '@/assets/animation.json';
export default {
components: {
lottie: Lottie
},
data() {
return {
defaultOptions: {
animationData: animationData,
autoplay: true,
loop: true
}
};
}
};
</script>Angular Implementation
// Install ngx-lottie
npm install ngx-lottie
// Module import
import { LottieModule } from 'ngx-lottie';
import player from 'lottie-web';
export function playerFactory() {
return player;
}
@NgModule({
imports: [
LottieModule.forRoot({ player: playerFactory })
]
})
// Component usage
<ng-lottie
[options]="options"
(animationCreated)="animationCreated($event)">
</ng-lottie>Advanced Controls
Animation Control Methods
// Control animation playback animation.play(); animation.pause(); animation.stop(); // Go to specific frame animation.goToAndStop(30, true); // Set playback speed animation.setSpeed(0.5); // Half speed // Play segments animation.playSegments([10, 50], true); // Reverse animation animation.setDirection(-1);
Performance Optimization
When implementing Lottie animations in production environments, performance optimization becomes crucial for maintaining smooth user experiences. Using `renderer: 'svg'` for scalable graphics provides better quality on high-DPI displays while maintaining crisp edges at any scale. To improve page load times and reduce unnecessary processing, implementing intersection observer for lazy loading ensures animations only load and play when they enter the viewport, significantly reducing initial page load resource consumption.
Memory management is equally important - properly destroying animations when components unmount prevents memory leaks that could degrade application performance over time. Setting `preloadImages: false` for faster initial load allows your application to prioritize critical rendering paths before loading animation assets, improving perceived performance. For particularly complex or CPU-intensive animations, consider using Web Workers to offload processing from the main thread, keeping your UI responsive even during complex animation sequences.
Responsive Design
// Responsive Lottie animation
.lottie-container {
width: 100%;
height: auto;
max-width: 500px;
}
// JavaScript resize handler
window.addEventListener('resize', () => {
animation.resize();
});