This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Ranjan Singh
Motivation:
Building any kind of Web app requires Animations to look good we can add Animation by either third-party Libs like Framer motion or plain old CSS but problem is all of these options needs us to write a ton of code and define all animation timing and stuff we are going to skip all of those today and use Autoanimate to do the animation for us.
Introduction :
Autoanimate is a zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, Svelte, or any other JavaScript application.
Installation :
yarn add @formkit/auto-animate
that's all to install and config.
Usase :
Just import autoanimateform @formkit/auto-animate and pass refrence of the parent element using useRef.
Now all children element will be animated whenever the are added, removed, or moved.
import { useState, useRef, useEffect } from 'react'
import autoAnimate from '@formkit/auto-animate'
const Dropdown = () => {
const [show, setShow] = useState(false)
const parent = useRef(null)
useEffect(() => {
parent.current && autoAnimate(parent.current)
}, [parent])
const reveal = () => setShow(!show)
return <div ref={parent}>
<strong className="dropdown-label" onClick={reveal}>Click me to open!</strong>
{ show && <p className="dropdown-content" >Lorum ipsum...</p> }
</div>
}
export default Dropdown
that's it your Dropdown is animated.
you can pass any element's ref and all child Elements will be animated like List as well.
Customization :
Autoanimate also provides useAutoAnimate hook to customise animation if we need it.
App.jsx
import { useState } from 'react'
import { useAutoAnimate } from '@formkit/auto-animate/react'
const App = function () {
const [items, setItems] = useState([0, 1, 2])
const [parent] = useAutoAnimate({ duration: 500 })
const add = () => setItems([...items, items.length])
return <>
<ul ref={parent}>
{items.map(
item => <li key={item}>{ item }</li>
)}
</ul>
<button onClick={add}>Add number</button>
<button onClick="{() => enableAnimations(false)}">Disable</button>
</>
}
export default App
this is post is focussed on React it's even easier on Vanilla JS basically you can use this on Virtually any JS project.
Here is the Link for official Website Cheers.
This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Ranjan Singh
Ranjan Singh | Sciencx (2022-09-17T15:21:00+00:00) Animating React App in Less than a Minute. Retrieved from https://www.scien.cx/2022/09/17/animating-react-app-in-less-than-a-minute/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.