Animations ​

Doxa provides a utility animation system built on CSS @keyframes. Animations are applied using two classes: a base animate class and a modifier that names the specific animation.

html
<p class="animate animate--fade-in-out">I will fade in and out</p>

Available Animations ​

Fade In Out ​

A smooth opacity transition from invisible to visible and back.

I will fade in and out

I will fade in

I will slide in

Custom Animations ​

Doxa users can define their own animations by passing a SCSS map to $custom-animation-helpers:

scss
$custom-animation-helpers: (
  "slide-in": (
    "keyframes": (
      "0%":   ("transform": "translateX(-100%)"),
      "100%": ("transform": "translateX(0)"),
    ),
    "duration":        0.5s,
    "timing-function": ease-out,
    "fill-mode":       both,
  ),
);

This would generate the class animate animate--slide-in for use in your markup.