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.
Opaque type for transition state storage.
{ model | transition : Transition }
Extended type for the parent model holding the transition.
empty : Transition
Empty transition state, as initial value in the model.
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:
tagger
to wrap Transit's Msg into your app's Msg type (consistent with tick
signature, saves you one Cmd.map
)parentMsg
to send at end of exitdurations
of transition steps (exit phase then enter phase)parent
is the model storing the Transition, to update with new transition stateReturns 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.
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 -> msg) -> WithTransition parent -> Platform.Sub.Sub msg
Animation frame subscription. Must be called by your component's subscription function.
getValue : Transition -> Basics.Float
Extract current animation value (a float between 0 and 1).
getStep : Transition -> Step
Extract current animation step.
Transition step: Exit -> send message -> Enter -> Done.