😘👌 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
Смотрите видео 😘👌 Animations with Lottie & SvelteKit онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Johnny Magrippis 13 Октябрь 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 3,941 раз и оно понравилось 153 людям.