4.2.1 • Published 9 months ago

@raidipesh78/re-motion v4.2.1

Weekly downloads
-
License
MIT
Repository
github
Last release
9 months ago

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']
);

License

MIT

4.2.1

9 months ago

4.2.0

9 months ago

4.1.0

10 months ago

4.1.0-alpha.0

10 months ago

4.0.0-alpha.3

11 months ago

4.0.0-alpha.1

11 months ago

4.0.0-alpha.2

11 months ago

4.0.0-alpha.0

11 months ago

3.0.4

1 year ago

3.0.3

1 year ago

3.2.0

12 months ago

3.0.2

1 year ago

3.0.1

1 year ago

3.0.7

1 year ago

3.0.6

1 year ago

3.0.5

1 year ago

3.0.0

1 year ago

4.0.1

11 months ago

4.0.0

11 months ago

3.2.0-alpha.0

12 months ago

3.3.0

12 months ago

3.1.2

12 months ago

3.1.1

12 months ago

3.1.0

12 months ago

2.1.1

3 years ago

3.0.0-alpha.0

3 years ago

2.1.1-alpha.0

3 years ago

2.0.1-alpha.1

3 years ago

2.0.1-alpha.2

3 years ago

2.0.1

3 years ago

2.0.0

3 years ago

2.0.0-alpha.7

3 years ago

1.6.0

3 years ago

2.0.0-alpha.8

3 years ago

2.0.0-alpha.9

3 years ago

2.0.0-alpha.11

3 years ago

2.0.0-alpha.3

3 years ago

2.0.0-alpha.10

3 years ago

2.0.0-alpha.4

3 years ago

2.0.0-alpha.5

3 years ago

2.0.0-alpha.6

3 years ago

2.0.0-alpha.0

3 years ago

2.0.0-alpha.1

3 years ago

2.0.0-alpha.2

3 years ago

2.0.0-alpha.12

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.6.0-alpha.1

3 years ago

1.0.6

3 years ago

1.6.0-alpha.0

3 years ago

1.6.0-alpha.2

3 years ago

1.0.2

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago