Introduction

This extension package of animatable-js allows for easy and lightweight implementation of linear or curved animations in a JSX/TSX environment.

Install by NPM

To install this package in your project, enter the following command.

When you want to update this package, enter npm update animatable-jsx --save in the terminal to run it.

npm install animatable-js, animatable-jsx

How to animate a value to the desired.

This can be resolved using the provided useAnimation or useAnimationController hooks in this package.

export function Root() {
  // is given a current value, an animation instance.
  const [value, animation] = useAnimation(1000);

  useEffect(() => {
      animation.animateTo(1);
  }, []);

  return <h1>Hello, World! {value}</h1>
}

About provided hooks.

The hooks initializes an animation instance and provides an updated animation value over time. It also ensures proper cleanup of the animation when the component is unmounted.

useAnimation()

A custom hook for handling animations.

const [value, instance] =  useAnimation(duration,curve?, initialValue? = 0);

useAnimationController()

A custom hook for handling raw animations.

const [value, instance] =  useAnimationController(
  duration,
  lowerValue? = 0,
  upperValue? = 1,
  initialValue? = lowerValue
);