eddylane / elm-flip-animation / Animation.Flip

Provides a simple way of achieving FLIP style animations.

Configuration


type alias Configuration child msg =
{ id : child -> String
, updateMsg : State -> Platform.Cmd.Cmd msg -> msg
, animateMsg : String -> Animation.Msg -> msg
, getBoundingClientRects : Json.Encode.Value -> Platform.Cmd.Cmd msg
, gotBoundingClientRects : (Json.Decode.Value -> msg) -> Platform.Sub.Sub msg
, spring : Animation.Spring.Presets.Spring 
}

Configuration for the flip animation


type alias RenderConfig child msg =
{ config : Configuration child msg
, state : State
, children : List child
, childAttrs : child -> List (Html.Attribute msg)
, childElement : child -> List (Html.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, Platform.Cmd.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 : Animation.Msg -> String -> State -> State

Update the position of an element in the flip animation

Subscriptions

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

Flip subscriptions