Animate the opacity of elements.
Default: 1.0 (fully opaque)
When no start value is configured, the default will be used.
Type alias for the animation group name.
Set the initial opacity.
Use this to initialize the opacity in your Engine's init function.
import Anim.Engine.* as Engine
import Anim.Property.Opacity as Opacity
init : ( Model, Cmd Msg )
init =
( { animState = Engine.init [ Opacity.init "animGroupName" 0.5 ] }
, Cmd.none
)Turn the AnimBuilder into an opacity animation Builder for the specified animation group.
Use this to start configuring an opacity animation.
myAnimation : AnimBuilder eng -> AnimBuilder eng
myAnimation =
Opacity.begin
>> ... -- Configure and build the animationComplete the Builder animation configuration and return an AnimBuilder
so you can continue configuring other property animations or execute the animation with an Engine.
myAnimation : AnimBuilder eng -> AnimBuilder eng
myAnimation =
Opacity.begin
>> ... -- configure the animation with from, to, duration, easing, etc.
>> Opacity.end
>> ... -- continue with animationSet the starting opacity.
myAnimation : AnimBuilder eng -> AnimBuilder eng
myAnimation =
Opacity.begin
>> Opacity.from 1.0
>> ... -- continue with animationSet the target opacity for the current animation group.
myAnimation : AnimBuilder eng -> AnimBuilder eng
myAnimation =
Opacity.begin
>> Opacity.to 0.5
>> ... -- continue with animationMove by a delta instead of to a fixed opacity. The end value is
current + delta where current is the live animated opacity.
Only available on the Sub and WAAPI engines. Using these with any other engine results in a type error.
Move by a delta instead of to a fixed opacity.
myAnimation : AnimBuilder eng -> AnimBuilder eng
myAnimation =
Opacity.begin
>> Opacity.by 0.25
>> ... -- continue with animation📖 See Animation Timing for details.
Set the delay (milliseconds) before the animation starts.
Set the animation duration (milliseconds).
The speed represents how much the opacity value changes per second.
Since opacity ranges from 0.0 (transparent) to 1.0 (opaque), a speed of 2.0
means the opacity will change by 2.0 units per second (e.g., from 0.0 to 1.0
takes 0.5 seconds).
📖 See Easing for details.
Set the easing function for the animation.
import Motion.Easing exposing (Easing(..))
Opacity.easing EaseInOut📖 See Spring for details.
Drive this property with a spring.
import Motion.Spring as Spring
Opacity.spring Spring.wobblyKeep opacity within a range you choose.
Values outside the range are clamped to the nearest boundary.
The range stays in effect for future animations until you Unclamp it:
update msg model =
case msg of
HoverEnded ->
let
( animState, cmd ) =
WAAPI.animate model.animState <|
Opacity.begin
>> Opacity.clamp 0.2 1.0
>> Opacity.end
in
( { model | animState = animState }
, cmd
)Keep opacity within min and max values. If min > max the values are flipped.
Remove the opacity range for this animation group. Does nothing if no range is set.
Snap to a specific opacity, cancelling any in-flight animation on this property.
Snap the opacity to a specific value.
Builder type for opacity animations.