Motion for Svelte 5

This project is an experimental attempt to wrap Framer Motion (now known as motion.dev) with Svelte. The current implementation supports Server-Side Rendering (SSR) and utilizes runes for enhanced functionality.

Installation

To install the package, run the following command:

npm i motion-svelte

Usage Examples

Basic Animation with Enter/Exit

<Motion
    initial={{ opacity: 0, rotate: -30 }}
    animate={{ opacity: 1, rotate: 0 }}
    exit={{ opacity: 0, rotate: 30 }}
    transition={{ duration: 0.5 }}
>
    This is a notification!
</Motion>

Infinite Animation

<Motion animate={{ scale: [1, 1.2, 1] }} transition={{ duration: 2, repeat: Infinity }}>
    Pulse
</Motion>

Animation on State Change

<Motion
    animate={{ rotate: spin ? 360 : 0 }}
    transition={{ duration: 1 }}
    onclick={() => (spin = !spin)}
>
    Click to Spin
</Motion>

Hover Animation

<Motion initial={{ y: 0 }} whileHover={{ y: -10 }}>Hover Card</Motion>

Using Animate Directive

<div
    use:animate={{
        scale: hover ? 1.2 : 1,
        rotate: hover ? 45 : 0,
        transition: { type: 'spring' }
    }}
>
    Hover Transform
</div>

Keyframe Animation

<Motion
    animate={{
        rotate: [0, 45, 0],
        scale: [1, 0.8, 1]
    }}
    transition={{
        duration: 2,
        repeat: Infinity,
        ease: 'easeInOut'
    }}
>
    Keyframes
</Motion>