Animate the width and height of elements.
Default: 0 for width and height
When no start value is configured, the default will be used.
If height or width is not defined in the animation configuration, it will remain unchanged, or 0 if not set.
Type alias for the animation group name.
Set the initial size.
Use this to initialize the size in your Engine's init function.
import Anim.Engine.* as Engine
import Anim.Property.Size as Size
init : ( Model, Cmd Msg )
init =
( { animState = Engine.init [ Size.init "animGroupName" 100 ] }
, Cmd.none
)This is equivalent to calling initHW 100 100.
Set the initial width and height.
import Anim.Engine.* as Engine
import Anim.Property.Size as Size
init : ( Model, Cmd Msg )
init =
( { animState = Engine.init [ Size.initHW "animGroupName" 200 100 ] }
, Cmd.none
)Set the initial width.
import Anim.Engine.* as Engine
import Anim.Property.Size as Size
init : ( Model, Cmd Msg )
init =
( { animState = Engine.init [ Size.initW "animGroupName" 200 ] }
, Cmd.none
)Set the initial height.
import Anim.Engine.* as Engine
import Anim.Property.Size as Size
init : ( Model, Cmd Msg )
init =
( { animState = Engine.init [ Size.initH "animGroupName" 150 ] }
, Cmd.none
)Turn the AnimBuilder into a size animation Builder for the specified animation group.
Use this to start configuring a size animation.
myAnimation : AnimBuilder eng -> AnimBuilder eng
myAnimation =
Size.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 =
Size.begin
>> ... -- configure the animation with from, to, duration, easing, etc.
>> Size.end
>> ... -- continue with animationSet the starting height and width.
myAnimation : AnimBuilder eng -> AnimBuilder eng
myAnimation =
Size.begin
>> Size.fromHW 200 100
>> ... -- continue with animationSet the starting height. Width is left unchanged (or 0 if not set).
Set the starting width. Height is left unchanged (or 0 if not set).
Set both starting width and height to the same value.
This is equivalent to calling fromHW value value.
Set the target height and width.
myAnimation : AnimBuilder eng -> AnimBuilder eng
myAnimation =
Size.begin
>> Size.toHW 200 100
>> ... -- continue with animationSet the target height. Width is left unchanged (or 0 if not set).
Set the target width. Height is left unchanged (or 0 if not set).
Move by a delta on width and height instead of to a fixed size. The end value
is current + delta where current is the live animated size.
Only available on the Sub and WAAPI engines. Using these with any other engine results in a type error.
Move by a delta on height and width.
Move by a delta on height. Width is unaffected.
Move by a delta on width. Height is unaffected.
📖 See Animation Timing for details.
Set the delay (milliseconds) before the animation starts.
Set the animation duration (milliseconds).
The speed represents how many units the element's size changes per second.
For example, a size animation from (100, 100) to (200, 200) with a speed
of 50.0 will take 2 seconds to complete.
📖 See Easing for details.
Set the easing function for the animation.
import Motion.Easing exposing (Easing(..))
Size.easing EaseInOut📖 See Spring for details.
Drive this property with a spring.
import Motion.Spring as Spring
Size.spring Spring.wobblyInitialize the CSS Unit for all sides.
import Anim.Engine.Keyframe as Keyframe
import Anim.Property.Size as Size
import Anim.Unit as Unit
Keyframe.init
[ Size.initHW "animGroupName" 8 25
>> Size.initCssUnit Unit.Cqmin
]Initialize the CSS Unit for the width.
Initialize the CSS Unit for the height.
Set the CSS Unit for one or both sides. This will also affect all future animations for the associated anim group.
Set the CSS Unit for both sides.
import Anim.Property.Size as Size
import Anim.Unit as Unit
Size.begin
>> Size.cssUnit Unit.Cqmin
>> ... -- continue with animation📖 See Responsive Animations for patterns and examples.
Proportionally remap an in-flight size animation onto new width / height
ranges from inside an engine's onResize callback.
A numeric range with min and max boundaries.
Per-axis resize ranges. Nothing leaves an axis untouched.
{ width = Just { min = 0, max = 400 }
, height = Nothing
}Apply new size bounds for an anim group during resize.
Pass this inside an engine's onResize builder:
Sub.onResize model.animState <|
Size.bounds "box"
{ width = Just { min = 0, max = newWidth }
, height = Just { min = 0, max = newHeight }
}You can set the bounds for multiple anim groups in one call:
Sub.onResize model.animState <|
Size.bounds "box" boxBounds
>> Size.bounds "card" cardBoundsThe engine proportionally remaps the in-flight animation onto the new range and pins its endpoints to it.
Only callable from inside an engine's onResize builder - calling it from
anywhere else results in a type error.
Keep width and height within a range you choose.
Values outside the range are clamped to the nearest boundary.
Similar to bounds, but without proportional remapping.
The range stays in effect for future animations until you Unclamp it:
update msg model =
case msg of
GotContainer (Ok { element }) ->
let
w =
element.width
h =
element.height
( animState, cmd ) =
WAAPI.retarget model.animState <|
Size.begin
>> Size.clampWidth 0 w
>> Size.clampHeight 0 h
>> Size.end
in
( { model | animState = animState }
, cmd
)Keep width within min and max values. If min > max the values are flipped.
Keep height within min and max values. If min > max the values are flipped.
Remove the width range for this animation group. Does nothing if no range is set.
Remove the height range for this animation group. Does nothing if no range is set.
Snap to a specific size, cancelling any in-flight animation on this property.
Snap to a uniform width and height.
Snap target height and width values.
Snap target height, preserving the current width.
Snap target width, preserving the current height.
Builder type for size animations.