Projectrix v0.1.6 alpha

• fixed the projected width/height when targeting a content-box sized element that has padding
• fixed the projected width/height when targeting a border-box sized element

Please note the following new limitation:

• Targeting an element with an "internal" display value, or any value that causes the element to control its own size, will lead to undefined behavior, since the projected width and height will be ignored:
  • display: inline | table | inline-table | table-row | table-column | table-cell | table-row-group | table-column-group | table-header-group | table-footer-group | ruby-base | ruby-text | ruby-base-container | ruby-text-container | run-in

Projectrix v0.1.5 alpha

• added support for the perspective and perspective-origin properties (previously unsupported)
• fixed compliance with the preserve-3d used value specs

keep in mind that:

• Projectrix is not an animation engine, and will not attempt to mitigate bugs in animation engines
  • some engines might animate perspective incorrectly in particular scenarios

(I noticed that the perspective-preserve-3d trial trips up Motion One on Chrome, and Anime.js v3 on Safari. The trial is still considered passing, since Projectrix provides the correct projection)

please note the following limitations regarding preserve-3d:

• some engines don't follow the preserve-3d used value specs, and still use preserve-3d even when combined with certain grouping properties:
  • Chrome v123 / Blink -- contain: strict | content | paint, content-visibility: auto
  • Firefox v124 / Gecko -- will-change: filter
  • Safari v17.4 / Webkit -- will-change: filter | opacity
  • (Properties not yet supported by particular browsers omitted from their respective lists)
• Projectrix will not attempt to match or mitigate such differences

Projectrix v0.1.4 alpha

Previously, Projectrix required that the subject and target coexist, which meant proper FLIP animations were not possible. This release fixes that shortcoming:

• added measureSubject() and Measurement

/**
 * measures a subject for future projections. useful if the subject and target cannot coexist,
 * such as a flip animation where the subject is the target's past
 */
export function measureSubject(subject: HTMLElement): Measurement;

export type Measurement = {
  acr: ActualClientRect; // from getActualClientRect
  border: BorderMeasurement;
};
export type BorderMeasurement = { /* style, top, right, bottom, left, radius */ };

• updated getProjection() to also accept Measurement for the subject

export function getProjection(
  subject: HTMLElement | Measurement, // the element or measurement that you plan to align the target to
  target: HTMLElement,                // the element that you plan to modify
  options?: ProjectionOptions,
): ProjectionResults;

• updated FlipDemo.svelte to showcase a proper FLIP animation

https://tg.projectrix.dev/demos/flip

• updated readme's Flip usage example

import { getProjection, measureSubject, setInlineStyles, clearInlineStyles } from 'projectrix';
import { animate } from 'motion';

function flip(target: HTMLElement, nextParent: HTMLElement): void {
  const subject = measureSubject(target);

  nextParent.append(target);

  requestAnimationFrame(() => {
    const { toSubject, toTargetOrigin } = getProjection(subject, target);

    // set target to subject's projection
    setInlineStyles(target, toSubject);

    // FLIP back to origin
    const flipAnimation = animate(
      target,
      { ...toTargetOrigin },
      {
        duration: 1,
        easing: 'ease-out',
      },
    );

    // clear inline styles once they're redundant
    flipAnimation.finished.then(() => clearInlineStyles(target, toTargetOrigin));
  });
}

Projectrix v0.1.3 alpha

added log boolean to ProjectionOptions. if true, simply logs ProjectionResults to console before returning the results

Projectrix v0.1.2 alpha

The Projectrix api is now even breezier; see updated usages for examples of the new types and functions.

• added PartialProjection and PartialProjectionResults types for convenience, in case you want to delete members from projections

export type PartialProjection = Partial<Projection>;

export type PartialProjectionResults = {
  toSubject: PartialProjection;
  toTargetOrigin: PartialProjection;
  transformType: TransformType;
  subject: HTMLElement;
  target: HTMLElement;
};

• added setInlineStyles and clearInlineStyles functions

/**
 * sets the inline style on the target for each style in the given partial projection.
 * converts any matrix3d or transformMat4 value to a transform style
 */
export function setInlineStyles(target: HTMLElement, partialProjection: PartialProjection): void;

/**
 * clears the inline style on the target for each style in the given partial projection.
 * if no partial projection is given, assumes target's inline styles were set to a full projection.
 * if the projection contains matrix3d or transformMat4, then the transform style is cleared
 */
export function clearInlineStyles(target: HTMLElement, partialProjection?: PartialProjection): void;

• The demos pages are finally mobile-ready: https://tg.projectrix.dev/demos

Projectrix v0.1.1 alpha

-fixed support for absolute-in-transform for both subject and target (where parent has transform but no position)
-added support for fixed-in-transform for both subject and target (previously unsupported)
-added support for fixed-in-filter for both subject and target (previously unsupported)

Projectrix v0.1.0 alpha

initial release of Projectrix

$ npm install projectrix --save

• See readme for summary, usage, and documentation.
• Feedback & feature requests can be posted to the Projectrix Discord
• If you find a bug, please file an issue
• Join my Patreon