Skew elements along the X and Y axes.
Default: 0 degrees for both axes
When no start value is configured for any axis, the default will be used.
Type alias for the animation group name.
Set the initial X and Y skew.
import Anim.Engine.* as Engine
import Anim.Property.Skew as Skew
init : ( Model, Cmd Msg )
init =
( { animState = Engine.init [ Skew.initXY "animGroupName" 12 6 ] }
, Cmd.none
)Set the initial X skew.
import Anim.Engine.* as Engine
import Anim.Property.Skew as Skew
init : ( Model, Cmd Msg )
init =
( { animState = Engine.init [ Skew.initX "animGroupName" 12 ] }
, Cmd.none
)Set the initial Y skew.
import Anim.Engine.* as Engine
import Anim.Property.Skew as Skew
init : ( Model, Cmd Msg )
init =
( { animState = Engine.init [ Skew.initY "animGroupName" 8 ] }
, Cmd.none
)Turn the AnimBuilder into a skew animation Builder for the specified animation group.
Use this to start configuring a skew animation.
myAnimation : AnimBuilder eng -> AnimBuilder eng
myAnimation =
Skew.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 =
Skew.begin
>> ... -- configure the animation with from, to, duration, easing, etc.
>> Skew.end
>> ... -- continue with animationSet the starting X and Y skew (degrees).
Set the starting X skew (degrees). Y is left unchanged (or 0 if not set).
Set the starting Y skew (degrees). X is left unchanged (or 0 if not set).
Set the target X and Y skew (degrees).
Set the target X skew (degrees). Y is left unchanged (or 0 if not set).
Set the target Y skew (degrees). X is left unchanged (or 0 if not set).
Move by a delta instead of to a fixed skew. The end value
is current + delta where current is the live animated skew.
Only available on the Sub and WAAPI engines. Using these with any other engine results in a type error.
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 degrees the skew changes per second.
For example, a skew animation from 0 to 30 degrees with a speed of 15.0
will take 2 seconds to complete.
📖 See Easing for details.
Set the easing function for the animation.
import Motion.Easing exposing (Easing(..))
Skew.easing EaseInOut📖 See Spring for details.
Drive this property with a spring.
import Motion.Spring as Spring
Skew.spring Spring.wobblyKeep skew values on each axis 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
TiltChanged xDeg yDeg ->
let
( animState, cmd ) =
WAAPI.animate model.animState <|
Skew.begin
>> Skew.clampX -30 30
>> Skew.clampY -30 30
>> Skew.end
in
( { model | animState = animState }
, cmd
)Keep the X axis skew within min and max values. If min > max the values are flipped.
Keep the Y axis skew 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 skew, cancelling any in-flight animation on this property.
Snap target X and Y skew angles.
Snap target X angle, preserving the current Y angle.
Snap target Y angle, preserving the current X angle.
Builder type for skew animations.