Builder type for custom color animations.

Type alias for the animation group name.

A typed set of common color properties with a custom escape hatch.

Use the escape hatch Custom to animate any CSS color property not currently supported out of the box.

import Anim.Extra.Color as Color
import Anim.Property.CustomColor as CustomColor


CustomColor.begin (Custom "outline-color")
    >> CustomColor.to (Color.rgb 255 0 0)
    >> CustomColor.end

Set the initial color value.

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

import Anim.Engine.* as Engine
import Anim.Extra.Color as Color
import Anim.Property.CustomColor as CustomColor


init : ( Model, Cmd Msg )
init =
    ( { animState =
            Engine.init
                [ CustomColor.init "box" BorderColor <|
                    Color.rgb 99 102 241
                ]
      }
    , Cmd.none
    )

Begin the animation configuration by turning an AnimBuilder into a custom property animation Builder.

myAnimation : AnimBuilder eng -> AnimBuilder eng
myAnimation =
    CustomColor.begin TextColor
        >> CustomColor.to (Color.rgb 255 0 0)
        >> CustomColor.end

Complete the animation configuration and return an AnimBuilder.

Set the starting color value.

Set the target color value.

Set the delay (milliseconds) before the animation starts.

Set the animation duration (milliseconds).

Set the animation speed (units per second).

Set the easing function.

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


CustomColor.easing EaseInOut

Drive this property with a spring.

import Motion.Spring as Spring


CustomColor.spring Spring.wobbly

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