CSS Animation

Hamburger menu

Credit - Frontend Master Phuoc Nguyen

TailwindCSS + ReactJS version of https://phuoc.ng/collection/css-animation/hamburger-menu/

Please read the original blog for the rationale behind these solutions.

Creating a hamburger menu

export default function App() {
  return (
    <button>
      <div className="h-1 w-8 bg-gray-300 my-[5px]" />
      <div className="h-1 w-8 bg-gray-300 my-[5px]" />
      <div className="h-1 w-8 bg-gray-300 my-[5px]" />
    </button>
  );
}
Open on CodeSandboxOpen Sandbox

Forming a X sharp

We need to style the children based on the parent state, use Styling based on parent state

export default function App() {
  return (
    <button className="group">
      <div className="group-hover:translate-y-[9px] group-hover:rotate-45 h-1 w-8 bg-gray-300 my-[5px] transition-all ease-out duration-300" />
      <div className="group-hover:opacity-0 h-1 w-8 bg-gray-300 my-[5px] transition-all ease-out duration-300" />
      <div className="group-hover:-translate-y-[9px] group-hover:-rotate-45 h-1 w-8 bg-gray-300 my-[5px] transition-all ease-out duration-300" />
    </button>
  );
}
Open on CodeSandboxOpen Sandbox

Forming a minus sign

Effect 1

export default function App() {
  return (
    <button className="group">
      <div className="group-hover:translate-y-[9px] h-1 w-8 bg-gray-300 my-[5px] transition-all ease-out duration-300" />
      <div className="group-hover:opacity-0 h-1 w-8 bg-gray-300 my-[5px] transition-all ease-out duration-300" />
      <div className="group-hover:-translate-y-[9px] h-1 w-8 bg-gray-300 my-[5px] transition-all ease-out duration-300" />
    </button>
  );
}
Open on CodeSandboxOpen Sandbox

Effect 2

export default function App() {
  return (
    <button className="group">
      <div className="group-hover:opacity-0 group-hover:-translate-x-full h-1 w-8 bg-gray-300 my-[5px] transition-all ease-out duration-300" />
      <div className="h-1 w-8 bg-gray-300 my-[5px] transition-all ease-out duration-300" />
      <div className="group-hover:opacity-0 group-hover:translate-x-full h-1 w-8 bg-gray-300 my-[5px] transition-all ease-out duration-300" />
    </button>
  );
}
Open on CodeSandboxOpen Sandbox

Forming a plus sign

export default function App() {
  return (
    <button className="group">
      <div className="group-hover:translate-y-[9px] h-1 w-8 bg-gray-300 my-[5px] transition-all ease-out duration-300" />
      <div className="group-hover:opacity-0 h-1 w-8 bg-gray-300 my-[5px] transition-all ease-out duration-300" />
      <div className="group-hover:-translate-y-[9px] group-hover:-rotate-90 h-1 w-8 bg-gray-300 my-[5px] transition-all ease-out duration-300" />
    </button>
  );
}
Open on CodeSandboxOpen Sandbox

Forming an arrow

Arrow Left

export default function App() {
  return (
    <button className="group">
      <div className="group-hover:-translate-x-[2px] group-hover:translate-y-[4px] group-hover:-rotate-45 group-hover:w-4 h-1 w-8 bg-gray-300 my-[5px] transition-all ease-out duration-300" />
      <div className="h-1 w-8 bg-gray-300 my-[5px] transition-all ease-out duration-300" />
      <div className="group-hover:-translate-x-[2px] group-hover:-translate-y-[4px] group-hover:rotate-45 group-hover:w-4 h-1 w-8 bg-gray-300 my-[5px] transition-all ease-out duration-300" />
    </button>
  );
}
Open on CodeSandboxOpen Sandbox

Arrow Right

export default function App() {
  return (
    <button className="group">
      <div className="group-hover:translate-x-[17px] group-hover:translate-y-[4px] group-hover:rotate-45 group-hover:w-4 h-1 w-8 bg-gray-300 my-[5px] transition-all ease-out duration-300" />
      <div className="h-1 w-8 bg-gray-300 my-[5px] transition-all ease-out duration-300" />
      <div className="group-hover:translate-x-[17px] group-hover:-translate-y-[4px] group-hover:-rotate-45 group-hover:w-4 h-1 w-8 bg-gray-300 my-[5px] transition-all ease-out duration-300" />
    </button>
  );
}
Open on CodeSandboxOpen Sandbox
Last Update: 11:49 - 22 April 2024

Previous

Floating label

Next

Flipping number

On this page