API Summary

Base Animations

Fade

• fade
• fade-{direction} // u, d, l, r, ul, ur, dl, dr
• fade-{distance} // % distance
• fade-{distance}-{distance} // % distance X, Y
• fade-{direction}-{distance} // direction + % distance
• fade-{direction}-{distance}-{distance} // direction + % distance X, Y

Slide

• slide
• slide-{direction} // u, d, l, r, ul, ur, dl, dr
• slide-{distance} // % distance (no opacity change)
• slide-{distance}-{distance} // % distance X, Y
• slide-{direction}-{distance} // direction + % distance
• slide-{direction}-{distance}-{distance} // direction + % distance X, Y

Zoom In

• zoomin
• zoomin-{direction} // u, d, l, r, ul, ur, dl, dr
• zoomin-{intensity} // % intensity
• zoomin-{distance}-{intensity} // % distance, intensity
• zoomin-{distance}-{distance}-{intensity} // % distance X, Y, intensity
• zoomin-{direction}-{intensity} // direction + % intensity
• zoomin-{direction}-{distance}-{intensity} // direction + % distance, intensity
• zoomin-{direction}-{distance}-{distance}-{intensity} // direction + % distance X, Y, intensity

Zoom Out

• zoomout
• zoomout-{direction} // u, d, l, r, ul, ur, dl, dr
• zoomout-{intensity} // % intensity
• zoomout-{distance}-{intensity} // % distance, intensity
• zoomout-{distance}-{distance}-{intensity} // % distance X, Y, intensity
• zoomout-{direction}-{intensity} // direction + % intensity
• zoomout-{direction}-{distance}-{intensity} // direction + % distance, intensity
• zoomout-{direction}-{distance}-{distance}-{intensity} // direction + % distance X, Y, intensity

Flip

• flip
• flip-{direction} // u, d, l, r, ul, ur, dl, dr
• flip-{angle} // degrees angle
• flip-{angle}-{perspective} // degrees angle, rem perspective
• flip-{direction}-{angle} // direction + degrees angle
• flip-{direction}-{angle}-{perspective} // direction + degrees angle, rem perspective

Split

• split-word
• split-letter
• split-item
• split-{animation}-{direction} // animation: fade, slide, zoomin, zoomout, flip
• split-{animation}-{direction}-{values} // + custom values
• split-{animation}-{direction}-{values}-{values}
• split-{animation}-{direction}-{values}-{values}-{values}

Count

• count-[{target}] // target number - only spaces, dots, commas and numbers are valid, all other characters must be outside

Text Effects

• text-shimmer
• text-fluid

Modifiers

Duration

• duration-{milliseconds} // milliseconds

Delay

• delay-{milliseconds} // milliseconds

Split Delay

• split-delay-{milliseconds} // milliseconds
• split-delay-{milliseconds}-{stagger} // stagger: linear, center, edges, random

Easing

• linear
• ease
• ease-in
• ease-out
• ease-in-out
• step-start
• step-end
• easing-[{css easing function}] // valid CSS function

Threshold

• threshold-{percentage} // % visibility

Blur

• blur // 0.625rem default
• blur-{rem} // custom rem

Others

• once
• loop // mirror default
• loop-{type} // type: mirror, jump
• forwards

Custom Timeline

• line-[{timeline properties}] // properties separated by pipe

Timeline Properties

• o±{value} // opacity 0-100
• s±{value} // scale X,Y
• sx±{value} // scaleX
• sy±{value} // scaleY
• sz±{value} // scaleZ
• t±{value} // translateX %
• tx±{value} // translateX %
• ty±{value} // translateY %
• tz±{value} // translateZ %
• r±{value} // rotateZ degrees
• rx±{value} // rotateX degrees
• ry±{value} // rotateY degrees
• rz±{value} // rotateZ degrees
• b±{value} // blur rem
• g±{value} // glow %
• w±{value} // fontWeight 100-900
• p±{value} // perspective rem

Timeline Keyframes

• | // keyframe separator - if no percentage specified, defaults to 100
• |{percentage} // % position after pipe
• First frame before first pipe is always 0

TypeScript Types

export type LoopType = 'mirror' | 'jump';
export type AnimationType = 'fade' | 'zoomin' | 'zoomout' | 'flip' | 'slide';
export type DirectionType = 'u' | 'd' | 'l' | 'r' | 'ul' | 'ur' | 'dl' | 'dr';

export interface USALDefaults {
  animation?: AnimationType;
  direction?: DirectionType;
  duration?: number; // ms
  delay?: number; // ms
  threshold?: number; // %
  splitDelay?: number; // ms
  easing?: string;
  blur?: boolean | number; // rem
  forwards?: boolean;
  loop?: LoopType;
}

export interface USALConfig {
  defaults?: USALDefaults;
  observersDelay?: number; // ms
  once?: boolean;
}

export interface USALInstance {
  config(): USALConfig;
  config(newConfig: Partial<USALConfig>): USALInstance;
  destroy(): Promise<void>; //use only extreme cases, the system is reactive even in shadowRoot
  restart(): Promise<USALInstance>; //use only extreme cases, the system is reactive even in shadowRoot
  initialized(): boolean;
  readonly version: string;
}

declare global {
  interface Window {
    USAL: USALInstance;
  }
}

declare const USAL: USALInstance;
export default USAL;