Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tanvesh01/motion-signals
A wrapper over Motion One, An animation library, built on the Web Animations API for the smallest filesize and the fastest performance. Works with solid-js
https://github.com/tanvesh01/motion-signals
animations esm motion solidjs
Last synced: 14 days ago
JSON representation
A wrapper over Motion One, An animation library, built on the Web Animations API for the smallest filesize and the fastest performance. Works with solid-js
- Host: GitHub
- URL: https://github.com/tanvesh01/motion-signals
- Owner: tanvesh01
- License: mit
- Created: 2022-02-08T10:54:52.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-12-15T02:46:14.000Z (11 months ago)
- Last Synced: 2024-10-26T11:26:31.689Z (25 days ago)
- Topics: animations, esm, motion, solidjs
- Language: TypeScript
- Homepage: https://motion-signals.netlify.app/
- Size: 1.18 MB
- Stars: 63
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# motion-signals
A wrapper over [Motion One](https://motion.dev/), An animation library, built on the Web Animations API for the smallest filesize and the fastest performance. Works with [solid-js](https://www.solidjs.com/)
[](https://www.npmjs.com/package/motion-signals)  [](https://twitter.com/Sarve___tanvesh)
[Demo examples at netify](https://motion-signals.netlify.app/)
## Installation
```
npm install motion-signals motion
```
## Functions
As of now, motion-signals has 2 Functions that wrap around `animate` and `timeline` of motion one respectively
- [`createAnimation`](https://github.com/tanvesh01/motion-signals#createAnimation)
- [`createTimeline`](https://github.com/tanvesh01/motion-signals#createTimeline)
## Example usage
**Things You could do with [`createAnimation`](https://github.com/tanvesh01/motion-signals#createanimation)**
**Things You could do with [`createTimeline`](https://github.com/tanvesh01/motion-signals#createtimeline)**
### `createAnimation`
Returns all the properties returned by [`animate`](https://motion.dev/dom/animate) and some helper functions and state
> Props returned my [`animate`](https://motion.dev/dom/animate) are `null` initially
```jsx
function App() {
const { play, getIsFinished, replay } = createAnimation(
'.listItem',
{ y: -20, opacity: 1 },
{
delay: stagger(0.3),
duration: 0.5,
easing: [0.22, 0.03, 0.26, 1],
},
);
// Play the animation on mount of the component
onMount(() => {
play();
});
return (
// Replay the animation anytime by calling a function, anywhere
replay()}>
Replay
- Item 1
- Item 2
- Item 3
);
}
```
Instead of passing strings to select elements, you can also pass a `ref` :point_down:
```jsx
let boxRef;
const { play, getIsFinished, replay } = createAnimation(
() => boxRef, // Pass a Function that returns the ref
{ y: -20, scale: 1.2 },
{ duration: 1 },
);
return
BOX;
```
**API**
```js
const { play, replay, reset, getIsFinished, getAnimateInstance } = createAnimation(
selector,
keyframes,
options,
events,
);
```
`createAnimation` returns:
- `play`: plays the animation
- `replay`: Resets and plays the animation
- `reset`: resets the element to its original styling
- `getIsFinished`: is `true` when animation has finished playing
- `getAnimateInstance`: Animation Controls. Refer to [motion one docs](https://motion.dev/dom/controls) for more.
`createAnimation` accepts:
- `selector` - The target element, can be string or a ref
- `keyframes` - Element will animate from its current style to those defined in the keyframe. Refer to [motion's docs](https://motion.dev/dom/animate#keyframes) for more.
- `options` - Optional parameter. Refer to [motion doc's](https://motion.dev/dom/animate#options) for the values you could pass to this.
- `events` - Pass functions of whatever you want to happen when a event like `onFinish` happens.
**`events` usage example**
```jsx
const { play, getIsFinished, replay } = createAnimation(
'.listItem',
{ y: -20, opacity: 1 },
{
delay: stagger(0.3),
duration: 0.5,
},
{
onFinish: () => {
// Whatever you want to do when animation finishes
},
},
);
```
### `createTimeline`
Create complex sequences of animations across multiple elements.
returns `getTimelineInstance` (Animation Controls) that are returned by [`timeline`](https://motion.dev/dom/timeline) and some helper functions and state
> Props returned by [`timeline`](https://motion.dev/dom/timeline) are `null` initially
```jsx
function App() {
let gifRef;
const { play, getIsFinished, replay } = createTimeline(
[
// You can use Refs too!
[() => gifRef, { scale: [0, 1.2], opacity: 1 }],
['.heading', { y: [50, 0], opacity: [0, 1] }],
['.container p', { opacity: 1 }],
],
{ duration: 2 },
);
onMount(() => {
play();
});
return (
replay()}>
Replay
Tanvesh
@sarve__tanvesh
);
}
```
**API**
```js
const { play, replay, reset, getIsFinished, getTimelineInstance } = createTimeline(
sequence,
options,
events,
);
```
`createTimeline` returns:
- `play`: plays the animation
- `replay`: Resets and plays the animation
- `reset`: resets the element to its original styling
- `getIsFinished`: is `true` when animation has finished playing
- `getTimelineInstance`: Animation Controls. Refer to [motion one docs](https://motion.dev/dom/controls) for more.
`createTimeline` accepts:
- `sequence` - `sequence` is an array, defines animations with the same settings as the animate function. In the arrays, Element can be either a string or a ref. You can refer to [sequence docs](https://motion.dev/dom/timeline#sequence) for more on this.
- `options` - Optional parameter. Refer to [motion doc's](https://motion.dev/dom/animate#options) for the values you could pass to this.
- `events` - Pass functions of whatever you want to happen when a event like `onFinish` happens. Exactly same as createAnimation's `onFinish`.
---
## Local Installation & Contributing
- Fork [motion-signals](https://github.com/tanvesh01/motion-signals)
```sh
git clone https://github.com/:github-username/motion-signals.git
cd motion-signals
npm install # Installs dependencies for motion-signals
cd examples # React app to test out changes
npm install # Installs dependencies for example app
npm run dev # To run example on localhost:3000
```
The contributing guidelines along with local setup guide is mentioned in [CONTRIBUTING.md](https://github.com/tanvesh01/motion-signals/blob/main/CONTRIBUTING.md)
Any Type of feedback is more than welcome! This project is in very early stage and would love to have contributors of any skill/exp level.
You can contact me on my [Twitter handle @Sarve\_\_\_tanvesh](https://twitter.com/Sarve___tanvesh)