Create Magical User Interfaces Using Animation With Svelte

Learn how to create amazing user interfaces with Svelte.

👉️ Support:

YouTube Membership

Patreon

👉️ Links:

Animation With Svelte

👉️ List of what I use:

👉️ Socials:

🔖 Timestamps

00:00 Introduction
02:08 Transitions
08:50 Local Transitions
10:15 Key Blocks
11:43 Page Transitions
14:05 Custom Transitions
24:06 Deferred Transitions
28:44 Animate
31:37 Motion
38:56 Using Other Animation Libraries
48:45 Accessibility
50:37 Outro

#svelte #sveltekit #animation #joyofcode

[pixelriegel]

Man I have been looking like crazy for some good sveltekit animation tutorials. And this is an outstanding job. Maybe youy should ask Harris if you can put your post as a Documantation in the svelte docs or the tutorial section.

[RokoCB]

Matija, superb content as always. Can't wait for Svelte (/Kit) mature, and your channel and website become the (if not already) go-to resource!
Amazing, interesting examples, teaching pace, keep it up!

[marlonmarcello]

AWESOME video Matia, this is really in-depth and so so helpful.

[lahcencodery]

Outstanding right? keep it up .. amazing content as always

[WyzrdCat]

Yooo 228 likes? C'mon people, this content deserves more eyeballs!!

[aislanarislou]

I thought you would go to mention about svelte-motion.
It is a great lib that deserves to be showed as well.

[TheRishikesh]

Are svelte animations seo friendly? I am assuming the animations are applied via css?

[PeterFelis]

haha, 'the leader of our church', how true this is ;-)

[anthonyprime]

I still didn't understand what does the t and u mean when creating custom transitions...

[saidnahum]

Good job my friend, I really appreciate your tutorials, one question, how Can i apply transitions depending on view or scrolling like framer motion? I've tried binding scrollY and onMount but i think is some complex. Greetings from Mexico. Excelent job.

[Ricardoromero]

With page transitions, Is there any way to have the new page slide in simultaneous to the old page without weird layout shift? It would feel way snappier if they moved simultaneously

[Rowan]

This was very useful, but TBH you lost me when getting into "spring". Seems extremely complicated compared to the rest, which I'm already reasonably confident using. Also felt really confused by the GSAP implementation, not sure why requestAnimationFrame is needed - won't that be reapplying transition effects every few milliseconds? I'll try to rewatch later to see if it makes more sense.

[paterfamilias]

Can you make firebase tuts in the future?