Animator

transition : Duration -> List Attribute -> Animation

import Animator as Anim
import Html
import Html.Attributes




Anim.div
    (Anim.transition (Anim.ms 200)
        [ Anim.opacity <|
            if model.visible then
                1
            else
                0
        ]
    )
    [ Html.Attributes.id "my-element" ]
    [ Html.text "Hello!" ]

type alias Attribute =

Prop

opacity : Float -> Attribute

rotation : Float -> Attribute

x : Float -> Attribute

y : Float -> Attribute

scale : Float -> Attribute

scaleX : Float -> Attribute

scaleY : Float -> Attribute

color : String -> Color -> Attribute

px : String -> Float -> Attribute

int : String -> Float -> Attribute

float : String -> Float -> Attribute

withBezier : Float -> Float -> Float -> Float -> Attribute -> Attribute

withImpulse : Float -> Attribute -> Attribute

When transitioning to this state, start with a little extra velocity!

This takes a number from 0-1.

type alias Duration =

Duration

Choosing a nice duration can depend on:

The size of the thing moving
The type of movement
The distance it's traveling.

So, start with a nice default and adjust it as you start to understand your specific needs.

Note — Here's a very good overview on animation durations and speeds.

ms : Float -> Duration

delay : Duration -> Animation -> Animation

Premade

Here are some premade animations.

There's nothing special about them, they're just convenient!

Check out how they're defined if you want to make your own.

spinning : Duration -> Animation

pulsing : Duration -> Animation

bouncing : Duration -> Float -> Animation

pinging : Duration -> Animation

Sequences

You may want something more involved than a single step transition.

Here's an element that's blinking.

import Animator as Anim
import Html
import Html.Attributes




Anim.div
    (Anim.loop
        [ Anim.step (Anim.ms 200)
            [ Anim.opacity 1
            ]
        , Anim.wait (Anim.ms 200)
        , Anim.step (Anim.ms 200)
            [ Anim.opacity 0
            ]
        ]
    )
    [ Html.Attributes.id "my-element" ]
    [ Html.text "Hello!" ]

type Step

set : List Attribute -> Step

wait : Duration -> Step

step : Duration -> List Attribute -> Step

keyframes : List Step -> Animation

loop : List Step -> Step

loopFor : Int -> List Step -> Step

On a Timeline

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

Animate an element on a specific timeline. Check out Animator.Timeline for more details.

This will

Give you smooth transitions when an animation is interrupted.
Allow you to syncronize multiple elements.

import Animator as Anim
import Html
import Html.Attributes


Anim.div
    (Anim.onTimeline model.timeline
        (\state ->
            if state.open
                [ Anim.opacity 1
                ]

            else
                [ Anim.opacity 0
                , Anim.x -200
                ]
        )
    )
    [ Html.Attributes.id "my-element" ]
    [ Html.text "Hello!" ]

onTimelineWith :

Timeline state

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

-> Animation

Rendering

div : Animation -> List (Attribute msg) -> List (Html msg) -> Html msg

node :

String

-> Animation

-> List (Attribute msg)

-> List (Html msg)

-> Html msg

type alias Css =

{ hash : String

, keyframes : String

, props : List ( String, String )

}

css : Timeline state -> (state -> ( List Attribute, List Step )) -> Css

buildrtech/elm-animator-with-elm-css/4.0.0

Animator

Premade

Sequences

On a Timeline

Rendering

Modules