Animations in Elm are very natural, but require a couple of community libraries to do well. The first, animation-frame provides precise timing using the browser’s requestAnimationFrame callback. Using that precise timing, you can interpolate the values you want to animate between, and render your view on each tick. Interpolating those values is made much easier using elm-animation and easing-functions. Using these libraries, you can generate all sorts of proper-looking and buttery-smooth animations.
Samples
Main module
Html.program
{ -- …
, subscriptions = (\_ -> AnimationFrame.times CurrentTick)
}
update msg model =
FetchNewCard ->
let
animation = Animation.animation model.currentTick |> from 0 |> to 300 |> ease Ease.outQuart
in
{ model | animation = animation } ! []
CurrentTick time ->
{ model | currentTick = time } ! []
View module
xCoordinate = Animation.animate model.currentTick model.animation
animatingDiv =
div
[style [("left", (toString xCoordinate) ++ "px")]]
[text "This will animate"]
Links