Does the animate directive from @lit-labs/motion work outside of a custom element? #4624

mgreenbe · 2024-04-15T16:54:32Z

mgreenbe
Apr 15, 2024

I'd like to use the animate directive for a standalone lit-html template, i.e., not rendered by a custom (Lit) element. Is this possible? I can't get it to work. Here is a minimal example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Slide</title>
    <style>
      .circle {
        position: relative;
        background: steelblue;
        --box-size: 25vw;
        height: var(--box-size);
        width: var(--box-size);
        border-radius: 50%;
      }

      .slid {
        left: calc(100% - var(--box-size));
      }
    </style>
  </head>
  <body>
    <p><button>Slide</button></p>
    <div></div>
  </body>
  <script type="module">
    import { html, render } from "lit-html";
    import { animate } from "@lit-labs/motion";
    import { classMap } from "lit/directives/class-map.js";

    const button = document.querySelector("button");
    const circle = document.querySelector(".circle");
    const div = document.querySelector("div");

    let slid = false;

    const template = (slid) =>
      html`<p
        id="circle"
        class=${classMap({ circle: true, slid })}
        ${animate()}
      ></p>`;

    button.addEventListener("click", () => {
      slid = !slid;
      render(template(slid), div);
    });

    render(template(slid), div);
  </script>
</html>

The call to animate throws an error: Uncaught TypeError: Cannot read properties of undefined (reading 'addController') at Animate.update (animate.ts:232:18). It's trying to read addController from this._host and fails, because there is no host, because I'm not within a custom element.

Is there a workaround here? I understand that there needs to be a host of some kind so that the animation can maintain state (?), but you need to bring in custom elements? Or could the whole process be controlled just by a ReactiveController that's just a javascript object?

I'm quite keen on using the animate directive in a minimalistic context, without custom elements.

sorvell · 2024-05-07T18:19:04Z

sorvell
May 7, 2024
Maintainer

It's a little tricky because the directive uses the FLIP technique and therefore must measure element state before and after rendering. It relies on the reactive update lifecycle in LitElement to do this, but it is possible to simulate outside this context.

Here's an example.

This partially implements the ReactiveControllerHost interface and integrates it directly with Lit's render function. The example might not cover everything but it should hopefully give you the gist.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Does the animate directive from @lit-labs/motion work outside of a custom element? #4624

{{title}}

Replies: 1 comment

{{title}}

Select a reply

Does the animate directive from @lit-labs/motion work outside of a custom element? #4624

mgreenbe Apr 15, 2024

Replies: 1 comment

sorvell May 7, 2024 Maintainer

mgreenbe
Apr 15, 2024

sorvell
May 7, 2024
Maintainer