A wrapper over Motion One, An animation library, built on the Web Animations API for the smallest filesize and the fastest performance

Last update: Jul 31, 2022

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

npm version npm Twitter Follow

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

Example usage

Things You could do with useMotionAnimate

useMotionAnimate List Example

useMotionAnimate Counter Example

Things You could do with useMotionTimeline

useMotionTimeline Example Usage

useMotionAnimate

Returns all the properties returned by animate and some helper functions and state

Props returned my animate are null initially

  • Item 1
  • Item 2
  • Item 3
); }">
function App() {
    const { play, isFinished, replay } = useMotionAnimate(
        '.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
    useEffect(() => {
        play();
    }, []);

    return (
        // Replay the animation anytime by calling a function, anywhere
        <div class="App">
            <button disabled={!isFinished} onClick={() => replay()}>
                Replay
            </button>

            <ul class="list">
                <li class="listItem">Item 1</li>
                <li class="listItem">Item 2</li>
                <li class="listItem">Item 3</li>
            </ul>
        </div>
    );
}

Instead of passing strings to select elements, you can also pass a ref 👇

let boxRef;
const { play, isFinished, replay } = useMotionAnimate(
    () => boxRef, // Pass Function that returns the ref
    { y: -20, scale: 1.2 },
    { duration: 1 },
);

return <div ref={boxRef}>BOX</div>;

API

const { play, replay, reset, isFinished, animateInstance } = useMotionAnimate(
    selector,
    keyframes,
    options,
    events,
);

useMotionAnimate returns:

  • play: plays the animation
  • replay: Resets and plays the animation
  • reset: resets the element to its original styling
  • isFinished: is true when animation has finished playing
  • animateInstance: Animation Controls. Refer to motion one docs for more.

useMotionAnimate 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 for more.

  • options - Optional parameter. Refer to motion doc's 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

    const { play, isFinished, replay } = useMotionAnimate(
        '.listItem',
        { y: -20, opacity: 1 },
        {
            delay: stagger(0.3),
            duration: 0.5,
        },
        {
            onFinish: () => {
                // Whatever you want to do when animation finishes
            },
        },
    );

useMotionTimeline

Create complex sequences of animations across multiple elements.

returns timelineInstance (Animation Controls) that are returned by timeline and some helper functions and state

Props returned by timeline are null initially

mind explosion gif

Tanvesh

@sarve__tanvesh

); }">
function App() {
    let gifRef;
    const { play, isFinished, replay } = useMotionTimeline(
        [
            // 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 },
    );

    useEffect(() => {
        play();
    }, []);

    return (
        <div class="App">
            <button disabled={!isFinished} onClick={() => replay()}>
                Replay
            </button>

            <div class="container">
                <img ref={gifRef} class="gif" src={Image} alt="mind explosion gif" />
                <div>
                    <h1 class="heading">Tanvesh</h1>
                    <p>@sarve__tanvesh</p>
                </div>
            </div>
        </div>
    );
}

API

const { play, replay, reset, isFinished, timelineInstance } = useMotionTimeline(
    sequence,
    options,
    events,
);

useMotionTimeline returns:

  • play: plays the animation
  • replay: Resets and plays the animation
  • reset: resets the element to its original styling
  • isFinished: is true when animation has finished playing
  • timelineInstance: Animation Controls. Refer to motion one docs for more.

useMotionTimeline 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 for more on this.
  • options - Optional parameter. Refer to motion doc's 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 useMotionAnimate's onFinish.

Local Installation & Contributing

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

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

GitHub

https://github.com/tanvesh01/motion-signals
You might also like...

painless transitions built for react-router, powered by react-motion

React Router Transition Painless transitions for React Router, powered by React Motion. Example site. Requirements To use the latest version of this p

Aug 2, 2022

Sine wave animation using React & Typescript with Canvas API :heart_eyes:

Sine wave animation using React & Typescript with Canvas API :heart_eyes:

Jun 13, 2022

Open source, production-ready animation and gesture library for React

Open source, production-ready animation and gesture library for React

An open source and production-ready motion library for React on the web. Motion is an open source, production-ready library that's designed for all cr

Jul 30, 2022

AutoAnimate is a zero-config, drop-in animation utility that adds smooth transitions to your web app

AutoAnimate is a zero-config, drop-in animation utility that adds smooth transitions to your web app

Add motion to your apps with a single line of code. AutoAnimate is a zero-config, drop-in animation utility that adds smooth transitions to your web a

Aug 6, 2022

(ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React!

react-anime (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React built on top of Julian Garnier's anime.js. Just place an Anime component and what

Aug 6, 2022

✌️ A spring physics based React animation library

✌️ A spring physics based React animation library

react-spring is a spring-physics based animation library that should cover most of your UI related animation needs. It gives you tools flexible enough

Jul 31, 2022

✨ (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React!

(ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React built on top of Julian Garnier's anime.js.

Jul 28, 2022

react-animated-numbers - 👾 Library showing animation of number changes in react.js

react-animated-numbers - 👾 Library showing animation of number changes in react.js

Jul 27, 2022

✌️ A spring physics based React animation library

✌️ A spring physics based React animation library

✌️ A spring physics based React animation library

Aug 4, 2022
Comments
  • 1. + /examples

    I added an examples folder using Solid-Start. Mostly translated from your motion-hooks example with minor tweaks, but all demos are presented in a single web page. Is OK on phones.

    Because of the extensive edits, I placed myself as co-contributor in the example only.

    motion-signals

    Reviewed by tomByrer at 2022-05-15 13:37
  • 2. github pages

    The reason why I built the examples in #3 was for you to host on Github-pages, so people have a 'live' version ready to visit when the check out the repo.

    Should be enough tutorials online to help you. If you need more than that then I'll have to be co-admin, & might be better to put the repo in an org in that case.

    Reviewed by tomByrer at 2022-05-17 09:34
  • 3. Deletes User's Styles?

    Haven't tried the library, was just perusing the source code and saw this:

    https://github.com/tanvesh01/motion-signals/blob/aa35450e37c06015d866d64603dab48bfc266694/src/createAnimation/index.ts#L75

    I think this may be buggy if the user sets the style using the attribute themselves.

    Reviewed by CoolOppo at 2022-03-23 18:32
  • 4. Configure Renovate

    Mend Renovate

    Welcome to Renovate! This is an onboarding PR to help you understand and configure settings before regular Pull Requests begin.

    🚦 To activate Renovate, merge this Pull Request. To disable Renovate, simply close this Pull Request unmerged.


    Detected Package Files

    • package.json (npm)

    Configuration

    🔡 Renovate has detected a custom config for this PR. Feel free to ask for help if you have any doubts and would like it reviewed.

    Important: Now that this branch is edited, Renovate can't rebase it from the base branch any more. If you make changes to the base branch that could impact this onboarding PR, please merge them manually.

    What to Expect

    With your current configuration, Renovate will create 9 Pull Requests:

    chore(deps): pin dependencies
    chore(deps): update dependency rollup-plugin-sass to v1.2.13
    • Schedule: ["at any time"]
    • Branch name: renovate/rollup-plugin-sass-1.x
    • Merge into: main
    • Upgrade rollup-plugin-sass to 1.2.13
    chore(deps): update dependency motion to ~10.6.1 || ~10.13.0
    • Schedule: ["at any time"]
    • Branch name: renovate/motion-10.x
    • Merge into: main
    • Upgrade motion to ~10.6.1 || ~10.13.0
    chore(deps): update dependency rollup to v2.77.2
    • Schedule: ["at any time"]
    • Branch name: renovate/rollup-2.x
    • Merge into: main
    • Upgrade rollup to 2.77.2
    chore(deps): update dependency rollup-plugin-typescript2 to v0.32.1
    • Schedule: ["at any time"]
    • Branch name: renovate/rollup-plugin-typescript2-0.x
    • Merge into: main
    • Upgrade rollup-plugin-typescript2 to 0.32.1
    chore(deps): update dependency solid-js to ~1.3.3 || ~1.4.0
    • Schedule: ["at any time"]
    • Branch name: renovate/solid-js-1.x
    • Merge into: main
    • Upgrade solid-js to ~1.3.3 || ~1.4.0
    chore(deps): update dependency tslib to v2.4.0
    • Schedule: ["at any time"]
    • Branch name: renovate/tslib-2.x
    • Merge into: main
    • Upgrade tslib to 2.4.0
    chore(deps): update dependency typescript to v4.7.4
    • Schedule: ["at any time"]
    • Branch name: renovate/typescript-4.x
    • Merge into: main
    • Upgrade typescript to 4.7.4
    chore(deps): update jest monorepo to v28 (major)
    • Schedule: ["at any time"]
    • Branch name: renovate/major-jest-monorepo
    • Merge into: main
    • Upgrade jest to 28.1.3
    • Upgrade ts-jest to 28.0.7

    🚸 Branch creation will be limited to maximum 2 per hour, so it doesn't swamp any CI resources or spam the project. See docs for prhourlylimit for details.


    ❓ Got questions? Check out Renovate's Docs, particularly the Getting Started section. If you need any further assistance then you can also request help here.


    This PR has been generated by Mend Renovate. View repository job log here.

    Reviewed by renovate[bot] at 2022-02-08 11:02
Component-wrapper for collapse animation with react-motion for elements with variable (and dynamic) height
Component-wrapper for collapse animation with react-motion for elements with variable (and dynamic) height

Component-wrapper for collapse animation with react-motion for elements with variable (and dynamic) height

Aug 3, 2022
React components for the Web Animations API - http://react-web-animation.surge.sh
React components for the Web Animations API - http://react-web-animation.surge.sh

react-web-animation react-web-animation is a set of React components that expose the Web Animations API in a declarative way. Demos Check out how you

Jul 27, 2022
React-todo-app-with-framer-motion - TodoMVC App with React hooks and Framer Motion

TodoMVC App with React hooks and Framer Motion CleanShot.2022-01-29.at.18.27.06.

Jul 24, 2022
⚛ A React library for smooth FLIP animations. Easily animate originally unanimatable properties like DOM positions with one hook.
⚛ A React library for smooth FLIP animations. Easily animate originally unanimatable properties like DOM positions with one hook.

React Easy Flip ⚛ A lightweight React library for smooth FLIP animations Features Animates the unanimatable (DOM positions, mounts/unmounts) One hook

Jul 4, 2022
A collection of animations that can be used with any inline style library that supports using objects to define keyframe animations, such as Radium or Aphrodite
A collection of animations that can be used with any inline style library that supports using objects to define keyframe animations, such as Radium or Aphrodite

A collection of animations that can be used with any inline style library that supports using objects to define keyframe animations, such as Radium or Aphrodite. React-animations implements all animations from animate.css.

Jun 14, 2022
React Shoe - a project developed to study the Three.js technology for 3d objects and framer motion for 2d animations
React Shoe - a project developed to study the Three.js technology for 3d objects and framer motion for 2d animations

React Shoe - a project developed to study the Three.js technology for 3d objects and framer motion for 2d animations

Aug 2, 2022
High-performance spring animations in React

React Rebound A spring-based React animation library that animates elements directly in the DOM for maximum performance. Hooks and component-based API

Apr 24, 2022
🍿 React component for animating an element's children, one by one
🍿 React component for animating an element's children, one by one

react-smooth-list ?? React component for animating an element's children, one by one. Installation This package is distributed via npm. npm install re

Aug 3, 2022
Use-step-animation - Custom hook used to make sequence of animations using positions more easily

use-step-animation Custom hook used to make sequence of animations using positio

Jan 8, 2022
JavaScript implementation of the Web Animations API

What is Web Animations? A new JavaScript API for driving animated content on the web. By unifying the animation features of SVG and CSS, Web Animation

Aug 1, 2022