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 msg

Opaque type for transition state storage.

type alias WithTransition model msg =

{ model | transition : Transition msg }

Extended type for the parent model holding the transition.

initial : Transition msg

Empty transition state, as initial value in the model.

Timeline

type alias Timeline msg =

{ exitDuration : Float

, msg : msg

, enterDuration : Float

}

Timeline of the transition

timeline : Float -> msg -> Float -> Timeline msg

Build the timeline:

exitDuration => message => enterDuration

defaultTimeline : msg -> Timeline msg

Default timeline for this transition: exit of 50ms then enter of 200ms.

withExitDuration : Float -> Timeline msg -> Timeline msg

Update exit duration of timeline.

withEnterDuration : Float -> Timeline msg -> Timeline msg

Update enter duration of timeline.

Update

type Msg

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

start :

(Msg -> msg)

-> Timeline msg

-> WithTransition parent msg

-> ( WithTransition parent msg, Cmd msg )

Start the transition with the following parameters:

tagger to wrap Transit's Msg into your app's Msg type (consistent with tick signature, saves you one Cmd.map)
timeline to setup transition
parent is the model storing the Transition, to update with new transition state

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

tick :

(Msg -> msg)

-> Msg

-> WithTransition parent msg

-> ( WithTransition parent msg, Cmd msg )

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

tagger to wrap Transit's msg into app's Msg type, has to be same type of timeline.msg,
msg is the Transit message to process,
parent is the model storing the Transition, for transition state update.

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

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

View

getValue : Transition msg -> Float

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

getStep : Transition msg -> Step

Extract current animation step.

type Step

= Exit

| Enter

| Done

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

Modules

Transit