Skew¶

Skew elements along the X and Y axes.

Module: Anim.Property.Skew

GPU Accelerated: ✅

Basic Usage¶

View Source Code

import Anim.Property.Skew as Skew

tilt : AnimBuilder eng -> AnimBuilder eng
tilt =
    Skew.begin
        >> Skew.toXY 12 0
        >> Skew.end

See the Properties Overview page for the shared usage patterns.

Type	Description
`Builder`	Alias for the internal builder used to configure the animation
`AnimGroupName`	Alias for the animation group name

Function	Signature	Description
`initXY`	`AnimGroupName -> Float -> Float -> AnimBuilder eng -> AnimBuilder eng`	Set the initial X and Y skew
`initX`	`AnimGroupName -> Float -> AnimBuilder eng -> AnimBuilder eng`	Set the initial X skew
`initY`	`AnimGroupName -> Float -> AnimBuilder eng -> AnimBuilder eng`	Set the initial Y skew

Function	Signature	Description
`for`	`AnimGroupName -> AnimBuilder eng -> Builder eng`	Start building
`build`	`Builder eng -> AnimBuilder eng`	Finish building

Function	Signature	Description
`fromXY`	`Float -> Float -> Builder eng -> Builder eng`	Starting X and Y skew (degrees)
`fromX`	`Float -> Builder eng -> Builder eng`	Starting X skew (degrees)
`fromY`	`Float -> Builder eng -> Builder eng`	Starting Y skew (degrees)

Function	Signature	Description
`toXY`	`Float -> Float -> Builder eng -> Builder eng`	Ending X and Y skew (degrees)
`toX`	`Float -> Builder eng -> Builder eng`	Ending X skew (degrees)
`toY`	`Float -> Builder eng -> Builder eng`	Ending Y skew (degrees)

Function	Signature	Description
`byXY`	`Float -> Float -> Builder eng -> Builder eng`	Skew by X and Y amounts (degrees)
`byX`	`Float -> Builder eng -> Builder eng`	Skew by X amount (degrees)
`byY`	`Float -> Builder eng -> Builder eng`	Skew by Y amount (degrees)

Function	Signature	Description
`delay`	`Int -> Builder { eng \| withTiming : () } -> Builder { eng \| withTiming : () }`	Delay in ms before animation starts
`duration`	`Int -> Builder { eng \| withTiming : () } -> Builder { eng \| withTiming : () }`	Duration in ms
`speed`	`Float -> Builder { eng \| withTiming : () } -> Builder { eng \| withTiming : () }`	Degrees per second

Function	Signature	Description
`easing`	`Easing -> Builder -> Builder`	Add natural motion

Function	Signature	Description
`spring`	`Spring -> Builder { eng \| withSpring : () } -> Builder { eng \| withSpring : () }`	Use spring physics instead of easing

The Translate property.