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

Create a subscription to Browser.Events.onAnimationFrame.

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

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.

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.

Interrupt any running animations with the following animation.

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

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

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.

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.

Immediately set properties to a value.

Repeat a number of steps n times.

Repeat a number of steps until interrupted.

Update an animation.

Set an initial style for an animation.

Uses standard defaults for interpolation

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

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.

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.

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!

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.

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

Create a CSS filter-url

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

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

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

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

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

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

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

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

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

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

Used for svg gradients

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

Used with the svg polygon element

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

Close a Path

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

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

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

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

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"
    ]

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

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

Check if the Animation is currently running