phollyer/elm-motion/1.0.0

NOTE: the latest version is 3.0.4

Anim.Property.Scale

Scale elements along the X, Y, and Z axes.

Default: 1.0 (original size) for all axes

When no start value is configured, the default will be used.

Types

type alias Builder eng =
ScaleBuilder eng

Builder type for scale animations.

type alias AnimGroupName =
String

Type alias for the animation group name.

Initialize

init : AnimGroupName -> Float -> AnimBuilder eng -> AnimBuilder eng

Set the initial scale.

Use this to initialize the scale in your Engine's init function.

import Anim.Engine.* as Engine
import Anim.Property.Scale as Scale


init : ( Model, Cmd Msg )
init =
    ( { animState = Engine.init [ Scale.init "animGroupName" 1.5 ] }
    , Cmd.none
    )

This is equivalent to calling initXYZ 1.5 1.5 1.5.

AnimGroupName
-> Float
-> Float
-> Float
-> AnimBuilder eng
-> AnimBuilder eng

Set the initial X, Y, and Z scale.

import Anim.Engine.* as Engine
import Anim.Property.Scale as Scale


init : ( Model, Cmd Msg )
init =
    ( { animState = Engine.init [ Scale.initXYZ "animGroupName" 1.5 1.2 1.0 ] }
    , Cmd.none
    )
initXY : AnimGroupName -> Float -> Float -> AnimBuilder eng -> AnimBuilder eng

Set the initial X and Y scale.

import Anim.Engine.* as Engine
import Anim.Property.Scale as Scale


init : ( Model, Cmd Msg )
init =
    ( { animState = Engine.init [ Scale.initXY "animGroupName" 1.5 1.2 ] }
    , Cmd.none
    )
initXZ : AnimGroupName -> Float -> Float -> AnimBuilder eng -> AnimBuilder eng

Set the initial X and Z scale.

import Anim.Engine.* as Engine
import Anim.Property.Scale as Scale


init : ( Model, Cmd Msg )
init =
    ( { animState = Engine.init [ Scale.initXZ "animGroupName" 1.5 1.0 ] }
    , Cmd.none
    )
initX : AnimGroupName -> Float -> AnimBuilder eng -> AnimBuilder eng

Set the initial X scale.

import Anim.Engine.* as Engine
import Anim.Property.Scale as Scale


init : ( Model, Cmd Msg )
init =
    ( { animState = Engine.init [ Scale.initX "animGroupName" 1.5 ] }
    , Cmd.none
    )
initYZ : AnimGroupName -> Float -> Float -> AnimBuilder eng -> AnimBuilder eng

Set the initial Y and Z scale.

import Anim.Engine.* as Engine
import Anim.Property.Scale as Scale


init : ( Model, Cmd Msg )
init =
    ( { animState = Engine.init [ Scale.initYZ "animGroupName" 1.2 1.0 ] }
    , Cmd.none
    )
initY : AnimGroupName -> Float -> AnimBuilder eng -> AnimBuilder eng

Set the initial Y scale.

import Anim.Engine.* as Engine
import Anim.Property.Scale as Scale


init : ( Model, Cmd Msg )
init =
    ( { animState = Engine.init [ Scale.initY "animGroupName" 1.2 ] }
    , Cmd.none
    )
initZ : AnimGroupName -> Float -> AnimBuilder eng -> AnimBuilder eng

Set the initial Z scale.

import Anim.Engine.* as Engine
import Anim.Property.Scale as Scale


init : ( Model, Cmd Msg )
init =
    ( { animState = Engine.init [ Scale.initZ "animGroupName" 1.0 ] }
    , Cmd.none
    )

Build

begin : AnimBuilder eng -> Builder eng

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

Use this to start configuring a scale animation.

myAnimation : AnimBuilder eng -> AnimBuilder eng
myAnimation =
    Scale.begin
        >> ... -- Configure and build the animation
end : Builder eng -> AnimBuilder eng

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

Configure

Start Value

When not set, the default will be used.

📖 See Start Values for details.

from : Float -> Builder eng -> Builder eng

Set the starting scale (uniform across all axes).

myAnimation : AnimBuilder eng -> AnimBuilder eng
myAnimation =
    Scale.begin
        >> Scale.from 0.8
        >> ... -- continue with animation

This is equivalent to Scale.fromXYZ 0.8 0.8 0.8.

fromXYZ : Float -> Float -> Float -> Builder eng -> Builder eng

Set the starting X, Y, and Z scale.

myAnimation : AnimBuilder eng -> AnimBuilder eng
myAnimation =
    Scale.begin
        >> Scale.fromXYZ 0.8 1.2 0.9
        >> ... -- continue with animation
fromXY : Float -> Float -> Builder eng -> Builder eng

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

fromXZ : Float -> Float -> Builder eng -> Builder eng

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

fromX : Float -> Builder eng -> Builder eng

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

fromYZ : Float -> Float -> Builder eng -> Builder eng

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

fromY : Float -> Builder eng -> Builder eng

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

fromZ : Float -> Builder eng -> Builder eng

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

End Value

📖 See End Values for details.

Absolute

to : Float -> Builder eng -> Builder eng

Set the target scale (uniform across all axes).

myAnimation : AnimBuilder eng -> AnimBuilder eng
myAnimation =
    Scale.begin
        >> Scale.to 1.5
        >> ... -- continue with animation

This is equivalent to toXYZ 1.5 1.5 1.5.

toXYZ : Float -> Float -> Float -> Builder eng -> Builder eng

