6

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!

Brock
  • 925
  • 5
  • 9

1 Answers1

5

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.

Jakub Hampl
  • 39,863
  • 10
  • 77
  • 106
  • Perfect answer thanks! Just adding this link to help people with step 2 https://package.elm-lang.org/packages/andrewMacmurray/elm-simple-animation/latest/Simple-Transition – Brock Apr 09 '21 at 16:16