Breakpoints

Glaze uses GSAP's matchMedia under the hood, so your animations can respond to screen size changes.

Setup

Define your breakpoints in the config:

glaze({
  lib: { gsap: { core: gsap } },
  breakpoints: {
    default: "(min-width: 1px)",
    sm: "(min-width: 640px)",
    md: "(min-width: 768px)",
    lg: "(min-width: 1024px)",
  },
});

The default breakpoint runs when no other breakpoint is specified. If you don't set one, it defaults to (min-width: 1px).

Usage

Add @breakpoint: before your animation:

<div
  class="h-20 w-20 rounded-xl bg-lime-500"
  data-animate="@lg:from:opacity-0|rotate-180|duration-1"
></div>

This animation only runs on lg screens (1024px+).

Multiple breakpoints

Stack multiple breakpoints by separating them with spaces:

<div
  data-animate="@sm:from:opacity-0|y-50 @lg:from:scale-0.5"
></div>

On small screens, it fades in from below. On large screens, it also scales up.

The animations combine - larger breakpoints add to (or override) smaller ones.