https://github.com/alloc/preact-in-motion
Light, elegant animation plugin for Preact (powered by Motion.dev and WAAPI)
https://github.com/alloc/preact-in-motion
animation javascript motion preact typescript waapi
Last synced: 7 months ago
JSON representation
Light, elegant animation plugin for Preact (powered by Motion.dev and WAAPI)
- Host: GitHub
- URL: https://github.com/alloc/preact-in-motion
- Owner: alloc
- License: mit
- Created: 2025-07-11T23:07:42.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-07-12T20:51:07.000Z (7 months ago)
- Last Synced: 2025-07-12T20:52:09.451Z (7 months ago)
- Topics: animation, javascript, motion, preact, typescript, waapi
- Language: TypeScript
- Homepage:
- Size: 29.3 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# preact-in-motion
[](https://www.npmjs.com/package/preact-in-motion)
[](https://github.com/alloc/preact-in-motion/blob/main/LICENSE)
[](https://bundlejs.com/?q=preact-in-motion)
This package uses the [Preact Options API](https://preactjs.com/guide/v10/options/) to introduce an `animate` prop to every native element (e.g. `
`, ``, ``, etc.). It uses the `motion/mini` package to animate the elements. To understand which features of Motion are supported, see [this comparison table](https://motion.dev/docs/feature-comparison#comparison-table).
[](https://stackblitz.com/edit/vitejs-vite-4pdjtwqz?file=src%2Fapp.tsx)
## Installation
Choose your package manager, then install this package and the `motion` package.
- **PNPM**
```
pnpm add preact-in-motion motion
```
- **Bun**
```
bun add preact-in-motion motion
```
- **Yarn**
```
yarn add preact-in-motion motion
```
- **NPM**
```
npm install preact-in-motion motion
```
## Usage
Always import the package, so it can install itself into Preact at runtime.
```ts
import 'preact-in-motion'
```
Now you can define the `animate` prop on any **host element** (e.g. `
`, ``, ``, including SVG elements).
```tsx
// Animate the opacity when a boolean changes on rerender.
```
When the element's parent component is re-rendered, the keyframes will be diffed. If any keyframes are different, a new animation will be scheduled.
Animation options (e.g. `duration`, `ease`, etc) may be defined next to the keyframes. [See the Motion docs for details.](https://motion.dev/docs/animate#options)
```tsx
import { easeInOut } from 'motion'
```
### Property-specific options
You may set a `transition` function to customize the animation options for each style property.
```tsx
({
duration: prop === 'opacity' ? 1 : 0.2,
}),
}}>
```
Alternatively, the `transition` prop can be set to an object, with property-specific options.
```tsx
// Identical to the previous example.
```
### Lifecycle animations
The following event-driven animations are supported:
- `initial`
Style values to be applied before mounting.
- `update`
Animate when this element is re-rendered.
- `enter`
Animate when this element is added to the DOM.
- `leave`
Animate before this element is removed from the DOM. (must use ``)
- `whileHover`
Animate when this element is hovered on.
- `whileFocus`
Animate when this element is focused.
- `whilePress`
Animate when this element is pressed on.
```tsx
```
### AnimatePresence
To animate an element before unmounting it, you must wrap the element or its parent component with an `` element.
```tsx
{visible && (
Fade Into Obscurity
)}
```
If toggling between 2+ elements, you must set a `key` prop on each element.
Additionally, you may use the `enterDelay` prop on `AnimatePresence` to force “enter animations” to wait. This delay is only applied when a “leave animation” is in progress, making it useful for smooth transitions between elements.
```tsx
{isHappy ? (
😄 I'm happy!
) : (
😢 I'm sad...
)}
```
You may set `reverse: true` on the `leave` prop to copy keyframes from the `initial` prop.
### Easing
Easing functions are provided by the `motion` package.
- **Spring animations** ([docs](https://motion.dev/docs/spring))
```tsx
import { spring } from 'motion'
```
- **Easing functions** ([docs](https://motion.dev/docs/easing-functions))
The `ease` prop accepts a function, pre-defined string, or a cubic bezier array (e.g. `[0.25, 0.1, 0.25, 1]`).
```tsx
import { easeInOut } from 'motion'
```
These easing functions can be imported from `motion`:
- `cubicBezier`
- `easeIn` / `easeOut` / `easeInOut`
- `backIn` / `backOut` / `backInOut`
- `circIn` / `circOut` / `circInOut`
- `anticipate`
- `steps`
## License
MIT