@raidipesh78/re-motion NPM

Re-Motion

Powerful React animation library

Installation

Install with npm:

npm i @raidipesh78/re-motion

Install with yarn:

yarn add @raidipesh78/re-motion

Features

1. Animated Transition with useTransition hook

Example

import { useTransition, animated } from "@raidipesh78/re-motion";

export default function App() {
	const [x, setX] = useTransition(0);

	const animate = () => {
		setX({ toValue: 100 }); // set to new value to animate
	}

	return (...);
}

2. Mounting and Unmounting with useMount hook

Example

import { useMount, animated } from '@raidipesh78/re-motion';

export default function App() {
  const [visible, setVisible] = useState(false);

  const open = useMount(visible, {
    from: 0,
    enter: 1,
    exit: 0,
  });

  return open((animation, mounted) => mounted && <animated.div />);
}

3. Dynamic Animations

Different animation configuration can be set while setting the Transition Value to new value

Example - Dynamic animation with useTransition hook

import { useTransition, animated } from "@raidipesh78/re-motion";

export default function App() {
	const [x, setX] = useTransition(0);

	const animateRight = () => {
		setX({
			toValue: 200,
			// here is timing configuration
			config: {
				duration: 2000,
			},
		});
	};

	const animateLeft = () => {
		setX({
			toValue: 0,
			// here is spring configuration
			config: {
				mass: 1,
				friction: 10,
				tension: 260,
			},
		});
	};

	return (...);
}

Example - Dynamic animation with useMount hook

import { useMount, animated } from "@raidipesh78/re-motion";

export default function App() {
	const [open, setOpen] = useState(false);

	const mount = useMount(open, {
		from: 0,
		enter: 1,
		exit: 0,
		// exit config
		exitConfig: {
			mass: 1,
			friction: 5,
			tension: 300,
		},
		// enter config
		enterConfig: {
			duration: 100,
		},
	});

	const animate = () => {
		setOpen((prev) => !prev);
	};

	return (...);
}

4. Multi-stage Transition Support

useTransition hook's update method to accept async function to handle multi-stage transition

const [x, setX] = useTransition(0);

// ...

setX(async (next) => {
  await next({ toValue: 100 });
  await delay(1000);
  await next({ toValue: 500 });
});

5. Interpolations

interpolateNumbers and interpolateTransitionValue functions to handle mathematical and transition value interpolations

const [x, setX] = useTransition(0);

// interpolating _x_ value into _backgroundColor_
const backgroundColor = interpolateTransitionValue(
  x,
  [0, 500],
  ['red', 'black']
);