TyphonJS Runtime Library - RC 0.0.12

Question

The TyphonJS Runtime Library / TRL release candidate version 0.0.12 is now available. This is a massive update and completes stage #1 of full reactive animation support; it's fully ready, but even more goodness awaits in the next release as I'll be massively improving the TRL native Position animation system as well. Greensock / GSAP is now easily usable w/ TRL and has a very powerful data driven front end that connects the reactive Position system to GSAP.

All I got to say is that TRL + Svelte + GSAP is screaming for someone to take up a really awesome cards implementation for Foundry. I built and will continue to refine the supporting tech, but don't have the time to create such a module. I however can support anyone who wants to take a stab.

Basic overview / CHANGELOG for 0.0.12:
Full integration of GSAP
  Proper ES Module loading from remote source (requires top level await).
  GsapCompose (data oriented GSAP bridge for Position)
  draggableGsap; provides easing + inertia support.

Position system
  immediate element update support; from external rAF callback.
  animateTo
    Returns an object w/ cancel method and finished for the animation end Promise.
    ease instead of easing. duration is now specified in seconds instead of milliseconds.
  Start of static public Animation API; support cancelAll - Position.Animation.cancelAll()

Demos: see 
  position-app: cleaned up UI; upgraded w/ GSAP timeline / tween examples + draggable selection.
  position-box: upgraded w/ GSAP timeline example; draggableGsap
  position-carousel: upgraded for GSAP timeline / tween to control continuous updates.

The GSAP API itself is imperative and while you can create modular animations you have to do so through code / calling functions of the GSAP API. TRL & the GsapCompose front end is what hooks up GSAP w/ the Position system (IE SvelteApplication / this.position) and makes composing animations data oriented.

Loading of GSAP is easy w/ TRL as the heavy lifting is all handled transparently. From the DX / developer experience side of things all you have to do is import GsapCompose like the following:

import { GsapCompose } from '@typhonjs-fvtt/runtime/svelte/gsap';

GsapCompose supports the to, from, and fromTo tweens as well as timeline support. GsapCompose.timeline however works differently. As things go just as with the update video and this synopsis it is going to be impossible to go into how everything works, so do check out essential-svelte-esm as the position-app / position-box / position-carousel demos are updated w/ GSAP animation features.

You can easily import any of the GSAP plugins through simply making a bare import. Behind the scenes TRL adds the loading code to your app and automatically registers the plugins with GSAP core. So adding plugins is as simply as easy as adding an import like:

// Imports the loading code / automatic GSAP plugin registration.
import '@typhonjs-fvtt/runtime/svelte/gsap/plugin/MotionPathPlugin';
import '@typhonjs-fvtt/runtime/svelte/gsap/plugin/bonus/InertiaPlugin';

TRL makes importing and using the version shipped w/ Foundry super easy. A caveat to be aware of though is that this is achieved with dynamic import and requires browsers that support top level await. Good news is that Chrome ~89 / year ago release supports it,  Firefox over last summer, and Safari last September supports this ESM feature.

Another caveat if you start to explore GSAP w/ TRL & Foundry is that on Foundry v9 the GSAP version provided is somewhat old and is 3.5.4. When you view the GSAP documentation it will be for the latest version, so you have to be mindful that there are some things that the version shipped w/ Foundry v9 is out of date. I gather w/ the v10 release of Foundry GSAP will be updated to 3.10+.

https://www.youtube.com/watch?v=yIc0fYh1YGM

Gaming

Programming

TyphonJS Runtime Library - RC 0.0.12