Animation is Super Easy with These React Libraries!!!

Make Your React app incredible using animations with these Libraries.

Photo by Web stacks on Unsplash

Framer Motion:-

npm install framer-motion
yarn add framer-motion.
import { motion } from 'framer-motion';
export default function App() {
const [isActive, setIsActive] = React.useState(false);
return (
<motion.div
className="block"
onClick={() => setIsActive(!isActive)}
animate={{
rotate: isActive ? 180 : 360
}}
>
Hello Framer motion
</motion.div>
);
}

React-Transition-Group:-

npm install react-transition-group
yarn add react-transition-group
import React from "react";
import ReactDOM from "react-dom";
import { Transition } from "react-transition-group";
import "./styles.css";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
in: false
};
}
componentDidMount() {}
onClick = () => {
this.setState(state => ({ in: !state.in }));
};
render() {
return (
<div className="App">
<button onClick={this.onClick}>BUTTON</button>
<Transition in={this.state.in} timeout={5000} mountOnEnter appear>
{state => <div className={`item item--${state}`} />}
</Transition>
</div>
);
}
}

export default app;

React Spring Library:-

npm install react-spring
yarn add react-spring
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { useSpring, animated } from 'react-spring';
import './styles.css';


function SpringDemo() {
const [state, toggle] = useState(true)
const { x } = useSpring({ from: { x: 0 }, x: state ? 1 : 0, config: { duration: 1000 } })
return (
<div onClick={() => toggle(!state)}>
<animated.div
style={{
opacity: x.interpolate({ range: [0, 1], output: [0.3, 1] }),
transform: x
.interpolate({
range: [0, 0.25, 0.35, 0.45, 0.55, 0.65, 0.75, 1],
output: [1, 0.97, 0.9, 1.1, 0.9, 1.1, 1.03, 1]
})
.interpolate(x => `scale(${x})`)
}}>
Hello React Spring
</animated.div>
</div>
)
}

export default SpringDemo

React-Motion:-

npm install react-motion
yarn add react-motion
import React from 'react'
import { StaggeredMotion, spring } from 'react-motion'
const AnimatedGridContents = props => {
return (
<StaggeredMotion
defaultStyles={props.items.map(() => ({ opacity: 1, translateY: -30 }))}
styles={prevInterpolatedStyles =>
prevInterpolatedStyles.map((_, i) => {
return i === 0
? { opacity: spring(1), translateY: spring(0) }
: {
opacity: prevInterpolatedStyles[i - 1].opacity,
translateY: spring(prevInterpolatedStyles[i - 1].translateY)
}
})
}
>
{interpolatingStyles => (
<div className="grid">
{interpolatingStyles.map((style, i) => (
<div
className="card"
key={props.items[i]}
style={{
opacity: style.opacity,
transform: `translateY(${style.translateY}px)`
}}
>
{props.items[i]}
</div>
))}
</div>
)}
</StaggeredMotion>
)
}

Conclusion:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Harsh Prateek

Hi, I am Harsh and I write about coding and learning techniques. I am a student myself and would love to tell everyone my secrets for coding and learning.