Fluency

Fluency is a simple and effective library for incorporating smooth and professional transition effects into your React components. With Fluency, it's never been easier to add entry and exit animations to your components without getting tied up in the intricacies of CSS animations.

Installation

Installing Fluency is as easy as running a simple command in your terminal:

npm install @devclusters/fluency

Or if you prefer yarn:

yarn add @devclusters/fluency

Basic Usage

Here's an example of how you can use Fluency in your application:

import {EnterTransition} from '@devclusters/fluency';

function MyComponent() {
	const [trigger, setTrigger] = React.useState(0);
	const [restart, setRestart] = React.useState(0);

	return (
		<EnterTransition trigger={visible} restart={restart} transitionName="bounceInLeft">
			<div>This is a component that will animate on mount</div>
		</EnterTransition>
	);
}

import {ExitTransition} from '@devclusters/fluency';

function MyComponent() {
	const [trigger, setTrigger] = React.useState(0);
	const [restart, setRestart] = React.useState(0);

	return (
		<ExitTransition trigger={visible} restart={restart} transitionName="bounceInLeft">
			<div>This is a component that will animate on mount</div>
		</ExitTransition>
	);
}

import {LoopTransition} from '@devclusters/fluency';

function MyComponent() {
	const [active, setActive] = React.useState(false);

	return (
		<LoopTransition active={active} transitionName="bounceInLeft">
			<div>This is a component that will animate indefinitely</div>
		</LoopTransition>
	);
}

import {EnterAndExitTransition} from '@devclusters/fluency';

function MyComponent() {
	const [triggerEnter, setTriggerEnter] = React.useState(0);
	const [triggerExit, setTriggerExit] = React.useState(0);

	return (
		<EnterAndExitTransition triggerEnter={triggerEnter} triggerExit={triggerExit} transitionNameEnter="bounceInLeft" transitionNameExit="bounceOutRight">
			<div>This is a component that will animate on mount and unmount</div>
		</EnterAndExitTransition>
	);
}

Props

Here are the props that you can use with Fluency:

• children: The component you wish to animate.
• trigger: A numerical value that controls when the animation should start. The animation begins once this value changes.
• restart: A numerical value that controls when the animation should restart. The animation restarts once this value changes.
• allowReplay: A boolean that decides whether the animation is allowed to replay automatically. It defaults to false.
• transitionName: The name of the animation you want to use. It defaults to 'backInRight'.
• duration: The duration of the animation in milliseconds. It defaults to 300ms.
• sx: An object that may contain custom CSS styles for the child component.

Please note that both trigger and restart must change to initiate and restart the animation, respectively. This provides total control over when the animation begins, ends and replays.

Animations

Attention seekers

bounce flash pulse rubberBand shakeX shakeY headShake swing tada wobble jello heartBeat

Back entrances

backInDown backInLeft backInRight backInUp

Back exits

backOutDown backOutLeft backOutRight backOutUp

Bouncing entrances

bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp

Bouncing exits

bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp

Fading entrances

fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig fadeInTopLeft fadeInTopRight fadeInBottomLeft fadeInBottomRight

Fading exits

fadeOut fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig fadeOutTopLeft fadeOutTopRight fadeOutBottomRight fadeOutBottomLeft

Flippers

flip flipInX flipInY flipOutX flipOutY Lightspeed lightSpeedInRight lightSpeedInLeft lightSpeedOutRight lightSpeedOutLeft

Rotating entrances

rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight

Rotating exits

rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight

Specials

hinge jackInTheBox rollIn rollOut

Zooming entrances

zoomIn zoomInDown zoomInLeft zoomInRight zoomInUp

Zooming exits

zoomOut zoomOutDown zoomOutLeft zoomOutRight zoomOutUp

Sliding entrances

slideInDown slideInLeft slideInRight slideInUp

Sliding exits

slideOutDown slideOutLeft slideOutRight slideOutUp

Enjoy using Fluency in your projects! If you encounter any problems or have any questions, please feel free to open an issue on our GitHub repository.