In this episode, we use mdgriffith/elm-style-animation to create a basic animation that animates two properties of an element and then reverses it.
We covered animations and the mgold/elm-animation library in Episode 006, but I wanted to show off elm-style-animation, which is more powerful and requires a little less code when doing advanced animations.
Examples
Main.elm
ToggleMenu ->
let
tos =
if model.isMenuOpen then
[ Animation.top (Animation.rem -4)
, Animation.opacity 0.0
]
else
[ Animation.top (Animation.rem 0)
, Animation.opacity 1.0
]
menuStyle =
Animation.interrupt [ Animation.to tos ] model.menuStyle
in
{ model | isMenuOpen = not model.isMenuOpen, menuStyle = menuStyle } ! []
Animate msg ->
let
updated =
{ model | menuStyle = Animation.update msg model.menuStyle }
in
updated ! []
View.elm
navView : Model -> Html Msg
navView model =
let
styles =
Animation.render model.menuStyle
attributes =
class "submenu" :: styles
in
div attributes [ text "Navigation" ]
Links