Animations styles for elm-transit
Switch branches/tags
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-package.json

README.md

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.