Elm Transit Style

elm package install etaque/elm-transit-style

HTML animations for elm-transit's Transition, to be used on elm-html style attribute. At the moment we have those, though it's easy to add more:

• fade
• slide
• zoom
• fadeSlide
• fadeZoom

An ideal companion to elm-transit-router.

How it works

A transition is composed of two phases: Exit then Enter. A style for a phase can be constructed with this signature:

Float -> Style

where the Float is the clock of transition phase, varying linear from 0 to 1. A Style is just an alias to List (String, String).

A complete transition animation is constructed by composing exit and enter animations on a transition:

compose : (Float -> Style) -> (Float -> Style) -> Transition -> Style

It can then be used on a transition. Example for fade and left slide animation, with a 50px offset:

  div
    [ style (TransitStyle.fadeSlide 100 model.transition) ]
    [ text "Some content" ]

Example for fade and zoom animation with a 5% offset:

  div
    [ style (TransitStyle.fadeZoom 0.05 model.transition) ]
    [ text "Some content" ]

Credits

• Easings are backed by Easing package.