etaque / elm-transit / Transit

Styled transitions with minimal boilerplate, typically for page transitions in single page apps.

See README or example for usage.

Uses elm-animations and Cmd.tick for animation logic.

State


type Transition

Opaque type for transition state storage.


type alias WithTransition model =
{ model | transition : Transition }

Extended type for the parent model holding the transition.

empty : Transition

Empty transition state, as initial value in the model.

Update


type Msg msg

Transition msg, to be wrapped in your own msg type.

start : (Msg msg -> msg) -> msg -> ( Time, Time ) -> WithTransition parent -> ( WithTransition parent, Platform.Cmd.Cmd msg )

Start the transition with the following parameters:

Returns a tuple that you can directly emit from your update.

tick : (Msg msg -> msg) -> Msg msg -> WithTransition parent -> ( WithTransition parent, Platform.Cmd.Cmd msg )

Where all the logic happens. Run transition steps, and triggers timeline's parent message when needed.

subscriptions : (Msg msg -> msg) -> WithTransition parent -> Platform.Sub.Sub msg

Animation frame subscription. Must be called by your component's subscription function.

View

getValue : Transition -> Basics.Float

Extract current animation value (a float between 0 and 1).

getStep : Transition -> Step

Extract current animation step.


type Step
    = Exit
    | Enter
    | Done

Transition step: Exit -> send message -> Enter -> Done.