Builder type for translate animations.

Type alias for the animation group name.

Set the initial X, Y, and Z position.

import Anim.Engine.* as Engine
import Anim.Property.Translate as Translate


init : ( Model, Cmd Msg )
init =
    ( { animState = Engine.init [ Translate.initXYZ "animGroupName" 100 20 50 ] }
    , Cmd.none
    )

Set the initial X and Y position.

Set the initial X and Z position.

Set the initial X position.

Set the initial Y and Z position.

Set the initial Y position.

Set the initial Z position.

Turn the AnimBuilder into a translate animation Builder for the specified animation group.

Use this to start configuring a translate animation.

myAnimation : AnimBuilder eng -> AnimBuilder eng
myAnimation =
    Translate.begin
        >> ... -- Configure and build the animation

Complete 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 =
    Translate.begin
        >> ... -- configure the animation with from, to, duration, easing, etc.
        >> Translate.end
        >> ... -- continue with animation

Set the starting X, Y, and Z position.

myAnimation : AnimBuilder eng -> AnimBuilder eng
myAnimation =
    Translate.begin
        >> Translate.fromXYZ 100 20 50
        >> ... -- continue with animation

Set the starting X and Y position. Z is left unchanged (or 0 if not set).

Set the starting X and Z position. Y is left unchanged (or 0 if not set).

Set the starting X position. Y and Z are left unchanged (or 0 if not set).

Set the starting Y and Z position. X is left unchanged (or 0 if not set).

Set the starting Y position. X and Z are left unchanged (or 0 if not set).

Set the starting Z position. X and Y are left unchanged (or 0 if not set).

Set the target X, Y, and Z position for the current animation group.

Set the target X and Y position. Z is left unchanged (or 0 if not set).

Set the target X and Z position. Y is left unchanged (or 0 if not set).

Set the target X position. Y and Z are left unchanged (or 0 if not set).

Set the target Y and Z position. X is left unchanged (or 0 if not set).

Set the target Y position. X and Z are left unchanged (or 0 if not set).

Set the target Z position. X and Y are left unchanged (or 0 if not set).

Move by specific amounts on the X, Y, and Z axes.

myAnimation : AnimBuilder { eng | withLiveDelta : () } -> AnimBuilder { eng | withLiveDelta : () }
myAnimation =
    Translate.begin
        >> Translate.byXYZ 50 -25 10
        >> ... -- continue with animation

Move by specific amounts on the X and Y axes. Z is unaffected.

Move by specific amounts on the X and Z axes. Y is unaffected.

Move by a specific amount on the X axis. Y and Z are unaffected.

Move by specific amounts on the Y and Z axes. X is unaffected.

Move by a specific amount on the Y axis. X and Z are unaffected.

Move by a specific amount on the Z axis. X and Y are unaffected.

Set the delay (milliseconds) before the animation starts.

Set the animation duration (milliseconds).

The speed represents how many Units the element moves per second.

So if the CSS Unit is Px and the speed is 100, the element will move 100 pixels per second, likewise, if the CSS Unit is Cqw and the speed is 100, the element will move 100% of it's container's width per second.

Set the easing function for the animation.

import Motion.Easing exposing (Easing(..))


Translate.easing EaseInOut

Drive this property with a spring.

import Motion.Spring as Spring


Translate.spring Spring.wobbly

Initialize the CSS Unit for all axes.

import Anim.Engine.Keyframe as Keyframe
import Anim.Property.Translate as Translate
import Anim.Unit as Unit


Keyframe.init
    [ Translate.initX "animGroupName" 50
        >> Translate.initCssUnit Cqw
    ]

Initialize the CSS Unit for the X axis.

Initialize the CSS Unit for the Y axis.

Initialize the CSS Unit for the Z axis.

Set the CSS Unit for all axes.

import Anim.Property.Translate as Translate
import Anim.Unit as Unit


Translate.begin
    >> Translate.cssUnit Unit.Cqw
    >> ... -- configure the animation

Set the CSS Unit for the X axis.

Set the CSS Unit for the Y axis.

Set the CSS Unit for the Z axis.

A numeric range with min and max boundaries.

Per-axis resize ranges. Nothing leaves an axis untouched.

{ x = Just { min = 0, max = 100 }
, y = Nothing
, z = Nothing
}

Apply new translate bounds for an anim group during resize.

Pass this inside an engine's onResize builder:

Sub.onResize model.animState <|
    Translate.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 <|
    Translate.bounds "box" boxBounds
        >> Translate.bounds "card" cardBounds

The 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 the X axis translate within min and max values. If min > max the values are flipped.

Keep the Y axis translate within min and max values. If min > max the values are flipped.

Keep the Z axis translate 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.

Remove the Z axis range for this animation group. Does nothing if no range is set.

Snap target X, Y and Z values silently

Snap target X and Y values, preserving the current Z value.

Snap target X and Z values, preserving the current Y value.

Snap target X value, preserving the current Y and Z values.

Snap target Y and Z values, preserving the current X value.

Snap target Y value, preserving the current X and Z values.

Snap target Z value, preserving the current X and Y values.