Neutralize Pesky Miscreants

    tinymotion-react
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.0 • Public • Published

    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

    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

    Install

    npm i tinymotion-react

    DownloadsWeekly Downloads

    1

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    64 kB

    Total Files

    6

    Last publish

    Collaborators

    • shannonrothe