Firelight.Motion

Animate elements as they move, appear and disappear, declared right in the template.

Why use it

When a render moves an element, it jumps to its new place. Animating that by hand means measuring where the element was before the update and where it is after, then animating between the two. Motion.animate() does that for you: put it on an element in a template, and when a render moves the element, it slides from its old position to its new one.

It can also animate elements in and out of the page with keyframe presets such as Motion.fadeIn. AnimateController controls the animations across a component, for example to pause them, and SpringController adds spring physics.

Example

The list is re-rendered in a random order. Each item is the same element as before, animated to its new place.

module Snippets.ShuffleList

open Fable.Core
open Firelight
open Firelight.Motion
open type Firelight.Lit

let private random = System.Random()

[<AttachMembers>]
type ShuffleList() =
    inherit LitElement()

    let mutable fruits = [ "Apple"; "Banana"; "Cherry"; "Damson"; "Elderberry" ]

    static member styles =
        css
            $$"""
        :host { display: grid; gap: 1rem; justify-items: start; }
        button { font: inherit; padding: 0.4rem 0.9rem; cursor: pointer; }
        ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; min-width: 12rem; }
        li { padding: 0.4rem 0.75rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--bg); }
        """

    member this.Shuffle() =
        fruits <- fruits |> List.sortBy (fun _ -> random.Next())
        this.requestUpdate ()

    // repeat keys each <li> by fruit, so the same element moves to its new position,
    // and Motion.animate() animates it there from where it was.
    override this.render() =
        html
            $"""
        <button @click={fun _ -> this.Shuffle()}>Shuffle</button>
        <ul>{repeat (fruits, (fun fruit _ -> fruit), (fun fruit _ -> html $"<li {Motion.animate ()}>{fruit}</li>"))}</ul>"""

defineElement<ShuffleList> "my-shuffle-list"

Install

dotnet add package Firelight.Motion
npm install @lit-labs/motion