Animate the CSS perspective-origin property, which controls the vanishing point
for 3D transforms applied to a parent element.
Default unit: %.
Default value: 50% 50% (center of the element)
Note: This module is for animating perspective-origin, if all you need is to
set a static perspective-origin, use the
View3D.perspectiveOrigin function instead, or
set the style attribute yourself in your view.
Type alias for the animation group name.
Set the initial perspective origin on both axes.
import Anim.Engine.* as Engine
import Anim.Property.PerspectiveOrigin as PerspectiveOrigin
init : ( Model, Cmd Msg )
init =
( { animState = Engine.init [ PerspectiveOrigin.initXY "animGroupName" 50 50 ] }
, Cmd.none
)Set the initial X-axis perspective origin.
Set the initial Y-axis perspective origin.
Turn the AnimBuilder into a perspective origin animation Builder for the specified animation group.
Use this to start configuring a perspective origin animation.
myAnimation : AnimBuilder eng -> AnimBuilder eng
myAnimation =
PerspectiveOrigin.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 =
PerspectiveOrigin.begin
>> ... -- configure the animation with from, to, duration, easing, etc.
>> PerspectiveOrigin.end
>> ... -- continue with animationSet the uniform starting X and Y values.
Set the starting X and Y values.
Set the starting X value, preserving the current Y value.
Set the starting Y value, preserving the current X value.
Set the uniform target X and Y values.
Set the target X and Y values.
Set the target X value, preserving the current Y value.
Set the target Y value, preserving the current X value.
Move by a delta instead of to a fixed perspective origin. The end value is
current + delta where current is the live animated position.
Only available on the Sub and WAAPI engines. Using these with any other engine results in a type error.
Move by a delta on both axes.
Move by a delta on the X and Y axes.
Move by a delta on the X axis. Y is unaffected.
Move by a delta on the Y axis. X 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 per second the perspective origin changes.
For example, an animation from 0 to 200px with a speed of 100.0
will take 2 seconds to complete.
📖 See Easing for details.
Set the easing function for the animation.
import Motion.Easing exposing (Easing(..))
PerspectiveOrigin.easing EaseInOut📖 See Spring for details.
Drive this property with a spring.
import Motion.Spring as Spring
PerspectiveOrigin.spring Spring.wobblyInitialize the CSS Unit for both axes.
import Anim.Engine.Keyframe as Keyframe
import Anim.Property.PerspectiveOrigin as PerspectiveOrigin
import Anim.Unit as Unit
Keyframe.init
[ PerspectiveOrigin.initXY "animGroupName" 200 150
>> PerspectiveOrigin.initCssUnit Unit.Cqw
]Initialize the CSS Unit for the X axis.
Initialize the CSS Unit for the Y axis.
Set the CSS Unit for one or both axes. This will also affect all future animations for the associated anim group.
Set the CSS Unit for both axes.
import Anim.Property.PerspectiveOrigin as PerspectiveOrigin
import Anim.Unit as Unit
PerspectiveOrigin.begin
>> PerspectiveOrigin.cssUnit Unit.Cqh
>> ... -- configure the animationWhen using responsive units like % or Cqw, the animation automatically responds
to changes in screen or container size without extra configuration. However, when
using fixed units like Px, the animation needs to be made aware of size changes
in order to respond to them. This is done with the functions below.
📖 See Responsive Animations for patterns and examples.
Keep perspective origin values within a range you choose. Values outside the range are clamped to the nearest boundary. An animation that is within the bounds, either mid-flight or paused, will me remapped proportionally inside the bounds.
A numeric range with min and max boundaries.
Per-axis resize ranges. Nothing leaves an axis untouched.
z is ignored for this property.
{ x = Just { min = 0, max = 100 }
, y = Nothing
, z = Nothing
}Apply new perspective-origin bounds for an anim group during resize.
Pass this inside an engine's onResize builder:
Sub.onResize model.animState <|
PerspectiveOrigin.bounds "box"
{ x = Just { min = 0, max = newWidth - boxSize }
, y = Nothing
, z = Nothing
}You can set the bounds for multiple anim groups in one call:
Sub.onResize model.animState <|
PerspectiveOrigin.bounds "box" boxBounds
>> PerspectiveOrigin.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 perspective-origin values on each axis 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
GotCard (Ok { element }) ->
let
w =
element.width
h =
element.height
( animState, cmd ) =
WAAPI.retarget model.animState <|
PerspectiveOrigin.begin
>> PerspectiveOrigin.clampX 0 w
>> PerspectiveOrigin.clampY 0 h
>> PerspectiveOrigin.end
in
( { model | animState = animState }
, cmd
)Keep the X axis perspective-origin within min and max values. If min > max the values are flipped.
Keep the Y axis perspective-origin within min and max values. If min > max the values are flipped.
Remove the X axis range for this animation group. Does nothing if no range is set.
Remove the Y axis range for this animation group. Does nothing if no range is set.
Snap to a specific perspective origin, cancelling any in-flight animation on this property.
Snap to a uniform X and Y value.
Snap target X and Y values.
Snap target X value, preserving the current Y value.
Snap target Y value, preserving the current X value.
Builder type for perspective-origin animations.