Animating transitions on mount/dismount via GreenSock (GSAP)

[canadaduane]

Here's a little component I made that makes it easier to manage animating on mount/dismount. For example, fading in and fading out. Usually, it's easy to transition on mount (e.g. fade in) but difficult to transition on dismount (e.g. fade out) because the component is removed from the DOM too early. To work properly, the parent component needs to wait for the transition to complete before removing the child DOM element.

Using the Transition wrapper component below, you could fairly easily fade a component in or out (or slide in or out, or whatever greensock transitions you want), like so:

  function* Box() {
    let show = true;

    setTimeout(() => {
      show = false;
      this.refresh();
    }, 3000);

    for (let props of this) {
      yield html`
        <${Transition} active=${show} props=${{ opacity: 0 }}>
          <div class="box">Hi</div>
        </${Transition}>
      `;
    }
  }

import gsap from "gsap";
import { jsx } from "@b9g/crank/standalone";

export async function* Transition({
  msIn = 1000,
  msOut = 1000,
  props = { opacity: 0 },
}) {
  let mount;
  let animatingEl;
  let dismountTimeout;

  for await (let { children, active } of this) {
    if (active && !animatingEl) mount = true;

    const el = yield mount ? jsx`${children}` : null;

    if (el && !animatingEl) {
      // Transition animation to mounted
      animatingEl = el;
      clearTimeout(dismountTimeout);
      const gsapProps = { ...props, duration: msIn / 1000 };
      gsap.from(animatingEl, gsapProps);
    } else if (animatingEl && !active) {
      // Transition animation to unmounted
      gsap.to(animatingEl, { ...props, duration: msOut / 1000 });
      dismountTimeout = setTimeout(() => {
        mount = false;
        animatingEl = undefined;
        this.refresh();
      }, msOut);
    }
  }
}