Animate any numeric CSS property not covered by the first-class property modules (Translate, Rotate, Scale etc.).
Default: 0
When no start value is configured, the default will be used.
Type alias for the animation group name.
A typed set of common numeric CSS properties with a custom escape hatch.
import Anim.Property.Custom as Property
import Anim.Unit exposing (Unit(..))
Property.begin (Property.LineHeight Em)
>> Property.to 1.4 -- Animate to "1.4em"
>> Property.end
Property.begin (Property.LineHeight Unitless)
>> Property.to 1.4 -- Animate to "1.4" - 1.4x the element's font-size
>> Property.end
Property.begin (Property.Custom "property-name" "unit")
>> Property.to 32 -- Animate to "32unit"
>> Property.endSet the initial value for a custom CSS property.
Use this to initialize the property in your Engine's init function.
import Anim.Engine.* as Engine
import Anim.Property.Custom as Property
import Anim.Unit exposing (Unit(..))
init : ( Model, Cmd Msg )
init =
( { animState =
Engine.init
[ Property.init "box" (BorderRadius Px) 0 ]
}
, Cmd.none
)Begin the animation configuration by turning an AnimBuilder into a custom property animation Builder.
import Anim.Unit exposing (Unit(..))
myAnimation : AnimBuilder eng -> AnimBuilder eng
myAnimation =
Property.begin (Property.BorderRadius Px)
>> Property.to 16
>> Property.endComplete the animation configuration and return an AnimBuilder.
Set the starting value.
Set the target value.
Move by a delta instead of to a fixed value. The end value is
current + delta, where current is the live animated value.
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 value.
import Anim.Property.Custom as Property
import Anim.Unit exposing (Unit(..))
myAnimation : AnimBuilder eng -> AnimBuilder eng
myAnimation =
Property.begin (Property.BorderRadius Px)
>> Property.by 4
>> Property.end📖 See Animation Timing for details.
Set the delay (milliseconds) before the animation starts.
Set the animation duration (milliseconds).
Set the animation speed (units per second).
📖 See Easing for details.
Set the easing function.
import Motion.Easing exposing (Easing(..))
Property.easing EaseInOut📖 See Spring for details.
Drive this property with a spring.
import Motion.Spring as Spring
Property.spring Spring.wobblyKeep property values 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
FontSizeChanged size ->
let
( animState, cmd ) =
WAAPI.animate model.animState <|
Custom.begin Px)
>> Custom.clamp 12 32
>> Custom.end
in
( { model | animState = animState }
, cmd
)Useful if to values are coming from external sources; user input, slider values, or external data
etc, and you need to keep them within a specific range.
Pairs well with by for relative animations where the delta could push the value outside the desired range.
Keep this CSS property's value within the min and max range.
If min > max, the values are swapped.
Remove the range for this CSS property. Does nothing if no range is set.
Snap the value silently, cancelling any in-flight animation on this property.
Builder type for custom property animations.