mdgriffith / elm-style-animation / Animation

A library for animations.

Setting up an animation


type alias State =
Model.Animation Basics.Never

Note - The compiler will refer to your Animation.State as Animation.Model.Animation msg

subscription : (Msg -> msgB) -> List (Model.Animation msgA) -> Platform.Sub.Sub msgB

Create a subscription to Browser.Events.onAnimationFrame.

It is throttled based on whether the current animation is running or not.


type alias Msg =
Model.Tick

render : Model.Animation msgA -> List (Html.Attribute msgB)

Render style properties into the style attribute and render other attributes as needed for svg.

Combine "transform" based properties into a single css property.

Combine "filter" based properties into a single css property.

renderPairs : Model.Animation msgA -> List ( String, String )

Render style properties into the style attribute.

Combine "transform" based properties into a single css property.

Combine "filter" based properties into a single css property.

Note this method will not render svg properties like Animation.points.

Creating an animation

interrupt : List (Model.Step msg) -> Model.Animation msg -> Model.Animation msg

Interrupt any running animations with the following animation.

queue : List (Model.Step msg) -> Model.Animation msg -> Model.Animation msg

Add an animation to the queue, execiting once the current animation finishes


type alias Step =
Model.Step Basics.Never

wait : Time.Posix -> Model.Step msg

to : List Model.Property -> Model.Step msg

Animate to a set of target values, using the default interpolation.

toWith : Model.Interpolation -> List Model.Property -> Model.Step msg

Animate to a set of target values. Use a temporary interpolation instead of the default. The interpolation will revert back to default after this step.

toWithEach : List ( Model.Interpolation, Model.Property ) -> Model.Step msg

Animate to a set of target values. Use a temporary interpolation for each property instead of the default. The interpolation will revert back to default after this step.

set : List Model.Property -> Model.Step msg

Immediately set properties to a value.

repeat : Basics.Int -> List (Model.Step msg) -> Model.Step msg

Repeat a number of steps n times.

loop : List (Model.Step msg) -> Model.Step msg

Repeat a number of steps until interrupted.

update : Msg -> Model.Animation msg -> Model.Animation msg

Update an animation.

style : List Model.Property -> Model.Animation msg

Set an initial style for an animation.

Uses standard defaults for interpolation

styleWith : Model.Interpolation -> List Model.Property -> Model.Animation msg

Set an initial style for an animation and override the standard default for interpolation.

styleWithEach : List ( Model.Interpolation, Model.Property ) -> Model.Animation msg

Set an initial style for an animation and specify the interpolation to be used for each property.

Any property not listed will receive interpolation based on the standard defaults.


type alias Interpolation =
Model.Interpolation

spring : { stiffness : Basics.Float, damping : Basics.Float } -> Model.Interpolation

Specify a custom Spring to animate with. To be used in conjunction with StyleWith, StyleWithEach, toWith, and toWithEach.

This should be your preferred interpolation to use.

easing : { duration : Milliseconds, ease : Basics.Float -> Basics.Float } -> Model.Interpolation

Specify a custom Easing to animate with. To be used in conjunction with StyleWith, StyleWithEach, toWith, and toWithEach.

The elm-community/easing-functions package has a bunch of useful easing functions!

speed : { perSecond : Basics.Float } -> Model.Interpolation

Specify a speed to animate with. To be used in conjunction with StyleWith, StyleWithEach, toWith, and toWithEach.

Generally you don't want this. It's used in the special case of the default interpolation for rotation.

Use Animation.spring or Animation.easing instead as they are more powerful.

Animatable Properties


type alias Property =
Model.Property

opacity : Basics.Float -> Model.Property


type Length

top : Length -> Model.Property

left : Length -> Model.Property

right : Length -> Model.Property

bottom : Length -> Model.Property

width : Length -> Model.Property

height : Length -> Model.Property

padding : Length -> Model.Property

paddingLeft : Length -> Model.Property

paddingRight : Length -> Model.Property

paddingTop : Length -> Model.Property

paddingBottom : Length -> Model.Property

margin : Length -> Model.Property

marginLeft : Length -> Model.Property

marginRight : Length -> Model.Property

marginTop : Length -> Model.Property

marginBottom : Length -> Model.Property


type alias Color =
{ red : Basics.Int
, green : Basics.Int
, blue : Basics.Int
, alpha : Basics.Float 
}

color : Color -> Model.Property

backgroundColor : Color -> Model.Property

borderColor : Color -> Model.Property

borderWidth : Length -> Model.Property

borderLeftWidth : Length -> Model.Property

borderRightWidth : Length -> Model.Property

borderTopWidth : Length -> Model.Property

borderBottomWidth : Length -> Model.Property

borderRadius : Length -> Model.Property

borderTopLeftRadius : Length -> Model.Property

borderTopRightRadius : Length -> Model.Property

borderBottomLeftRadius : Length -> Model.Property

borderBottomRightRadius : Length -> Model.Property

shadow : Shadow -> Model.Property

textShadow : Shadow -> Model.Property

Text shadows will ignore the shadow's size value. This is just one of the bizarre quirks of CSS.

insetShadow : Shadow -> Model.Property

display : DisplayMode -> Model.Property

inline : DisplayMode

inlineBlock : DisplayMode

flex : DisplayMode

inlineFlex : DisplayMode

block : DisplayMode

none : DisplayMode

listItem : DisplayMode

Transforms

scale : Basics.Float -> Model.Property

scale3d : Basics.Float -> Basics.Float -> Basics.Float -> Model.Property


