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

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.

Comments

[Al - Naucode]

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

[Ranjan Singh]

Thanks for the kind words I apreciate that.

[mbkdev60]

Well done, i like it 😉