Skip to content

Releases: magic-spells/morph-engine

v0.4.2

Choose a tag to compare

@CorySchulz CorySchulz released this 21 Sep 19:15
892b95d

container — where the (the element that actually flies) gets appended. Previously always document.body. Now an Element or a function returning one, settable on the constructor or per-show() call (per-call wins, and the hide leg flies in the same container as its show).

Why: a blob in paints under the browser's top layer, so any flight whose destination sits inside an open showModal() dialog was invisible — you'd see nothing move, then the destination appear. Passing a container inside that dialog's subtree (container: () => thumb.closest('dialog:modal')) puts the blob in the same layer and the flight shows. That's what lets the Tarot lightbox fly out of a thumbnail inside Pyramid's task dialog.

One subtlety it handles for you: if the container (or an ancestor) has a transform, filter, contain, etc., it becomes the containing block for the fixed-position blob and viewport coordinates would land in the wrong place. Rather than walking computed styles for every property that can cause this, the engine appends the blob at top:0; left:0, measures where it actually landed, and subtracts that offset from its own frames — one layout read per flight, honest to whatever the browser does. Only a translation can be undone (a scaled/rotated host still scales the blob), which is documented.

v0.4.0

Choose a tag to compare

@CorySchulz CorySchulz released this 08 Sep 00:39

continuous morph

v0.3.0

Choose a tag to compare

@CorySchulz CorySchulz released this 07 Sep 02:56
  • cloneFit: 'freeze' | 'scale' — 'scale' scales the frozen source clone to the blob's border box every frame instead of holding it at the source's pixel size, so a photo keeps growing rather than dissolving. Paired with cloneFadeUntil: Infinity you get a continuous morph with no empty-box phase.
  • handoff: 'fade' | 'hard' — 'hard' collapses the target's opacity ramp and the blob's fade into one instant at revealAt, for a clean switch when the two ends don't line up pixel-for-pixel (cover-cropped thumbnails).

v0.2.0

Choose a tag to compare

@CorySchulz CorySchulz released this 16 Aug 02:13

different in and out friction and attraction values if you want

v0.1.2

Choose a tag to compare

@CorySchulz CorySchulz released this 03 Aug 02:03

Adds stop({ restoreSource: false }) and restoreSource(). The option leaves the
source element hidden and keeps its morphing mark, so a caller taking the
flight over can hand the element back itself.

v0.1.1 - Frame Engine Update

Choose a tag to compare

@CorySchulz CorySchulz released this 13 Jul 03:24