React Animation using React-reveal

Hello Everyone Today i am going to show you how to use animation in React using React-reveal

React Reveal is high performance animation library for React. It’s MIT licensed, has a small footprint and written specifically for React in ES6. It can be used to create various cool reveal on scroll effects.

The best part is animation will happen only if you scroll down to the element not on loading time. At the time of loading page ,only those elements will have animation effect which is visible to the screen.Other parts animation will take effect when you scroll down to them.

Here is the docoumentation link for React-reveal-
https://www.react-reveal.com/docs/

Run this command in your terminal-

npm install react-reveal --save

Here you will see how to use it-

<Fade left>
//You other code such heading , paragraph,card ,etc 
//In this block ,every thing will be animated
</Fade>

You can use following values for the effect

• top
• down
• left
• right

Here is an example code -

import React,{useState,useEffect} from 'react'
import Fade from 'react-reveal/Fade'
function App() {
  const [todos, setTodos] = useState([])
  useEffect(() => {
    fetch('http://jsonplaceholder.typicode.com/todos')
    .then(res => res.json())
    .then((data) => {
      setTodos(data)
      console.log(todos)
    })
    .catch(console.log)
    }, [todos])
  return (
    <div className=""> 
    <h1 className="text-primary text-center display-4 mb-5">React fetch api using useEffect</h1>
      <div className="text-center" style={{display:"block",width:"50%",margin:"0 auto"}}>
        <div style={{display:"flex",flexDirection:"column",justifyContent:"center",justifyItems:"center",width:"100%"}}>
          {todos.map((todo) => (
            <Fade left>
             <div className="card bg-dark text-light my-3">
             <div className="card-body">
               <h5 className="card-title">{todo.title}</h5>
               <h6 className="card-subtitle mb-2 text-muted">
               { todo.completed &&
                 <span>
                 Completed
                 </span>
               }
               { !todo.completed &&
                 <span>
                   Pending
                 </span>
               }              
               </h6>
             </div>
           </div>
           </Fade>
          ))}
        </div>
      </div>
    </div>
  )
}
export default App

What we are doing here is fetching some data from api and displaying it in cards
I have put the cards in the animation
So, all the cards will have fade effect on scrolling down

NOTE-
1.You need to install bootstrap also either using cdn or npm if you are going to use this code to see the effect
2.The api fetching part is not discussed here.

THANK YOU FOR CHECKING THIS POST
^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ → https://www.buymeacoffee.com/waaduheck ←

Also check these posts as well
https://dev.to/shubhamtiwari909/javascript-map-with-filter-2jgo

https://dev.to/shubhamtiwari909/e-quotes-3bng

Deploy Website on Netlify

If this post was helpful, please click the clap 👏 button below a few times to show your support for the author 👇

🚀Developers: Learn and grow by keeping up with what matters, JOIN FAUN.