Learn Svelte-motion - 10 Code Examples & CST Typing Practice Test

Svelte-Motion is a lightweight, physics-based animation library for Svelte that provides spring-driven transitions, gesture integration, and declarative motion components. It brings natural and fluid animations to Svelte apps using springs instead of fixed-duration tweens.

View all 10 Svelte-motion code examples →

Simple Svelte Motion Animation Slide In From Left Slide In From Right Slide In From Top Slide In From Bottom Rotate In Animation Scale Up With Fade Bounce Animation Opacity Pulse Diagonal Slide With Scale

Learn SVELTE-MOTION with Real Code Examples

Updated Nov 26, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Simple Svelte Motion Animation

# svelte_motion/demo/App.svelte
<script>
    import { motion } from 'svelte-motion'
</script>

<motion.div
    initial={{ opacity: 0, scale: 0.5 }}
    animate={{ opacity: 1, scale: 1 }}
    style="width:100px; height:100px; background:blue;"
/>

A basic Svelte Motion example animating a div element scaling up and fading in on mount.

Let’s Try →

Slide In From Left

# svelte_motion/demo/SlideLeft.svelte
<script>
    import { motion } from 'svelte-motion'
</script>

<motion.div
    initial={{ x: -200, opacity: 0 }}
    animate={{ x: 0, opacity: 1 }}
    style="width:100px; height:100px; background:red;"
/>

Animates a div sliding in from the left.

Let’s Try →

Slide In From Right

# svelte_motion/demo/SlideRight.svelte
<script>
    import { motion } from 'svelte-motion'
</script>

<motion.div
    initial={{ x: 200, opacity: 0 }}
    animate={{ x: 0, opacity: 1 }}
    style="width:100px; height:100px; background:green;"
/>

Animates a div sliding in from the right.

Let’s Try →

Slide In From Top

# svelte_motion/demo/SlideTop.svelte
<script>
    import { motion } from 'svelte-motion'
</script>

<motion.div
    initial={{ y: -200, opacity: 0 }}
    animate={{ y: 0, opacity: 1 }}
    style="width:100px; height:100px; background:purple;"
/>

Animates a div sliding down from the top.

Let’s Try →

Slide In From Bottom

# svelte_motion/demo/SlideBottom.svelte
<script>
    import { motion } from 'svelte-motion'
</script>

<motion.div
    initial={{ y: 200, opacity: 0 }}
    animate={{ y: 0, opacity: 1 }}
    style="width:100px; height:100px; background:orange;"
/>

Animates a div sliding up from the bottom.

Let’s Try →

Rotate In Animation

# svelte_motion/demo/RotateIn.svelte
<script>
    import { motion } from 'svelte-motion'
</script>

<motion.div
    initial={{ rotate: -180, opacity: 0 }}
    animate={{ rotate: 0, opacity: 1 }}
    style="width:100px; height:100px; background:cyan;"
/>

Rotates a div while fading in.

Let’s Try →

Scale Up With Fade

# svelte_motion/demo/ScaleFade.svelte
<script>
    import { motion } from 'svelte-motion'
</script>

<motion.div
    initial={{ scale: 0.5, opacity: 0 }}
    animate={{ scale: 1, opacity: 1 }}
    style="width:100px; height:100px; background:magenta;"
/>

Div scales up from 0.5 to 1 with fade in.

Let’s Try →

Bounce Animation

# svelte_motion/demo/Bounce.svelte
<script>
    import { motion } from 'svelte-motion'
</script>

<motion.div
    initial={{ y: -100 }}
    animate={{ y: 0 }}
    transition={{ type: 'spring', stiffness: 150, damping: 10 }}
    style="width:100px; height:100px; background:yellow;"
/>

Div bounces vertically on mount.

Let’s Try →

Opacity Pulse

# svelte_motion/demo/OpacityPulse.svelte
<script>
    import { motion } from 'svelte-motion'
</script>

<motion.div
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    transition={{ repeat: Infinity, repeatType: 'mirror', duration: 1 }}
    style="width:100px; height:100px; background:pink;"
/>

Div pulses in opacity using a spring loop.

Let’s Try →

Diagonal Slide With Scale

# svelte_motion/demo/DiagonalScale.svelte
<script>
    import { motion } from 'svelte-motion'
</script>

<motion.div
    initial={{ x: -100, y: -100, scale: 0.5 }}
    animate={{ x: 0, y: 0, scale: 1 }}
    style="width:100px; height:100px; background:lime;"
/>

Moves a div diagonally while scaling it up.

Let’s Try →

Frequently Asked Questions about Svelte-motion

What is Svelte-motion?

What are the primary use cases for Svelte-motion?

Animate component entry/exit. Smooth element transitions using spring dynamics. Dragging, gestures, and physics-based interactivity. Animating sequences, lists, and layout changes. Interactive hover or press effects

What are the strengths of Svelte-motion?

Extremely lightweight (Svelte-optimized). Very intuitive reactive API. Natural motion thanks to spring physics. Gesture support built-in. Excellent performance because of Svelte’s DOM compiler

