Delayed actions with transition progress for enter/exit animations in Elm.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
src
.gitignore
README.md
elm.json

README.md

Elm Transit

elm package install etaque/elm-transit

Delayed actions with transition progress for enter/exit animations in Elm.

See also:

Usage

(Full working example here)

Use WithTransition record extension to extend your own model:

import Transit

-- see recursive type param: Transit needs to know the type of message it will send delayed
type Msg
  = NavigateTo Page
  | SetPage Page
  | TransitMsg (Transit.Msg Msg)

type Page = Page1 | Page2

type alias Model =
  Transit.WithTransition { page: Page }

You're not bound to root model, you can also use it for sub-pages or components transitions.

Then wrap Msg in one of your action types and call start and tick in your update function.

update : Msg -> Model -> (Model, Cmd Msg)
update action model =
  case action of

    NavigateTo page ->
      -- exit phase of 100ms, then `(SetPage page)` will be sent, then enter phase of 200ms
      Transit.start TransitMsg (SetPage page) ( 100, 200 ) model

    TransitMsg a ->
      Transit.tick TransitMsg a model
        
    SetPage page ->
      ({ model | page = page }, Cmd.none)

A subscription is necessary to receive animation frame ticks when transition is running:

subscriptions : Model -> Sub Msg
subscriptions model =
  Transit.subscriptions TransitMsg model

In your views, you can then either:

  • Use getValue to get the 1 -> 0 -> 1 varying Float, and getStep to know the current phase of transition.

  • Or use one of the provided functions in elm-transit-style (or create one of your own) to add the visual effect in your view:

  div [ style (TransitStyle.fadeSlideLeft 50 model.transition) ] [ text "Some content" ]

Credits