Animations with Lottie and Svelte 5 / SvelteKit 💫 (featuring PocketBase) 🎥 LIVE Coding & Chill 🔴
Let’s add extra flair to our Travel Blog App, by bringing in fancy animations we, or our designer, can create in After Effects, and render on the web with Lottie!
Svelte is great with animations, CSS is in a great place nowadays, and there’s a lot of tools that can make both “native CSS” and “enhanced with javascript” amazing animations, but the ease and flair of an After Effects animation is hard to match!
A couple of years ago I talked about all of this in my relatively short video, ”**😘👌 Animations with Lottie & SvelteKit’:**
👀 • 😘👌 Animations with Lottie & SvelteKit
Let’s see what’s changed, and how we can work with Svelte 5 😄
🚀 Click around the production app: https://travel-pocket.vercel.app/
💻 See the code (private repo 😱): https://github.com/johnnify & https://github.com/johnnify/travel-po...
If you’re a beginner, you may enjoy my Portfolio "Paulina Puppers" Fullstack SvelteKit series, and end up with the same or an equivalent project: • Brand new Fullstack App with Svelte 5! Run...
— JOHNNIFY PREMIUM —
Get this repository AND MORE with Johnnify Premium: https://johnnify.com/premium
— 🙌🙌🙌 —
— COMMUNITY —
Our DISCORD SERVER 👾: / discord
— 🥳🥳🥳 —
— Agenda —
✅ What are we doing today? Animations 🤩 with Lottie?! https://airbnb.io/lottie
✅ What about my objectively great video?! • 😘👌 Animations with Lottie & SvelteKit
✅ Bringing in `lottie-web`… and what’s bodymovin?! https://github.com/airbnb/lottie-web
✅ Binding our container and rendering our single, looping, animation!
✅ Downloading an animation from LottieFiles: https://lottiefiles.com/
✅ Loading our animation on every travel card!
✅ Rendering on the correct frame according to whether a travel has been “hearted” or not!
✅ Playing on animation on click!
✅ Reversing the animation as needed!
✅ ULTIMATE LIVE 🥳 DEMO!
✅ Alternatives? What about lottie-light? CSS animations? Motion One? Rive?
— HAVE FUN —
No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄
— Highlighted software —
Lottie: https://airbnb.io/lottie
SvelteKit: https://kit.svelte.dev/
LottieFiles: https://lottiefiles.com/
PocketBase: https://pocketbase.io/
Tailwind: https://tailwindcss.com/
My own website: https://magrippis.com/
Search for `@jmagrippis` to find me on socials like Instagram & Twitter! And remember our DISCORD SERVER 😉: / discord
Between the comment section and the socials, let me know *somewhere* what you’d like me to cover next 🙌
Stream number 127!
—
TIMESTAMPS
—
00:00 - What are we doing today? Animations 🤩 with Lottie?!
4:23 - What about my objectively great video?!
11:56 - Quick refactor with the Svelte Inspector!
14:18 - Bringing in `lottie-web`… and what’s bodymovin?!
20:20 - Binding our container and rendering our single, looping, animation!
46:07 - PocketBase client-side client overview
53:55 - Downloading an animation from LottieFiles
1:02:03 - Loading our animation on every travel card!
1:11:35 - Make references to our bound elements reactive with `$state`
1:14:29 - Rendering on the correct frame according to whether a travel has been “hearted” or not!
1:25:22 - Playing on animation on click!
1:34:18 - Reversing the animation as needed!
1:47:48 - Apply the fade-in only after the animation is loaded!
1:51:34 - ULTIMATE LIVE 🥳 DEMO!