What are the limitations of Svelte-motion?

Smaller ecosystem compared to React motion libraries. Fewer advanced timeline tools than GSAP. Limited documentation compared to Framer Motion. Primarily DOM-oriented (not ideal for 3D/Canvas). No built-in stagger utilities (manual implementation required)

How can I practice Svelte-motion typing speed?

CodeSpeedTest offers 10+ real Svelte-motion code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Learn Svelte-motion - 10 Code Examples & CST Typing Practice Test

Code Sample Descriptions

Simple Svelte Motion Animation

# svelte_motion/demo/App.svelte
<script>
    import { motion } from 'svelte-motion'
</script>

<motion.div
    initial={{ opacity: 0, scale: 0.5 }}
    animate={{ opacity: 1, scale: 1 }}
    style="width:100px; height:100px; background:blue;"
/>

A basic Svelte Motion example animating a div element scaling up and fading in on mount.

Let’s Try →

Slide In From Left

# svelte_motion/demo/SlideLeft.svelte
<script>
    import { motion } from 'svelte-motion'
</script>

<motion.div
    initial={{ x: -200, opacity: 0 }}
    animate={{ x: 0, opacity: 1 }}
    style="width:100px; height:100px; background:red;"
/>

Animates a div sliding in from the left.

Let’s Try →

Slide In From Right

# svelte_motion/demo/SlideRight.svelte
<script>
    import { motion } from 'svelte-motion'
</script>

<motion.div
    initial={{ x: 200, opacity: 0 }}
    animate={{ x: 0, opacity: 1 }}
    style="width:100px; height:100px; background:green;"
/>

Animates a div sliding in from the right.

Let’s Try →

Slide In From Top

# svelte_motion/demo/SlideTop.svelte
<script>
    import { motion } from 'svelte-motion'
</script>

<motion.div
    initial={{ y: -200, opacity: 0 }}
    animate={{ y: 0, opacity: 1 }}
    style="width:100px; height:100px; background:purple;"
/>

Animates a div sliding down from the top.

Let’s Try →

Slide In From Bottom

# svelte_motion/demo/SlideBottom.svelte
<script>
    import { motion } from 'svelte-motion'
</script>

<motion.div
    initial={{ y: 200, opacity: 0 }}
    animate={{ y: 0, opacity: 1 }}
    style="width:100px; height:100px; background:orange;"
/>

Animates a div sliding up from the bottom.

Let’s Try →

Rotate In Animation

# svelte_motion/demo/RotateIn.svelte
<script>
    import { motion } from 'svelte-motion'
</script>

<motion.div
    initial={{ rotate: -180, opacity: 0 }}
    animate={{ rotate: 0, opacity: 1 }}
    style="width:100px; height:100px; background:cyan;"
/>

Rotates a div while fading in.

Let’s Try →

Scale Up With Fade

# svelte_motion/demo/ScaleFade.svelte
<script>
    import { motion } from 'svelte-motion'
</script>

<motion.div
    initial={{ scale: 0.5, opacity: 0 }}
    animate={{ scale: 1, opacity: 1 }}
    style="width:100px; height:100px; background:magenta;"
/>

Div scales up from 0.5 to 1 with fade in.

Let’s Try →

Bounce Animation

# svelte_motion/demo/Bounce.svelte
<script>
    import { motion } from 'svelte-motion'
</script>

<motion.div
    initial={{ y: -100 }}
    animate={{ y: 0 }}
    transition={{ type: 'spring', stiffness: 150, damping: 10 }}
    style="width:100px; height:100px; background:yellow;"
/>

Div bounces vertically on mount.

Let’s Try →

Opacity Pulse

# svelte_motion/demo/OpacityPulse.svelte
<script>
    import { motion } from 'svelte-motion'
</script>

<motion.div
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    transition={{ repeat: Infinity, repeatType: 'mirror', duration: 1 }}
    style="width:100px; height:100px; background:pink;"
/>

Div pulses in opacity using a spring loop.

Let’s Try →

Diagonal Slide With Scale

# svelte_motion/demo/DiagonalScale.svelte
<script>
    import { motion } from 'svelte-motion'
</script>

<motion.div
    initial={{ x: -100, y: -100, scale: 0.5 }}
    animate={{ x: 0, y: 0, scale: 1 }}
    style="width:100px; height:100px; background:lime;"
/>

Moves a div diagonally while scaling it up.

Let’s Try →

Frequently Asked Questions about Svelte-motion

What is Svelte-motion?

What are the primary use cases for Svelte-motion?

What are the strengths of Svelte-motion?

Extremely lightweight (Svelte-optimized). Very intuitive reactive API. Natural motion thanks to spring physics. Gesture support built-in. Excellent performance because of Svelte’s DOM compiler

What are the limitations of Svelte-motion?

How can I practice Svelte-motion typing speed?

CodeSpeedTest offers 10+ real Svelte-motion code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.