/baby-yoda

A tiny (0.7kB) layout animation module for React

Primary LanguageTypeScriptMIT LicenseMIT

baby-yoda

A tiny layout animation module for react

  • 🥚 tiny
  • 🛸 fast: FLIP animations and Web Animations API
  • 🧙‍♂️ uses The Force: magically animate layout changes like a Jedi
  • 🐸 eats frogs
  • 🍪 steals cookies
  • 🤖 has a droid friend
  • 👀 follows you

Baby yoda

Examples

Installation

npm install baby-yoda

Usage

import { Grogu } from "baby-yoda";
function App() {
  const [toggle, setToggle] = React.useState(false);

  return (
    <>
      <button onClick={() => setToggle((prev) => !prev)}>toggle</button>
      <div
        style={{
          width: "100px",
          background: "#44a0a7",
          display: "flex",
          justifyContent: toggle ? "flex-end" : "flex-start",
        }}
      >
        <Grogu>
          <div
            style={{
              width: "50px",
              height: "50px",
              background: "#79c3c9",
            }}
          ></div>
        </Grogu>
      </div>
    </>
  );
}