Description

Card Resize applies a smooth size transition whenever a container’s width or height changes. It is ideal for compact/expanded card pairs, collapsing rows, or any element that grows or shrinks in response to a state change. The transition is driven entirely by CSS, so all you need is a class toggle on the element.

Example

CSS

:root {
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.t-resize {
  transition:
    width var(--resize-dur) var(--resize-ease),
    height var(--resize-dur) var(--resize-ease);
  will-change: width, height;
}

@media (prefers-reduced-motion: reduce) {
  .t-resize {
    transition: none !important;
  }
}

React

import { useState } from "react";
import "./card-resize.css"; // paste the CSS above

export function CardResize() {
  const [small, setSmall] = useState(false);
  return (
    <div>
      <div className={"t-resize card" + (small ? " is-small" : "")}>
        <p>Storage</p>
        <p>2.4 GB of 10 GB used</p>
      </div>
      <button onClick={() => setSmall((v) => !v)}>
        {small ? "Expand" : "Collapse"}
      </button>
    </div>
  );
}

Variables

Credit

Adapted from Card Resize on transitions.dev by Jakub Antalik. Original source: github.com/Jakubantalik/transitions.dev.