Animator

CSS animation, with a single renderer for transitions, sequences, and timelines.

An animation ready to render as HTML or CSS.

transition : Duration -> List Attribute -> Animation

Animate a change to these properties using native CSS transitions where possible. Springs use native CSS linear(...) easing, which requires a browser with support for that timing function. Incompatible curves within a compound property use keyframes instead.

Native springs follow CSS transition reversal rules. Use a timeline when spring interruptions need to preserve incoming velocity.

Animator.div
    (Animator.transition (Animator.ms 200)
        [ Animator.opacity
            (if model.visible then
                1


             else
                0
            )
        ]
    )
    []
    [ Html.text "Hello!" ]

type alias Attribute =

Prop

A CSS property and its target value and transition curve.

opacity : Float -> Attribute

rotation : Float -> Attribute

Rotation in turns around the Z axis.

rotationAround :

{ x : Float

, y : Float

, z : Float

}

-> Float

-> Attribute

Rotation in turns around the given axis.

x : Float -> Attribute

Translation in pixels.

y : Float -> Attribute

Translation in pixels.

z : Float -> Attribute

Translation in pixels.

scale : Float -> Attribute

Scale all three axes.

scaleX : Float -> Attribute

scaleY : Float -> Attribute

scaleZ : Float -> Attribute

color : String -> Color -> Attribute

A color property.

px : String -> Float -> Attribute

A property measured in pixels.

int : String -> Float -> Attribute

A property rendered as a rounded integer.

float : String -> Float -> Attribute

A unitless numeric property.

withTransition : Transition -> Attribute -> Attribute

Attributes use Animator.Transition.standard by default.

withStepTransition : Transition -> Step -> Step

Apply a curve to all properties in a step, including nested sequences.

type alias Duration =

Duration

A duration. Start with a short duration and adjust for the size and distance of the movement.

ms : Float -> Duration

A duration in milliseconds.

Premade

These are ordinary keyframe sequences; inspect their definitions to make your own.

spinning : Duration -> Animation

pulsing : Duration -> Animation

bouncing : Duration -> Float -> Animation

The duration covers a complete out-and-back bounce. Distance is in pixels: positive moves down, negative moves up.

pinging : Duration -> Animation

Sequences

import Animator as Anim
import Html


Anim.div
    (Anim.keyframes
        [ Anim.loop
            [ Anim.set [ Anim.opacity 1 ]
            , Anim.wait (Anim.ms 200)
            , Anim.step (Anim.ms 200) [ Anim.opacity 0 ]
            ]
        ]
    )
    []
    [ Html.text "Hello!" ]

type alias Step =

Step

A step or nested sequence of steps.

set : List Attribute -> Step

Immediately set properties.

wait : Duration -> Step

Hold the current properties for a duration.

step : Duration -> List Attribute -> Step

Move to these properties, preserving properties omitted from the step.

keyframes : List Step -> Animation

Render a sequence using CSS keyframe animations.

loop : List Step -> Step

Repeat indefinitely.

loopFor : Int -> List Step -> Step

Repeat a sequence. Zero skips it; a negative count repeats indefinitely.

sequence : List Step -> Step

Group steps into a sequence that runs once.

On a Timeline

onTimeline : Timeline state -> (state -> List Attribute) -> Animation

Animate on a timeline, allowing multiple elements to synchronize and handling interruptions from their sampled positions. Uses CSS keyframe animations.

Omitted properties return to their defaults: translation and rotation to 0, scale and opacity to 1. In contrast, step keeps omitted properties as they are.

onTimelineWith :

Timeline state

-> (state -> ( List Attribute, List Step ))

-> Animation

Animate to a state's properties, then run its resting steps. The steps are interrupted when the next timeline transition begins.