This library is for animating css properties and is meant to work well with elm-html.
The easiest way to get started with this library is to check out the examples that are included with the source code.
Once you have the basic structure of how to use this library, you can refer to this documentation to fill any gaps.
Begin describing an animation. This animation will cleanly interrupt any animation that is currently running.
Style.animate
|> Style.duration (0.4*second)
|> Style.to
[ Left 0 Px
, Opacity 1
]
|> Style.on model.styleThe same as animate but instead of interrupting the current animation, this will queue up after the current animation is finished.
Style.queue
|> Style.duration (0.4*second)
|> Style.to
[ Left (Style.to 0) Px
, Opacity (Style.to 1)
]
|> Style.on model.styleSpecify a delay. If not specified, the default is 0.
Style.animate
|> Style.duration (0.4*second)
|> Style.delay (0.5*second)
|> Style.to
[ Left 0 Px
, Opacity 1
]
|> Style.on model.styleAnimate based on spring physics.
You'll need to provide both a stiffness and a dampness to this function.
Note: This will cause both duration and easing to be ignored as they are now controlled by the spring.
Style.animate
-- |> Style.spring Style.noWobble -- set using a UI preset
|> Style.spring
{ stiffness = 400
, damping = 28
}
|> Style.to
[ Left (Style.to 0) Px
, Opacity (Style.to 1)
]
|> Style.on model.styleSpecify a duration. This is ignored unless an easing is specified as well! This is because spring functions (the default), have dynamically created durations.
If an easing is specified but no duration, the default duration is 350ms.
Style.animate
|> Style.easing (\x -> x) -- linear easing
|> Style.duration (0.4*second)
|> Style.to
[ Left 0 Px
, Opacity 1
]
|> Style.on model.styleSpecify an easing function. It is expected that values should match up at the beginning and end. So, f 0 == 0 and f 1 == 1. The default easing is sinusoidal in-out.
Append another keyframe. This is used for multistage animations.
For example, to cycle through colors, we'd use the following:
Style.animate
|> Style.to
[ BackgroundColor
Style.toRGBA 100 100 100 1.0
]
|> Style.andThen -- create a new keyframe
|> Style.duration (1*second)
|> Style.to
[ BackgroundColor
Style.toRGBA 178 201 14 1.0
]
|> Style.andThen
|> Style.to
[ BackgroundColor
Style.toRGBA 58 40 69 1.0
]
|> Style.on model.styleAnimate to a statically specified style.
Apply a style immediately. This takes a list of static style properties, meaning the no Style.to functions, only concrete numbers and values.
Style.animate
|> Style.duration (0.4*second)
|> Style.to
[ Opacity (Style.to 1)
]
|> Style.andThen
|> Style.set
[ Display None
]
|> Style.on model.styleUpdate a style based on it's previous value.
Style.animate
|> Style.update
(\index prev =
case prev of
Cx cx ->
Cx (cx + 1)
Cy cy ->
Cy (cy + 1)
_ -> prev
)
|> Style.on model.styleindex is the number of times that property has occurred in the stack.
This can be useful when stacking transforms and you only want to update the 2nd Rotate in the stack.
Refer to the stacking transforms example for more information.
Render into concrete css that can be directly applied to 'style' in elm-html
div [ style Style.render widget.style) ] [ ]Render into svg attributes.
polygon (Style.renderAttr widget.style) [ ]Create an initial style for your init model.
Note All properties that you animate must be present in the init or else that property won't be animated.
Apply an update to a Animation model.
Style.animate
|> Style.duration (0.4*second)
|> Style.to
[ Left 0 Px
, Opacity 1
]
|> Style.on model.styleStep the animation
An Animation of CSS properties.