@humanspeak/svelte-motion
Version:
A lightweight animation library for Svelte 5 that provides smooth, hardware-accelerated animations. Features include spring physics, custom easing, and fluid transitions. Built on top of the motion library, it offers a simple API for creating complex anim
88 lines (60 loc) • 5.46 kB
Markdown
# @humanspeak/svelte-motion
[](https://www.npmjs.com/package/@humanspeak/svelte-motion)
[](https://github.com/humanspeak/svelte-motion/actions/workflows/npm-publish.yml)
[](https://coveralls.io/github/humanspeak/svelte-motion?branch=main)
[](https://github.com/humanspeak/svelte-motion/blob/main/LICENSE)
[](https://www.npmjs.com/package/@humanspeak/svelte-motion)
[](https://github.com/humanspeak/svelte-motion/actions/workflows/codeql.yml)
[](https://packagephobia.com/result?p=@humanspeak/svelte-motion)
[](https://trunk.io)
[](http://www.typescriptlang.org/)
[](https://www.npmjs.com/package/@humanspeak/svelte-motion)
[](https://github.com/humanspeak/svelte-motion/graphs/commit-activity)
## 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](https://motion.dev/docs/react-motion-config) for more details.
```svelte
<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:
```svelte
<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
| Motion | Demo / Route | REPL |
| -------------------------------------------------------------------------------------------------------- | --------------------------------- | ---------------------------------------------------------------------------------------------- |
| [React - Enter Animation](https://examples.motion.dev/react/enter-animation) | `/tests/motion/enter-animation` | [View Example](https://svelte.dev/playground/7f60c347729f4ea48b1a4590c9dedc02?version=5.38.10) |
| [HTML Content (0→100 counter)](https://examples.motion.dev/react/html-content) | `/tests/motion/html-content` | [View Example](https://svelte.dev/playground/31cd72df4a3242b4b4589501a25e774f?version=5.38.10) |
| [Aspect Ratio](https://examples.motion.dev/react/aspect-ratio) | `/tests/motion/aspect-ratio` | [View Example](https://svelte.dev/playground/1bf60e745fae44f5becb4c830fde9b6e?version=5.38.10) |
| [Random - Shiny Button](https://www.youtube.com/watch?v=jcpLprT5F0I) by [@verse\_](https://x.com/verse_) | `/tests/random/shiny-button` | [View Example](https://svelte.dev/playground/96f9e0bf624f4396adaf06c519147450?version=5.38.10) |
| [Fancy Like Button](https://github.com/DRlFTER/fancyLikeButton) | `/tests/random/fancy-like-button` | [View Example](https://svelte.dev/playground/c34b7e53d41c48b0ab1eaf21ca120c6e?version=5.38.10) |
## License
MIT © [Humanspeak, Inc.](LICENSE)
## Credits
Made with ❤️ by [Humanspeak](https://humanspeak.com)