transition : Duration -> List Attribute -> Animation
import Animator as Anim
import Html
import Html.Attributes
Anim.div
(Anim.transition (Anim.ms 200)
[ Anim.opacity <|
if model.visible then
1
else
0
]
)
[ Html.Attributes.id "my-element" ]
[ Html.text "Hello!" ]
Internal.Css.Prop
opacity : Basics.Float -> Attribute
rotation : Basics.Float -> Attribute
x : Basics.Float -> Attribute
y : Basics.Float -> Attribute
scale : Basics.Float -> Attribute
scaleX : Basics.Float -> Attribute
scaleY : Basics.Float -> Attribute
color : String -> Color -> Attribute
px : String -> Basics.Float -> Attribute
int : String -> Basics.Float -> Attribute
float : String -> Basics.Float -> Attribute
withBezier : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Attribute -> Attribute
withImpulse : Basics.Float -> Attribute -> Attribute
When transitioning to this state, start with a little extra velocity!
This takes a number from 0-1.
Internal.Time.Duration
Choosing a nice duration can depend on:
So, start with a nice default and adjust it as you start to understand your specific needs.
Note — Here's a very good overview on animation durations and speeds.
ms : Basics.Float -> Duration
delay : Duration -> Animation -> Animation
Here are some premade animations.
There's nothing special about them, they're just convenient!
Check out how they're defined if you want to make your own.
spinning : Duration -> Animation
pulsing : Duration -> Animation
bouncing : Duration -> Basics.Float -> Animation
pinging : Duration -> Animation
You may want something more involved than a single step transition.
Here's an element that's blinking.
import Animator as Anim
import Html
import Html.Attributes
Anim.div
(Anim.loop
[ Anim.step (Anim.ms 200)
[ Anim.opacity 1
]
, Anim.wait (Anim.ms 200)
, Anim.step (Anim.ms 200)
[ Anim.opacity 0
]
]
)
[ Html.Attributes.id "my-element" ]
[ Html.text "Hello!" ]
set : List Attribute -> Step
wait : Duration -> Step
step : Duration -> List Attribute -> Step
keyframes : List Step -> Animation
loop : List Step -> Step
loopFor : Basics.Int -> List Step -> Step
onTimeline : Timeline state -> (state -> List Attribute) -> Animation
Animate an element on a specific timeline. Check out Animator.Timeline
for more details.
This will
import Animator as Anim
import Html
import Html.Attributes
Anim.div
(Anim.onTimeline model.timeline
(\state ->
if state.open
[ Anim.opacity 1
]
else
[ Anim.opacity 0
, Anim.x -200
]
)
)
[ Html.Attributes.id "my-element" ]
[ Html.text "Hello!" ]
onTimelineWith : Timeline state -> (state -> ( List Attribute, List Step )) -> Animation
div : Animation -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Html.Styled.Html msg
node : String -> Animation -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Html.Styled.Html msg
{ hash : String
, keyframes : String
, props : List ( String
, String )
}
css : Timeline state -> (state -> ( List Attribute, List Step )) -> Css