😘👌 Animations with Lottie & SvelteKit
Let’s add CINEMATIC FLAIR to our animations, by bringing LOTTIE in our SvelteKit app!
Watch this video if you’ve ever wondered how Airbnb delivers its delightful, cross-device, animations… OR if you’ve wanted to deliver some user delight with a subtle, or not so subtle, flourish… OR if you just want to see us have some frontend fun 🚀
If you’re curious about Svelte & SvelteKit as well, we run into a great use-case for `bind:this`, with SvelteKit Form Actions also featuring!
See the deployed app: https://techy.cat/
See the code: https://github.com/jmagrippis/techy-cat
Highlighted software:
Lottie: https://airbnb.design/lottie/
LottieFiles: https://lottiefiles.com/
SvelteKit: https://kit.svelte.dev/
No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄
— COMMUNITY —
I've just started a DISCORD SERVER for us 😱: / discord
— 🥳🥳🥳 —
My own website: https://magrippis.com/
Search for `@jmagrippis` to find me on socials like Instagram and Twitter!
Between the comment section, the socials, the Discord… let me know somewhere what you’d like me to cover next 🙌
🎶 “The Swindler” by The Original Orchestra, “Chad Tuthill” from Still Barkin, “David Gives” by Views from Palermo & “Core Alchemist” by Fryderyk HD for the background music 🎶
--
TIMESTAMPS
--
0:00 - Spark joy with 😘👌 animations
0:23 - What is Lottie? After Effects to Web???
1:48 - LottieFiles, `lottie-web` and `loadAnimation`
3:06 - Binding our animation container
4:24 - Passing the animation data
5:53 - LOOPING 🥳 ANIMATION 🥳 DEMO
6:19 - Core web vitals & Cumulative Layout Shift concerns
7:28 - Star / unstar functionality breakdown with SvelteKit Form Actions
8:38 - Downloading a customised `starring` animation
9:13 - Stopping our `starring` animation for our `unstarred` state!
10:29 - Render on the `starred` position, using `goToAndStop` & `totalFrames`
12:25 - Playing our `starring` animation on click ★
14:01 - Reversing the animation to ☆ unstar
15:13 - Error handling 🔴 reversing Optimistic Updates
15:53 - USER-TRIGGERED 🥳 ANIMATION 🥳 DEMO
16:05 - Check out techy.cat for the latest code & more demos!
16:45 - YouTube Partner after 🤯 HOW MANY YEARS?!
17:07 - Lottie Light, next steps + Like & SUBSCRIBE
Watch video 😘👌 Animations with Lottie & SvelteKit online without registration, duration hours minute second in high quality. This video was added by user Johnny Magrippis 13 October 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 3,941 once and liked it 153 people.