@nahana/react-easy-ease v1.0.2

Full README Coming Soon

REACT-EASY-EASE

About

@nahana/react-easy-ease is an easy to use animation preset library. The package includes numerous easing presets that can be used in React animation libraries such as Motion or as CSS transition cubic-bezier values.

Full Documentation & Demos

Visit the React Easy Ease docs for full documentation as well as previews to each preset.

Installation

npm i @nahana/react-easy-ease

#or

yarn add @nahana/react-easy-ease

#or

pnpm @nahana/react-easy-ease

Usage

React With Motion

import { motion } from 'motion/react'

/** IMPORT EASE PRESET  */
import { RP_EaseInOutBack } from 'react-easy-ease'

export const Animate = () => {
	return (
		<motion.div
			initial={{ scale: 0, opacity: 0 }}
			animate={{ scale: 10, opacity: 1 }}
			transition={{
				duration: 0.5,
				ease: RP_EaseInOutBack,
			}}
		>
			I ZOOM IN
		</motion.div>
	)
}

CSS

/** IMPORT PACKAGE VARS */
@import url('@nahana/react-easy-ease/css');

a {
	color: #fff;
	transition: color 0.5 var(--RP_EaseInOutBack);
}

VALUES

Robert Penner Easing Functions

CSS interpretations by Matthew Lein

Google Material

Andrew Embury

Homepage: yellowlab.tv

Instagram: @yellowlabtv

Cedits & Thanks

• Robert Penner: Creator of the original easing function
  • Easing Functions
  • Easing Equations
• Matthew Lein: Creator of CSS interpretations of Penner's functions
  • Ceaser Animation Tool
• Andrew Embury: Creator of Andrew Embury's extravaganza animation presets
  • yellowlab.tv
  • @yellowlabtv

License

2025 Nate Mitchell, MIT