Ever animated something cool in Figma or Adobe After Effects? It's possible to implement those animations in a friendly web format with Lottie.
Creating Animations
You can create Lottie Animations in Figma by installing the LottieFiles Figma Plugin, then export your Flow.
Installing Lottie
npm install lottie-web
Adding Lottie
Lottie should only be initialised, after the DOM is mounted. In Svelte we can use this by using the $effect() (Svelte 5) or the onMount() function (Svelte 4), for the sake of this tutorial, I will create it in Svelte 4, but I will update it later to Svelte 5.
An example of a lottie animation that'll play when clicked (hamburger menu animation) and reverse, when clicked again
<script>
import lottie from 'lottie-web';
import { onMount } from 'svelte';
export let path;
export let loop = false;
export let autoplay = false;
export let speed = 1;
let animationContainer;
let animation;
let isForward = true;
onMount(() => {
animation = lottie.loadAnimation({
container: animationContainer,
renderer: 'svg',
loop: loop,
autoplay: autoplay,
path: path
});
animation.setSpeed(speed); // Set the initial speed
});
function toggleAnimation() {
if (isForward) {
animation.setDirection(1); // Play forward
} else {
animation.setDirection(-1); // Play in reverse
}
animation.play();
isForward = !isForward; // Toggle the direction
}
</script>
<button bind:this={animationContainer} class="lottie-container" on:click={toggleAnimation}></button>
