Selecting and pausing running animations in Lit Web Components

The reason this post exists is because it took me sometime to figure this out, and there seems to be a lack of lit focused literature. It’s not difficult conceptually, I just couldn’t find all the correct pieces in one place…

When you work with lit.dev there may be times when you need animate elements. Lit has its own animation abstraction in the works called labs/motion but documentation is scant and until its part of lit proper, I prefer to work with vanilla web APIs.

So that means I generally reach for WAAPI.

Lit has various lifecycle methods. Depending on what you want to do, you may choose somewhere different, but for the sake of this demo, I’m starting my animation in firstUpdated(), which means I should definitely have the element in the DOM before I start trying to animate it.

You can go and have a play of this example in the Lit playground:

Here is our element being told to animate:

firstUpdated(){
    this.thing.value.animate(this.moveThing,{
      duration: 5000,
      fill: "both",
      iterations: Infinity,
      direction: "alternate",
    })
  }

I’m then attaching a couple of event listeners, one for pointerup, the other for pointerdown. One pauses the animations, and one starts them again.

But the first thing I couldn’t figure was how to select the elements in the component that are currently animating.

Here is the secret sauce:

this.animatingElements = this.shadowRoot?.getAnimations({ subtree: true });

Originally I had forgotten the shadowRoot part, and couldn’t understand why I wasn’t getting anything.

Now, here was the part that stumped me for the longest, and really has nothing in particular to do with lit, it was just me being a little slow.

If you have a bunch of things (potentially) animating in your component, and you need to pause them, you only want to pause the ones that are “running”, and when it comes to unpausing your animating elements, you only want to play() elements that are currently “paused”. Without that check you’ll get some hard to debug problems as some animations randomly start running that shouldn’t.

So here is that in code, basically looping over all the potentially animating elements, and if any are running pause them:

this.animatingElements.map((item: any) => {
  if (item.playState === "running") {
    item.pause();
  }
});

And then the inverse, if paused, play:

this.animatingElements.map((item: any) => {
  if (item.playState === "paused") {
    item.play();
  }
});

And that’s it, you’ll get a nice play/pause experience.