Elm Transit Style
elm install etaque/elm-transit-style
How it works
A transition is composed of two phases:
Enter. A style for a phase can be constructed with this signature:
Float -> List (Attribute msg)
Float is the clock of transition phase, varying linear from 0 to 1.
A complete transition animation is constructed by composing exit and enter animations on a transition:
compose : (Float -> List (Attribute msg)) -> (Float -> List (Attribute msg)) -> Transition -> List (Attribute msg)
It can then be used on a transition. Example for fade and left slide animation, with a 50px offset:
div ( TransitStyle.fadeSlide 100 model.transition ) [ text "Some content" ]
Example for fade and zoom animation with a 5% offset:
div ( TransitStyle.fadeZoom 0.05 model.transition ) [ text "Some content" ]
- Easings are backed by Easing package.