Breakpoints

Glaze features a deep integration with GSAPs matchMedia (opens in a new tab) functionality, which allows you to define breakpoints and create responsive animations.

Setup

To use breakpoints, you need to define them inside the configuration object.

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

The default breakpoint will be used if no other breakpoint is defined. In the example above, all animations will be applied from 640px and up. If no default is defined, (min-width: 1px) will be used.

Usage

Breakpoints are defined at the start of the animation string.

<div
  class="h-20 w-20 rounded-xl bg-lime-500 lg:invisible"
  data-animate="@lg:from:duration-1|autoAlpha-0|rotate-180|xPercent-[-100]|ease-power2.inOut"
></div>

This will animate all the set properties when the screen width is 640px or more.

You can also define multiple breakpoints:

<div
  class="h-20 w-20 rounded-xl bg-lime-500 sm:invisible"
  data-animate="@sm:from:duration-1|autoAlpha-0|rotate-360|xPercent-[-100]|ease-power2.inOut @lg:from:background-[red]"
></div>

In this example, the animation will be applied when the screen width is 768px or more. If the screen width is 1024px or more, the background color will change in addition to the other animations.