Usage – Syntax

The syntax of SleekMotion is straightforward and easy to understand. If you're familiar with Tailwind, you'll find Glaze's approach very similar.

Animation strings are defined in the following order:

1. Breakpoint (optional)
2. Selector (optional)
3. State (required)
4. Animation object (required)

Class or attribute

You can define animations using either a data attribute or a class. Since some page builders don't render custom attributes inside the preview (e.g., Bricks), it is up to you to decide which method to use.

            <div data-animate="from:opacity-0"></div>
    <div class="animate-from:opacity-0"></div>
Copy

It is possible to change the data attribute or class prefix inside the settings.

Breakpoints

Breakpoints allow you to specify when an animation should run, based on the breakpoints defined in the configuration. The breakpoint is defined using the @ symbol, followed by the breakpoint name.

            <div class="animate-@sm:from:opacity-0"></div>
Copy

Selectors

By default, animations are applied directly to the element itself. However, you can target other elements using selectors enclosed in brackets ([]) before the state.

            <div class="animate-[&>h1]:to:opacity-1|stagger-0.25">
      <h1>...</h1>
      <h1>...</h1>
      <h1>...</h1>
    </div>
Copy

The & symbol refers to the parent element, allowing you to specify a child selector.

With media queries:

            <div class="animate-@sm:[&>h1]:to:opacity-1|stagger-0.25">
      <h1>...</h1>
      <h1>...</h1>
      <h1>...</h1>
    </div>
Copy

State

The animation state indicates the beginning and end points of the animation:

• from: The initial state of the animation.
• to: The final state of the animation.

            <div class="animate-from:opacity-0"></div>
    <div class="animate-to:xPercent-50"></div>
Copy

If both states are defined, the animation will run from the initial state to the final state.

            <div class="animate-from:opacity-0.5 to:opacity-1"></div>
Copy

Animation object

The animation object specifies the properties to animate, following the state.

            <div class="animate-to:yPercent-10"></div>
Copy

The string is parsed by splitting at the dash (-), where the first part is the property name, and the second part is its value. Values are automatically converted to their appropriate type (string, number, or boolean).

Chaining properties

To combine multiple properties in a single animation, separate them with a pipe (|) character.

            <div class="animate-to:opacity-1|yPercent-10"></div>
Copy

Nested objects

Access nested object properties by separating keys with a dot (.) character.

            <div class="animate-to:scale.x-2|scale.y-2"></div>
Copy

Negative values

For negative values, enclose the value in brackets. ([])

            <div class="animate-to:xPercent-[-50]"></div>
Copy

Spaces

For values with spaces, use an underscore (_) character.

            <div class="animate-to:boxShadow-[0_0_50px_20px_red]"></div>
Copy