➡️ controller.set API

This release adds support for a set method on the controller returned by a renature hook. You can use controller.set to animate an element to any CSS state at any time.

To use the controller.set API, just call controller.set with an object containing the CSS properties you want to animate to. For example, to animate an element to a random scale and opacity value every 2 seconds, you can do the following:

import React, { useEffect, FC } from 'react';
import { useFriction } from 'renature';

export const FrictionSet: FC = () => {
  const [props, controller] = useFriction<HTMLDivElement>({
    from: {
      opacity: 0,
    },
    to: {
      opacity: 1,
    },
    config: {
      mu: 0.5,
      mass: 300,
      initialVelocity: 10,
    },
  });

  useEffect(() => {
    const intervalId = setInterval(() => {
      // Call controller.set with a random scale transform and opacity!
      controller.set({
        transform: `scale(${Math.random()})`,
        opacity: Math.random(),
      });
    }, 2000);

    return () => {
      clearInterval(intervalId);
    };
  }, [controller]);

  return <div className="mover mover--magenta" {...props} />;
};

The controller.set API is an imperative escape hatch to allow for orchestrating more complex animations after the initial declarative animation has run. You can also animate to new states simply by updating the to property of the hook definition.

Added

• A set method is now available on controller to imperatively animate to a new CSS state. PRs by @parkerziegler here and here.

Fixed

• eslint-plugin-import was added to standardize import statements across the codebase. PR by @jzandag here.

Diff