tinymotion-react

tinymotion-react is a React.js animation library based on Tinymotion, that seamlessly works with Tailwind CSS.

Hover	Click	Trigger	Auto
Switch	Grid	Shuffle	Loader

Installation

NPM

npm i -S tinymotion-react

Yarn

yarn add tinymotion-react

How to use

import React from "react";
import Motion from "tinymotion-react";

function App() {
  return (
    <Motion
      hover={["scale-100", "scale-125 rotate-45", "scale-100 rotate-0"]}
      options={{
        repeat: true,
        rollback: true,
        instantRollback: true,
        delay: 0,
        stepDelay: 0,
        factor: 1,
        skip: 0,
        duration: 600,
        ease: "ease-in-out",
      }}
      class="w-16 h-16 bg-blue-500 rounded-lg shadow"
    />
  );
}

export default App;

Examples

Note: These examples are in Vue

• Hover
• Click
• External trigger
• Auto
• Switch
• Loader

Notes

This project is based on the original Vue version and is subject to differ at times. Some features may be missing but I will aim to keep it updated with the original version.

Authors

Boris Lepikhin – original author of Vue version

Shannon Rothe