Usage – Breakpoints

Setup

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

The default breakpoint will be used if no other breakpoint is defined. If no default is set in the settings, (min-width: 1px) will be used, which means the animation will always be applied.

Usage

For the following examples, let's assume that three breakpoints are defined in the settings:

• sm with a value of (min-width: 640px)
• md with a value of (min-width: 768px)
• lg with a value of (min-width: 1024px)

Breakpoints are defined at the start of the animation string.

            <div class="animate-@lg:from:duration-1|autoAlpha-0|rotate-180|xPercent-[-100]|ease-power2.inOut"></div>
Copy

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

You can also define multiple breakpoints:

            <div class="animate-@md:from:duration-1|autoAlpha-0|rotate-360|xPercent-[-100]|ease-power2.inOut animate-@lg:from:background-[red]"></div>
Copy

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.