Learn SVELTE-MOTION with Real Code Examples

# 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.

# 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.

# 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.

# 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.

# 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.

# 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.

# 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.

# 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.

# 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.

# 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.