Animator

type Animation

transition : Duration -> List Attribute -> Animation

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

xAsSingleProp : Float -> Attribute

color : String -> Color -> Attribute

px : String -> Float -> Attribute

int : String -> Float -> Attribute

float : String -> Float -> Attribute

withWobble : Float -> Attribute -> Attribute

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

withImpulse : Float -> Attribute -> Attribute

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

Values 0 -> No different from before 1 ->

type alias Duration =

Duration

ms : Float -> Duration

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

keyframes : List Step -> Animation

loop : List Step -> Step

loopFor : Int -> List Step -> Step

set : List Attribute -> Step

wait : Duration -> Step

step : Duration -> List Attribute -> Step

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

onTimelineWith :

Timeline state

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

-> Animation

delay : Duration -> Animation -> 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

, animation : String

, keyframes : String

, props : List ( String, String )

}

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

buildrtech/elm-animator-with-elm-css/2.0.0

Animator

Premade

Sequences

Rendering

Modules