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

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.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.Extra.Color	Color utilities
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