Welcome to motion-x 👋

Control your element's animation declaratively using JavaScript

Install

Using via Vanilla JavaScript:

npm install @tinker-hub/motion-core

Using via React:

npm install @tinker-hub/use-motion

Usage

🚀 Codesandbox demo.

Basic usage using React:

import { useMotion } from '@tinker-hub/use-motion';

function App() {
  const { controls, ref } = useMotion({
    animationIterationCount: 'infinite',
    animationDuration: '3s',
    animationTimingFunction: 'linear',
    animationName: 'myAnimation',
    keyframes: `
      0% {
        transform: rotate(0deg);
        left: 0;
      }
      50% {
        transform: rotate(90deg);
        background-color: blue;
        left: 100px;
      }
      100% {
        transform: rotate(180deg);
        background-color: red;
        left: 0px;
      }
    `
  });

  return (
    <div className="App">
      <header className="App-header">
        <div
          ref={ref}
          style={{
            backgroundColor: 'red',
            height: 50,
            width: 50,
            position: 'absolute'
          }}
        ></div>
      </header>
      <div>
        <button onClick={() => controls.play()}>Play</button>
        <button onClick={() => controls.pause()}>Pause</button>
        <button onClick={() => controls.stop()}>Stop</button>
      </div>
    </div>
  );
}

API

• @tinker-hub/motion-core API is available here.
• @tinker-hub/use-motion API is available here.

Author

👤 Tinker-hub

🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!