Lit — DS-GN Docs

MotionController from @ds-gn/motion/lit scopes motion to a Lit host: selectors resolve against the host’s render root, and every animation and observer is cleaned up when the host disconnects.

import { LitElement, html } from 'lit';
import { MotionController } from '@ds-gn/motion/lit';

class FeatureGrid extends LitElement {
  motion = new MotionController(this);

  firstUpdated() {
    this.motion.inViewSequence('.card', { preset: 'slideUp', stagger: 40 });
  }

  render() {
    return html`<div class="card">…</div>
      <div class="card">…</div>`;
  }
}

Method	Description
`timeline(steps)`	As `timeline`, cancelled on disconnect
`sequence(targets, options)`	As `sequence`, cancelled on disconnect
`enter(el, preset)`	As `enter`
`exit(el, preset)`	As `exit`
`inView(el, callback, options)`	As `inView`, while the host is connected
`inViewTimeline(steps, options)`	Play a timeline when `trigger` (default: the host) enters the view
`inViewSequence(targets, options)`	Play a sequence when `trigger` (default: the host) enters the view

steps and targets may be functions, evaluated when the trigger fires, for elements that only exist after the host renders. A trigger that has not fired yet re-arms if the host is moved in the DOM.