Home/Courses/Svelte/Motion & Transitions

Motion & Transitions🎭

Intermediate→Advanced

Svelte 5

Bring your Svelte 5 apps to life with fluid animations. Master the built-in transition system, physics-based motion stores, and advanced animation patterns.

5

Sections

14

Lessons

16

Challenges

Start this free course

Start learning Motion & Transitions

14 lessons and 16 challenges, all 100% free.

Start this course

The transition: Directive

Easing Functions

Transition Events

Customize Fly Direction(Sign in required)

Beginner+10 Mana

Choose the Right Easing(Sign in required)

Intermediate+15 Mana

When Element Finishes Entering(Sign in required)

Beginner+10 Mana

Using in: and out: Directives

Local vs Global Transitions

Transition Ordering

Combining in: and out:(Sign in required)

Beginner+10 Mana

Local Modifier(Sign in required)

Intermediate+15 Mana

Key Block(Sign in required)

Intermediate+15 Mana

Physics-Based Spring Animation

Combining Motion with Runes

Update Spring Target(Sign in required)

Intermediate+15 Mana

Make Spring Bouncy(Sign in required)

Intermediate+15 Mana

Read Animated Value(Sign in required)

Beginner+10 Mana

The animate: Directive

Building a Sortable List

Flip Requirement(Sign in required)

Intermediate+15 Mana

Flip Import(Sign in required)

Beginner+10 Mana

Combine Animate and Transition(Sign in required)

Intermediate+15 Mana

Crossfade: Teleporting Elements

Creating Custom Transitions

CSS Keyframe Animations

Crossfade Setup(Sign in required)

Intermediate+15 Mana

Custom Transition Return(Sign in required)

Advanced+15 Mana

Understanding t Parameter(Sign in required)

Advanced+15 Mana

Replay CSS Animation(Sign in required)

Intermediate+15 Mana

Ready to start this free course?

No credit card required.

Start this course now

Ready to start Motion & Transitions?

14 interactive lessons and 16 hands-on challenges — learn in VS Code, Cursor, or the web.