Animator.Css.watching is different from Animator.watching in that it will only ask for one frame when an animation is updated.

In that one frame, we render the entire CSS animation, which can run without Elm needing to do a full rerender.

This is a single div element.

It's just like a normal Html node, except it also takes a Timeline and a list of attributes you want to animate.

Here's a checkbox that changes backgrounds as a brief example:

Animator.Css.div model.checked
    [ Animator.Css.backgroundColor <|
        \checked ->
            if checked then
                Color.rgb255 255 96 96


            else
                Color.white
    ]
    [ Attr.style "height" "30px"
    , Attr.style "width" "30px"
    ]
    [ Html.text "" ]

Specify a node name that's not a div. Here's an <a>.

Animator.Css.node "a"
    model.checked
    [ Animator.Css.backgroundColor <|
        \checked ->
            if checked then
                Color.rgb255 255 96 96


            else
                Color.white
    ]
    [ Attr.style "height" "30px"
    , Attr.style "width" "30px"
    ]
    [ Html.text "" ]

This is a debug tool for transformations.

If you turn this on, it will show you:

• A grey bounding box so you get a sense of the element you're animating.

• A red dot at the center of the element. Any rotation will be around this point.

  You can adjust the dot's position using transformWith and setting a new origin.

• The coordinate axes. Yes, in CSS, y points down.

This represents moving something around in 3d.

This includes:

• scaling
• changing position
• rotation

Animator.Css.transform <|
    \state ->
        case state of
            Stationary ->
                Animator.Css.xy
                    { x = 0
                    , y = 0
                    }


            Rotating ->
                -- do a full rotation every 5 seconds
                Animator.Css.rotating
                    (Animator.seconds 5)

Note - If you're doing 3d transformations, you should set a CSS perspective property either on this element or on a parent. If it's on a parent, then all elements will share a common perspective origin.

So, add something like this to the parent element:

perspective: 500px;
perspective-origin: center;

Rotate to a specific angle, where increasing numbers move clockwise.

The actual number provided should be in Elm standard angles (radians).

Alternatively you could use turns or degrees instead.

Have this element "look at" a specifc point.

The coordinates provided are relative to this element.

The default, which is where the element is looking directly outwards from the screen, is:

Animator.Css.lookAt
    { x = 0
    , y = 0
    , z = 1
    }

Provide the duration it should take for one full rotation.

The origin for rotation. Defaults to the center of the element.

This is the x and y offset, in pixels from the center of the object.

Generally I found the most common case for adjusting the origin was when you want it mostly centered, but aligned to the visual center of an icon or image, which is offset by a number of pixels.