API Reference¶

The complete API documentation is available on the official Elm package repository:

Module Overview¶

Core¶

Module	Description
Anim.Builder	`AnimBuilder eng` type for reusable animations
Scroll.Builder	`ScrollBuilder` type for reusable per-scroll configuration

Engines¶

Module	Description
Anim.Engine.Transition	CSS transitions for A→B animations
Anim.Engine.Keyframe	CSS keyframe animations for complex animations
Anim.Engine.Sub	Subscription-based frame animations
Anim.Engine.WAAPI	Web Animations API via ports
Anim.Engine.ScrollTimeline	Fire-and-forget scroll-driven animations
Anim.Engine.ViewTimeline	Fire-and-forget view-driven animations
Scroll.Engine.Cmd	Fire-and-forget scrolling
Scroll.Engine.Task	Composable scrolling with error handling
Scroll.Engine.Sub	Stateful scrolling with full control

Properties¶

Module	Description
Anim.Property.Translate	Position/movement animations
Anim.Property.Rotate	Rotation animations
Anim.Property.Scale	Scale/zoom animations
Anim.Property.Skew	Skew/shear animations
Anim.Property.Opacity	Fade animations
Anim.Property.Size	Width/height animations
Anim.Property.PerspectiveOrigin	3D vanishing-point (`perspective-origin`) animations
Anim.Property.Custom	Numeric CSS property animations
Anim.Property.CustomColor	Color CSS property animations

Utilities¶

Module	Description
Motion.Easing	Easing functions
Motion.Spring	Spring physics presets and custom configuration
Anim.Unit	Length unit (`px`, `rem`, `%`, viewport units, etc.) for length-bearing properties
Anim.Extra.Color	Color utilities
Anim.Extra.TransformOrder	Customize the order transform properties are applied
Anim.Extra.View3D	3D perspective helpers

Common Patterns¶

Animation Builder Signature¶

Reusable animation builders follow this pattern:

myAnimation : AnimBuilder eng -> AnimBuilder eng

This makes them composable with >> and reusable across engines.

Engine Trigger Pipelines¶

State-tracked engines with pure Elm state updates (Transition, Keyframe, Sub) use this shape:

Engine.animate animState <|
    Engine.for "anim-group"
        >> myAnimation

WAAPI is state-tracked but returns both updated state and a Cmd msg:

let
    ( newAnimState, animCmd ) =
        WAAPI.animate model.animState <|
            WAAPI.for "anim-group"
                >> myAnimation
in
( { model | animState = newAnimState }, animCmd )

Timeline engines (ScrollTimeline, ViewTimeline) are fire-and-forget and return a Cmd msg directly:

ScrollTimeline.animate motionCmd Document myAnimation

ViewTimeline.animate motionCmd myAnimation

Property Builder Pattern¶

All properties follow this pattern:

Engine.for "element-id"
    >> Property.begin
    >> Property.from startValue
    >> Property.to endValue
    >> Property.duration ms
    >> Property.easing easing
    >> Property.end