Svelte Motion

inline keyframes.

Pass an object directly to whileHover / whileTap. Right for one-off interactions — the animation is co-located with the element that uses it.

Best for one-off interactions where the animation only applies to a single element and won't be reused.
Repeat the object on every element if you need the same animation in multiple places — that duplication is the smell that pushes you toward the variant-key form below.

↩ all examples

variant key.

Name the state on `variants`, reference it by string from any gesture prop. The same `"hovered"` key drives `whileHover`, and could just as easily drive `whileFocus`, `whileDrag`, or `whileInView`.

Define the state once on variants; any gesture prop on the same element (or its descendants) can pull from the same map by key.
Works with whileHover, whileTap, whileFocus, whileDrag, and whileInView. Pass a single string or an array of keys (later entries override earlier ones).

↩ all examples

variant-key

VariantKey.svelte

<script lang="ts">
    import { motion, styleString, type Variants } from '@humanspeak/svelte-motion'

    // The named states live once on the `variants` map and any number of
    // gesture props can pull from them by key. Same animation reused across
    // `whileHover`, `whileTap` (and `whileFocus` / `whileDrag` / `whileInView`).
    const cardVariants: Variants = {
        hovered: { scale: 1.06, boxShadow: '0 12px 24px -8px rgba(0,0,0,0.25)' },
        pressed: { scale: 0.96 }
    }
</script>

<motion.div
    variants={cardVariants}
    whileHover="hovered"
    whileTap="pressed"
    style={styleString(() => ({
        width: '200px',
        height: '120px',
        borderRadius: 16,
        padding: '1rem',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
        background: 'linear-gradient(135deg, #22c55e 0%, #06b6d4 100%)',
        color: '#fff',
        fontWeight: 600,
        fontSize: '0.95rem',
        cursor: 'pointer'
    }))}
>
    <span>hover or tap me</span>
    <small style="opacity: 0.75; font-weight: 400;">whileHover="hovered"</small>
</motion.div>

<script lang="ts">
    import { motion, styleString, type Variants } from '@humanspeak/svelte-motion'

    // The named states live once on the `variants` map and any number of
    // gesture props can pull from them by key. Same animation reused across
    // `whileHover`, `whileTap` (and `whileFocus` / `whileDrag` / `whileInView`).
    const cardVariants: Variants = {
        hovered: { scale: 1.06, boxShadow: '0 12px 24px -8px rgba(0,0,0,0.25)' },
        pressed: { scale: 0.96 }
    }
</script>

<motion.div
    variants={cardVariants}
    whileHover="hovered"
    whileTap="pressed"
    style={styleString(() => ({
        width: '200px',
        height: '120px',
        borderRadius: 16,
        padding: '1rem',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
        background: 'linear-gradient(135deg, #22c55e 0%, #06b6d4 100%)',
        color: '#fff',
        fontWeight: 600,
        fontSize: '0.95rem',
        cursor: 'pointer'
    }))}
>
    <span>hover or tap me</span>
    <small style="opacity: 0.75; font-weight: 400;">whileHover="hovered"</small>
</motion.div>