@humanspeak/svelte-motion

Why are we here?

Motion vibes, Svelte runes. This brings Motion’s declarative animation goodness to Svelte with motion.<tag> components, interaction props, and composable config. If you spot a cool React example, drop it in an issue—we’ll port it. 😍

Requests welcome: Have a feature/prop/example you want? Please open an issue (ideally include a working Motion/React snippet or example link) and we’ll prioritize it.

Supported Elements

All standard HTML elements are supported as motion components (e.g., motion.div, motion.button). See the full set in src/lib/html/.

Configuration

MotionConfig

This package includes support for MotionConfig, which allows you to set default motion settings for all child components. See the Reach - Motion Config for more details.

<MotionConfig transition={{ duration: 0.5 }}>
    <!-- All motion components inside will inherit these settings -->
    <motion.div animate={{ scale: 1.2 }}>Inherits 0.5s duration</motion.div>
</MotionConfig>

Layout Animations (FLIP)

Svelte Motion supports minimal layout animations via FLIP using the layout prop:

<motion.div layout transition={{ duration: 0.25 }} />

• layout: smoothly animates translation and scale between layout changes (size and position).
• layout="position": only animates translation (no scale).

Current Limitations

Some Motion features are not yet implemented:

• reducedMotion settings
• features configuration
• Performance optimizations like transformPagePoint
• Advanced transition controls
• Shared layout / layoutId (planned)

External Dependencies

This package carefully selects its dependencies to provide a robust and maintainable solution:

Core Dependencies

• motion
  • High-performance animation library for the web
  • Provides smooth, hardware-accelerated animations
  • Supports spring physics and custom easing
  • Used for creating fluid motion and transitions

Examples

License

MIT © Humanspeak, Inc.

Credits

Made with ❤️ by Humanspeak