Morphos & Kosmesis are here.Explore
PraxisJS

@praxisjs/motion

Changelog for @praxisjs/motion — animations and transitions with @Tween and @Spring.

@praxisjs/motion

1.2.1

Depends on the other @praxisjs/* packages through caret ranges (^2.3.0) instead of exact versions, so npm no longer installs a second copy of a package when two releases disagree, and upgrades no longer end in peer conflicts.

1.2.0

The published package no longer contains the package's tests (compiled tests in dist/__tests__, test sources in src/__tests__).

The package is marked "sideEffects": false, so bundlers leave out the modules of it that an app does not use.

@Tween and @Spring throw a TypeError when the class is defined if they decorate an accessor instead of a plain field, naming the member to fix (see assertFieldContext).

createTransition() and its TransitionOptions type are now exported. It was already part of the package but could not be imported. Its Promise-based enter/leave pair plugs into the new transition prop of For and Index from @praxisjs/runtime, which keeps a removed row in place until its leave transition ends. See createTransition.

@Tween and @Spring no longer start an animation frame loop when a component is created: a field starts at rest and only animates when it is written. Before, every animated field ran a no-op requestAnimationFrame loop for its whole duration on construction, and a @Tween field reported playing during it. Each field now shares one accessor across instances, and the animation reacts to target writes directly instead of through an effect, so creating a component with @Tween and @Spring fields is about four times cheaper.

Bug fix: a tween's reset() during an animation left it marked as playing.

1.1.24

@Tween and @Spring now stop their animation when the component unmounts, instead of leaving the requestAnimationFrame loop running until it settles.

1.1.11

Updated dependencies — @praxisjs/[email protected], @praxisjs/[email protected].

1.1.10

Bug fix: @Tween was restarting on every frame instead of completing.

The start() helper inside tween() read _value() while inside a reactive effect() body, accidentally subscribing the effect to the value signal. Every frame update (_value.set(...)) re-triggered the effect, resetting startTime and restarting the animation indefinitely. Fixed by wrapping the read with untrack().

Bug fix: @Tween and @Spring not animating on the first reactive read.

Both decorators previously initialized the tween/spring lazily on the first set(). If the field was read inside {() => this.value} before any write, the getter returned 0 without subscribing to the tween signal — so the DOM effect never re-ran. Both decorators now initialize eagerly in bind() using the field's initial value.

1.0.0 — Breaking

All functional animation APIs replaced by decorators:

RemovedReplacement
useMotion(), tween(), spring()@Tween, @Spring field decorators
createTransition(), Animate@Tween, @Spring
easings, resolveEasingeasing option on @Tween

@Tween and @Spring replace a class field with an animated signal — reading returns the current interpolated value, assigning starts a new animation from the current position.

0.2.0

Migrated to TC39 decorator context API.

0.1.0

Initial beta release.

On this page