How do i animate on mouse over in Elm-UI?

Question

I would like a simple wipe when hovering over a button. I figured out to use mouseOver to change the background on hover, but I am not sure how to create a wipe from one background to another. I am aware of elm-simple-animation, but I am too new to Elm to understand the docs..

Thanks!

Answer 1

This is surprisingly involved and part of it is I suspect that a proper transition library specifically designed around elm-ui is (AFAICT) still missing.

The basics steps are like this:

1. Define properties for the start and mouseOver states.
2. Figure out which properties these correspond to in elm-simple-animation.
3. Add a transition for those.

Element.Input.button
    [ Background.color (Element.rgb 0.5 0.5 0.6)
    , Element.mouseOver
        [ Background.color (Element.rgb 0.7 0.7 1)
        ]
    , Transition.properties
        [ Transition.backgroundColor 500 []
        ]
        |> Element.htmlAttribute
    ]
    { onPress = Nothing
    , label = Element.text "Hello"
    }

You can see a working example here.