@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
132 lines (105 loc) • 4.88 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?
Just a little wrapper for motion. I love their work! The typical this is a WIP, if you have issues please give me a react example working so that I can work to ensure its running properly 😍
## Supported Elements
### Regular Elements
- `motion.a`
- `motion.article`
- `motion.aside`
- `motion.blockquote`
- `motion.button`
- `motion.code`
- `motion.dd`
- `motion.div`
- `motion.dl`
- `motion.dt`
- `motion.fieldset`
- `motion.figcaption`
- `motion.figure`
- `motion.footer`
- `motion.form`
- `motion.h1`
- `motion.h2`
- `motion.h3`
- `motion.h4`
- `motion.h5`
- `motion.h6`
- `motion.header`
- `motion.label`
- `motion.legend`
- `motion.li`
- `motion.main`
- `motion.nav`
- `motion.ol`
- `motion.option`
- `motion.p`
- `motion.pre`
- `motion.section`
- `motion.select`
- `motion.span`
- `motion.table`
- `motion.tbody`
- `motion.td`
- `motion.textarea`
- `motion.tfoot`
- `motion.th`
- `motion.thead`
- `motion.tr`
- `motion.ul`
### Void Elements
- `motion.area`
- `motion.base`
- `motion.br`
- `motion.col`
- `motion.embed`
- `motion.hr`
- `motion.img`
- `motion.input`
- `motion.param`
- `motion.source`
- `motion.track`
- `motion.wbr`
## 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>
```
#### Current Limitations
Some Motion features are not yet implemented:
- `reducedMotion` settings
- `features` configuration
- Performance optimizations like `transformPagePoint`
- Advanced transition controls
We're actively working on adding these features. Check our GitHub issues for progress updates or to contribute.
## 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 | REPL |
| -------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
| [React - Enter Animation](https://examples.motion.dev/react/enter-animation) | [View Example](https://svelte.dev/playground/7f60c347729f4ea48b1a4590c9dedc02?version=5.20.2) |
| [Random - Shiny Button](https://www.youtube.com/watch?v=jcpLprT5F0I) by [@verse\_](https://x.com/verse_) | [View Example](https://svelte.dev/playground/96f9e0bf624f4396adaf06c519147450?version=5.20.2) |
## License
MIT © [Humanspeak, Inc.](LICENSE)
## Credits
Made with ♥ by [Humanspeak](https://humanspeak.com)