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 : Timeline state -> (state -> Movement) -> 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 : Timeline state -> (state -> Color) -> Attribute msg

textColor : Timeline state -> (state -> Color) -> Attribute msg

borderColor : Timeline state -> (state -> Color) -> Attribute msg

Transformations

xy :

Timeline state

-> ( state

-> { x : Movement

, y : Movement

}

)

-> Attribute msg

rotate : Timeline state -> (state -> Movement) -> 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 : Timeline state -> (state -> Movement) -> Attribute msg

transform :

{ scale : Float

, rotate : Float

, position :

{ x : Float

, y : Float

}

-> 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 :

Timeline state

-> String

-> (Float -> String)

-> (state -> Movement)

-> Attribute msg

linear :

Timeline state

-> String

-> (Float -> String)

-> (state -> Movement)

-> Attribute msg

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

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

mdgriffith/elm-animator/1.1.1

Animator.Inline

Inline Styles

Transformations

Custom

Modules