Customizations

Oat Animate provides a lightweight customization layer using CSS Variables. This allows you to override default animation behavior globally, per-component, or inline.

Available Variables

The following CSS variables are available on [ot-animate] elements, along with their default values:

• --ot-duration: 0.6s (The length of the animation)
• --ot-delay: 0s (The delay before the animation starts)
• --ot-easing: ease (The timing function of the animation)

Global Customization

To change the defaults for all animations in your project, simply override the variables in your global CSS:

:root {
  --ot-duration: 0.8s;
  --ot-easing: cubic-bezier(0.4, 0, 0.2, 1);
}
      

Inline Customization

You can easily tailor individual animations using inline styles. This is particularly useful for creating staggered animations or custom delays.

<!-- Staggered Example -->
<button class="demo-btn" ot-animate="slide-right" style="--ot-delay: 0.1s">Item 1</button>
<button class="demo-btn" ot-animate="slide-right" style="--ot-delay: 0.2s">Item 2</button>
<button class="demo-btn" ot-animate="slide-right" style="--ot-delay: 0.3s">Item 3</button>

<!-- Slow & Delayed -->
<div ot-animate="fade-up" style="--ot-duration: 1.5s; --ot-delay: 0.5s;">
  I am slow and delayed!
</div>

Reduced Motion

Oat Animate comes with built-in accessibility for users who prefer reduced motion. If a user's operating system is set to prefers-reduced-motion: reduce, all animations and transitions are automatically disabled by the library.