Animation.Flip

Provides a simple way of achieving FLIP style animations.

Configuration

type alias Configuration child msg =

{ id : child -> String

, updateMsg : State -> Cmd msg -> msg

, animateMsg : String -> Msg -> msg

, getBoundingClientRects : Value -> Cmd msg

, gotBoundingClientRects : (Value -> msg) -> Sub msg

, spring : Spring

}

Configuration for the flip animation

type alias RenderConfig child msg =

{ config : Configuration child msg

, state : State

, children : List child

, childAttrs : child -> List (Attribute msg)

, childElement :

child -> List (Attribute msg) -> List (Html msg) -> Html msg

, childContents : child -> List (Html msg)

}

Render configuration for the flip animation, including the overall config

Flip.render
    { config = flipConfig
    , children = model.children
    , state = model.flip
    , childElement = always div
    , childAttrs = always []
    , childContents = .label >> text
    }

State

type State

Opaque type for the state of the animation

init : Configuration child msg -> List child -> ( State, Cmd msg )

Init a fresh flip animation

Animate

render : RenderConfig child msg -> List (Html msg)

Render a flip animation.

More info on method and reasoning soon!

animate : Msg -> String -> State -> State

Update the position of an element in the flip animation

Subscriptions

subscriptions : Configuration child msg -> State -> List child -> Sub msg

Flip subscriptions

Modules

Animation.Flip