mdgriffith / elm-animator / Animator.Inline

Render inline styles.

The best way is to play with the Checkbox example.

Note - At some point you should check out Animator.Css. It has a few benefits over inline styles.

Inline Styles

opacity : Animator.Timeline state -> (state -> Animator.Movement) -> Html.Attribute msg

Change the opacity for an element.

Here's what this looks like in practice.

div
    [ Animator.Inline.opacity model.checked <|
        \state ->
            if state then
                Animator.at 1

            else
                Animator.at 0
    ]
    [ Html.text "Hello!" ]

backgroundColor : Animator.Timeline state -> (state -> Color) -> Html.Attribute msg

textColor : Animator.Timeline state -> (state -> Color) -> Html.Attribute msg

borderColor : Animator.Timeline state -> (state -> Color) -> Html.Attribute msg

Transformations

xy : Animator.Timeline state -> (state -> { x : Animator.Movement, y : Animator.Movement }) -> Html.Attribute msg

rotate : Animator.Timeline state -> (state -> Animator.Movement) -> Html.Attribute msg

Rotate to a specific angle, where increasing numbers move clockwise.

The actual number provided should be in radians.

Alternatively you could use turns or degrees instead.

scale : Animator.Timeline state -> (state -> Animator.Movement) -> Html.Attribute msg

transform : { scale : Basics.Float, rotate : Basics.Float, position : { x : Basics.Float, y : Basics.Float } } -> Html.Attribute msg

Custom

If you can't find an attribute here, you might need to use Animator.Inline.style or Animator.Inline.color to create it!

style : Animator.Timeline state -> String -> (Basics.Float -> String) -> (state -> Animator.Movement) -> Html.Attribute msg

linear : Animator.Timeline state -> String -> (Basics.Float -> String) -> (state -> Animator.Movement) -> Html.Attribute msg

Sets the default to linear. See the note on Animator.linear for more details!

color : Animator.Timeline state -> String -> (state -> Color) -> Html.Attribute msg