type Angle

rotate : Angle -> Model.Property

rotate3d : Angle -> Angle -> Angle -> Model.Property

translate : Length -> Length -> Model.Property

translate3d : Length -> Length -> Length -> Model.Property

transformOrigin : Length -> Length -> Length -> Model.Property

Animatable CSS Filters

filterUrl : String -> Model.Property

Create a CSS filter-url

blur : Length -> Model.Property

Create a CSS blur filter, these stack with other filters.

brightness : Basics.Float -> Model.Property

Create a CSS brightness filter, these stack with other filters.

contrast : Basics.Float -> Model.Property

Create a CSS contrast filter, these stack with other filters.

grayscale : Basics.Float -> Model.Property

Create a CSS grayscale filter, these stack with other filters.

greyscale : Basics.Float -> Model.Property

Create a CSS grayscale filter, these stack with other filters. This is a spelling adjusment.

hueRotate : Angle -> Model.Property

Create a CSS hue-rotation filter, these stack with other filters.

invert : Basics.Float -> Model.Property

Create a CSS invert filter, these stack with other filters.

saturate : Basics.Float -> Model.Property

Create a CSS saturate filter, these stack with other filters.

sepia : Basics.Float -> Model.Property

Create a CSS sepia filter, these stack with other filters.

dropShadow : Shadow -> Model.Property

Drop shadows will ignore the shadow's size value. This is just one of the bizarre quirks of CSS.

Animatable Svg Properties

viewBox : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Model.Property

fill : Color -> Model.Property

stroke : Color -> Model.Property

strokeWidth : Basics.Float -> Model.Property

stopColor : Color -> Model.Property

Used for svg gradients

offset : Basics.Float -> Model.Property

Used for svg gradients. Accepts a number between 0 and 1.

x : Basics.Float -> Model.Property

y : Basics.Float -> Model.Property

cx : Basics.Float -> Model.Property

cy : Basics.Float -> Model.Property

radius : Basics.Float -> Model.Property

radiusX : Basics.Float -> Model.Property

radiusY : Basics.Float -> Model.Property

points : List ( Basics.Float, Basics.Float ) -> Model.Property

Used with the svg polygon element

Constructing an Svg Path

path : List Model.PathCommand -> Model.Property

To be used with the svg path element. Renders as the d property.


type alias PathStep =
Model.PathCommand

move : Basics.Float -> Basics.Float -> Model.PathCommand

moveTo : Basics.Float -> Basics.Float -> Model.PathCommand

line : Basics.Float -> Basics.Float -> Model.PathCommand

lineTo : Basics.Float -> Basics.Float -> Model.PathCommand

horizontal : Basics.Float -> Model.PathCommand

horizontalTo : Basics.Float -> Model.PathCommand

vertical : Basics.Float -> Model.PathCommand

verticalTo : Basics.Float -> Model.PathCommand

close : Model.PathCommand

Close a Path


type alias QuadraticCurve =
{ control : ( Basics.Float
, Basics.Float )
, point : ( Basics.Float
, Basics.Float ) 
}

curve : QuadraticCurve -> Model.PathCommand

Create a relative curve with 1 control point and a target point. This is a Quadratic curve in teh svg spec.

curveTo : QuadraticCurve -> Model.PathCommand

Create an absolute curve with 1 control point and a target point. This is a Quadratic curve in teh svg spec.


type alias CubicCurve =
{ control1 : ( Basics.Float
, Basics.Float )
, control2 : ( Basics.Float
, Basics.Float )
, point : ( Basics.Float
, Basics.Float ) 
}

curve2 : CubicCurve -> Model.PathCommand

Create a relative Curve with 2 control points and a target point. This is a Cubic Curve in the svg spec.

curve2To : CubicCurve -> Model.PathCommand

Create an absolute Curve with 2 control points and a target point. This is a Cubic Curve in the svg spec.

arc : Arc -> Model.PathCommand


type alias Arc =
{ x : Basics.Float
, y : Basics.Float
, radius : Basics.Float
, startAngle : Basics.Float
, endAngle : Basics.Float
, clockwise : Basics.Bool 
}

Units

px : Basics.Float -> Length

percent : Basics.Float -> Length

em : Basics.Float -> Length

rem : Basics.Float -> Length

turn : Basics.Float -> Angle

deg : Basics.Float -> Angle

grad : Basics.Float -> Angle

rad : Basics.Float -> Angle

Advanced

exactly : String -> String -> Model.Property

Set a non-numerical to an exact value. This is generally only used with Animation.set.

For example

Animation.set
    [ Animation.exactly "border-style" "dashed"
    ]

custom : String -> Basics.Float -> String -> Model.Property

Animate a custom style property by providing it's name, a float value, and the units it should have.

custom2 : String -> ( Basics.Float, String ) -> ( Basics.Float, String ) -> Model.Property

customColor : String -> Color -> Model.Property

attr : String -> Basics.Float -> String -> Model.Property

Animate a custom attribute by providing it's name, a float value, and the units it should have.

attr2 : String -> ( Basics.Float, String ) -> ( Basics.Float, String ) -> Model.Property

attr3 : String -> ( Basics.Float, String ) -> ( Basics.Float, String ) -> ( Basics.Float, String ) -> Model.Property

attr4 : String -> ( Basics.Float, String ) -> ( Basics.Float, String ) -> ( Basics.Float, String ) -> ( Basics.Float, String ) -> Model.Property

attrColor : String -> Color -> Model.Property