DEV Community

Cover image for Animating React App in Less than a Minute
Ranjan Singh
Ranjan Singh

Posted on

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 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
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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.

Top comments (3)

Collapse
 
naucode profile image
Al - Naucode

Great article, keep the good work! Liked and followed! 🚀

Collapse
 
ranjan profile image
Ranjan Singh

Thanks for the kind words I apreciate that.

Collapse
 
mbkdev60 profile image
mbkdev60

Well done, i like it 😉