charbelrami/baby-yoda

A tiny (0.7kB) layout animation module for React

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

Examples

• codesandbox

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>
    </>
  );
}