Set the target X, Y, and Z scale.

myAnimation : AnimBuilder eng -> AnimBuilder eng
myAnimation =
    Scale.begin
        >> Scale.toXYZ 1.5 2.0 0.8
        >> ... -- continue with animation
toXY : Float -> Float -> Builder eng -> Builder eng

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

toXZ : Float -> Float -> Builder eng -> Builder eng

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

toX : Float -> Builder eng -> Builder eng

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

toYZ : Float -> Float -> Builder eng -> Builder eng

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

toY : Float -> Builder eng -> Builder eng

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

toZ : Float -> Builder eng -> Builder eng

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

Relative

Move by a delta instead of to a fixed scale. The end value is current + delta where current is the live animated scale.

Only available on the Sub and WAAPI engines. Using these with any other engine results in a type error.

byXYZ : Float -> Float -> Float -> Builder eng -> Builder eng

Move by a delta on the X, Y, and Z axes.

byXY : Float -> Float -> Builder eng -> Builder eng

Move by a delta on the X and Y axes. Z is unaffected.

byXZ : Float -> Float -> Builder eng -> Builder eng

Move by a delta on the X and Z axes. Y is unaffected.

byX : Float -> Builder eng -> Builder eng

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

byYZ : Float -> Float -> Builder eng -> Builder eng

Move by a delta on the Y and Z axes. X is unaffected.

byY : Float -> Builder eng -> Builder eng

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

byZ : Float -> Builder eng -> Builder eng

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

Timing

📖 See Animation Timing for details.

Int
-> Builder { eng | withTiming : () }
-> Builder { eng | withTiming : () }

Set the delay (milliseconds) before the animation starts.

Int
-> Builder { eng | withTiming : () }
-> Builder { eng | withTiming : () }

Set the animation duration (milliseconds).

Float
-> Builder { eng | withTiming : () }
-> Builder { eng | withTiming : () }

The speed represents how much the scale factor changes per second.

For example, a scale animation from 1.0 to 5.0 with a speed of 2.0 will take 2 seconds to complete.

Easing

📖 See Easing for details.

easing : Easing -> Builder eng -> Builder eng

Set the easing function for the animation.

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


Scale.easing EaseInOut

Spring

📖 See Spring for details.

Spring
-> Builder { eng | withSpring : () }
-> Builder { eng | withSpring : () }

Drive this property with a spring.

import Motion.Spring as Spring


Scale.spring Spring.wobbly

Responsive Animations

📖 See Responsive Animations for patterns and examples.

Bounds

Keep scale 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 be remapped proportionally inside the bounds.

type alias Bounds =
{ min : Float
, max : Float
}

A numeric range with min and max boundaries.

type alias AxisBounds =
{ x : Maybe Bounds
, y : Maybe Bounds
, z : Maybe Bounds
}

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

{ x = Just { min = 1, max = 2 }
, y = Nothing
, z = Nothing
}
AnimGroupName
-> AxisBounds
-> AnimBuilder { eng | withBounds : () }
-> AnimBuilder { eng | withBounds : () }

Apply new scale bounds for an anim group during resize.

Pass this inside an engine's onResize builder:

Sub.onResize model.animState <|
    Scale.bounds "cube"
        { x = Just { min = 1, max = newWidth / cubeSize }
        , y = Just { min = 1, max = newHeight / cubeSize }
        , z = Nothing
        }

You can set the bounds for multiple anim groups in one call:

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

Clamping

Keep scale 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:

motion : Scale.Builder { eng | withTiming : () } -> Scale.Builder { eng | withTiming : () }
motion =
    Scale.duration 600
        >> Scale.easing Easing.easeOutCubic


update msg model =
    case msg of
        ZoomChanged factor ->
            let
                ( animState, cmd ) =
                    WAAPI.retarget model.animState <|
                        Scale.begin
                            >> Scale.clampX 0.5 2.0
                            >> Scale.clampY 0.5 2.0
                            >> Scale.toXY factor factor
                            >> Scale.end
            in
            ( { model | animState = animState }
            , cmd
            )

Clamp

clampX : Float -> Float -> Builder eng -> Builder eng

Keep the X axis scale within min and max values. If min > max the values are flipped.

clampY : Float -> Float -> Builder eng -> Builder eng

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

clampZ : Float -> Float -> Builder eng -> Builder eng

Keep the Z axis scale within min and max values. If min > max the values are flipped.

Unclamp

unclampX : Builder eng -> Builder eng

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

unclampY : Builder eng -> Builder eng

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

unclampZ : Builder eng -> Builder eng

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

Snap

Snap to a specific scale, cancelling any in-flight animation on this property.

set : Float -> Builder eng -> Builder eng

Snap to a uniform scale on all three axes silently, cancelling any in-flight animation on this property.

setXYZ : Float -> Float -> Float -> Builder eng -> Builder eng

Snap target X, Y and Z scales.

setXY : Float -> Float -> Builder eng -> Builder eng

Snap target X and Y scales, preserving the current Z scale.

setXZ : Float -> Float -> Builder eng -> Builder eng

Snap target X and Z scales, preserving the current Y scale.

setX : Float -> Builder eng -> Builder eng

Snap target X scale, preserving the current Y and Z scales.

setYZ : Float -> Float -> Builder eng -> Builder eng

Snap target Y and Z scales, preserving the current X scale.

setY : Float -> Builder eng -> Builder eng

Snap target Y scale, preserving the current X and Z scales.

setZ : Float -> Builder eng -> Builder eng

Snap target Z scale, preserving the current X and Y scales.