🔃 Improve parsing and interpolating of multiple CSS transforms

This release improves the way renature parses and interpolates CSS transforms. Previously, if you specified multiple transforms in a different order in your from and to configuration, renature would incorrectly interpolate values.

// This would yield unexpected results!
{
  from: {
    transform: 'translateX(10px) skewY(3deg)',
  },
  to: {
    transform: 'skewY(6deg) translateX(20px)'
  }
}

With the above configuration, renature would try to interpolate between the translateX and skewY properties rather than matching translateX and skewY configurations separately. This release adds a fix for this behavior, so you can specify your transforms in any order you like!

Fixed

• CSS transforms with multiple properties are now matched based on transform property rather than order. PR by @parkerziegler here.

Diff

🖩 Fix issues with animation cache

This release fixes a subset of issues introduced by the animation caching logic added in v0.7.0. Animations with cached values would not restart from scratch on configuration change due to incorrect cache invalidation logic. This release fixes that behavior, alongside improving TypeScript definitions, optimizating internals, and adding more extensive unit and integration tests.

All changes in this release, with the exception of some TypeScript improvements, are internal and will not affect existing code.

Fixed

• The animation cache for a renature hook is now cleared on animation end. This allows animations to be restarted on configuration change. PR by @parkerziegler here. Fixes #101.
• use<Force>Group hooks now properly handle generics to specify the type of HTML or SVG element being animated. Fixed as part of this PR by @parkerziegler here.

Diff

⏯️ Better Support for Interrupted Animations

This release adds better support for interrupted and reactive animations. When an animation is interrupted mid-flight (say, by a change in its to parameter or part of its physics config), it will begin animating from its curernt position to the new target rather than restarting at its from definition. There are no changes to the public API.

Changed

• Interrupted and reactive animations now start from the cached state of the currently animating object rather than from their from config. PR by @parkerziegler here.

Diff

🛸 Migrate to ReScript

This release focuses on an internal migration to ReScript, the new build toolchain for Reason and BuckleScript.

Changed

• renature now uses ReScript (bs-platform > @8). PR by @parkerziegler here.
• Enhanced function return types for internals were added in this release. PR by @parkerziegler here.

🔬Fix scope of Controller API

This release fixes issues around the scope of controller. v0.6.0 introduced the ability to animate n elements in a single hook instance. However, when using multiple renature hooks in the same React tree, calling controller.start, controller.stop, and controller.pause applied to all animating elements, not to just the subset of animating elements created by their corresponding hook. This is fixed in v0.6.2 🌟!

Fixed

• ⚠️ Ensure controller's behavior is scoped to act only on the animating elements created by the corresponding hook. PR by @parkerziegler here.

Diff

🌟 use<Force>Group Hooks

v0.6.1

This release includes a critical fix for a bug introduced in v0.6.0. Our Bublé configuration had danngerousForOf transpilation configured, so for...of loops were operating on Sets were incorrectly transpiled, causing animations never to run. This release removes compilation of for...of loop since all modern browsers support the synntax for iterating over iterable data structures.

Fixed

• Remove dangerousForOf flag in Bublé config. PR by @parkerziegler here.

Diff

🌟 use<Force>Group Hooks (🐛)

In this release, we add support for use<Force>Group hooks for all three major forces covered by renature – friction, gravity, and fluid resistance. These hooks allow you to animate n elements in a single call to requestAnimationFrame and to manipulate the physics parameters and configuration applied to each of them.

Added

• ✨ Add useFrictionGroup, useGravityGroup, and useFluidResistanceGroup hooks. PR by @parkerziegler here.
• ✨ Add pause method to controller. This allows users to pause an animation without removing the animating node from the tracked set of animating elements. PR by @parkerziegler here.

Fixed

• Previously, calls to controller.start would always register a new requestAnimationFrame callback even if an existing callback was actively executing. We now check if there's an existing requestAnimationFrame callback registered and, if so, update the data referenced by that callback rather than registering a new callback. This prevents n calls to requestAnimationFrame being queued before each paint.

Diff

🚅 GPU Compositing and Hardware Acceleration

In this release, we add support for the disableHardwareAcceleration parameter to renature hooks. By default, renature will attempt to push compatible animations to the GPU (primarily transform and opacity). If you would like to prevent this behavior, specify disableHardwareAcceleration: true in your hooks configuration.

Added

• ✨ Add support for GPU compositing of transform animations. PR by @parkerziegler here.

Diff

🔩 Fix useGravity support for onFrame and onAnimationComplete

In this release, we expose the onFrame and onAnimationComplete APIs for the useGravity hook. These were accidentally missed in the v0.4.0 release 😱.

Fixed

• Ensure onFrame and onAnimationComplete supplied to useGravity are picked up and applied in the lifecycle of an animation. PR by @parkerziegler here.

Diff

onFrame 🎥, onAnimationComplete ⌛, and better controller.stop behavior

In this release, we add a few new APIs to renature to fix some pain points identified by community members. The most notable of these are onFrame and onAnimationComplete callbacks that can be provided to renature hooks.

⚠️ There are also some breaking changes in this release. ⚠️ See more details below on how to safely migrate your code.

Added

• ✨ An onFrame callback can now be provided to renature hooks, which allows you to execute some logic on each call to requestAnimationFrame. The callback is handed a single argument, progress, which is a number between 0 and 1 representing your progress from the from state to the to state. PR by @parkerziegler here.
• ✨ An onAnimationComplete callback can now be provided to renature hooks, which allows you to execute logic when an animation ends. This behaves similarly to adding a listener on the DOM's native animationend event. If a renature animation is stopped or unmounted before it has completed, this ca llback will not be executed. PR by @parkerziegler here.
• ✨ Default configs have been added for all hooks. You'll now get a default physics config loaded if you don't specify a config field on your hook! PR by @parkerziegler here.

Changed

• ⚠️ Breaking Change controller.stop is now the canonical way to stop or pause a renature animation. Previously, if you started an animation by calling controller.start, you could only stop or pause it by accessing a returned stop function.

const { stop } = controller.start();

Now, you can just call controller.stop(). This codifies and simplifies the API – when you want to imperatively start / resume an animation, use controller.start. When you want to stop or pause an animation, whether it was initiated on mount or by controller.start, just use controller.stop. PR by @parkerziegler here.

• ⚠️ Breaking Change The immediate flag was renamed to pause and the logic behind it is now inverted. If pause is set to true, the animation will not start running until controller.start has been called or if the component re-renders and pause evaluates to false. PR by @parkerziegler here.

Diff