@lichin/pico

An experimental animation
library for React on the web.

Get started

Quick start

npm install @lichin/pico

import React from "react";
import { animate } from "@lichin/pico";

export default function App() {
  const handleRotate = () => {
    const elm = document.querySelector(".image");
    animate(elm, {
      rotate: 90,
      transition: {
        duration: 0.4
      }
    });
  };

  return (
    <div className="App">
      <img
        onClick={handleRotate}
        src="https://miro.medium.com/max/1400/1*UktO9Cqfa_M7gv3syxCjRg.jpeg"
        alt="doggy"
        className="image"
      />
    </div>
  );
}

Demo

you can play with it through codesandbox example

Docs

Animate API
Animate function contain two parameter:

Prop	Type	Default	Description
element	HTMLElement Object	-	Single HTMLElement Object
options	Object	{}	Please see next object description for the details

options object contain two type of keys:

Key	Type	Default	Description
transition	Object	-	Describe how the animation should play, currently support duration: Number
rotate	Number	-	The value that the element should rotate

License

Pico is MIT licensed.