An Interest In:
Web News this Week
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
Animating React App in Less than a Minute
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 autoanimate
form @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.jsximport { 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.
Original Link: https://dev.to/ranjan/animating-react-app-in-less-than-a-minute-43p6
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To