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