Beautiful UI animation on scroll with React

Want to create beautiful UI animation for your website? Here's 5 easy steps to accomplish that.

 
Here are few easy steps to follow to create beautiful scroll animations.
 

1. Install react-intersection-observer from Github

 

2. Next step is to add useInView function to your component that you want to animate, or to a component you want to control the animation with.

 

Create the useInView function in your component and pass the ref to element you wish to animate.

// Function 
const { ref: elRef, inView: elVisible } = useInView()

// Element
<div ref={elRef}></div>

 
Where ref parameter is responsible for tracking the element, and inView is responsible to let you know when the element is visible on the screen. inView is either true or false.
 
Now that you have the state for when the element is visible on the screen, you can use that state to add dynamic className or style. You can pass it as prop to children elements to animate them, or use it directly in that component.
 

3. Use inView state to add dynamic className or style.

// This is an example of passing the `inView` state as a prop to child component.

// Parent Component
<div ref={elRef}>
   <ChildComponent isVisible={refVisible} />
</div>

// Child Component
const Component = ({ isVisible }) => {
  return (
    <section className={`${s.el} ${isVisible ? s.animate : ""}`}></section>
  );
};

 
Once you added the class for animation you can go to your styles.css and add some styles.
 

4. Add animation styles.

/* Animation */
.el.animate {
  animation: slideUp 1s ease 0s alternate forwards;
}

/* Keyframes */
@keyframes slideUp {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
  }
}

 
You can also pass additional options to the useInView to have more control over the element you wish to animate.
 

5.(OPTIONAL) Customise animation trigger event.

 const { ref: elRef, inView: elVisible } = useInView({
    triggerOnce: true,
    threshold: 0.5,
  });

 
This particular options are triggerOnce - which essentially if set to true triggers the animation only once, the first time you scroll the page, or if set to false it will trigger each time the element is visible on the screen, like scrolling past the element and then back to it, will trigger the animation again.
 
Second options is threshold - which is a value between 0 and 1, which are responsible for triggering the animation when a certain percentage of the element is visible on the screen, where 1 is 100% visible and 0 is 0% visible (which basically means when more than 0% of the element is visible - start the animation).
 

6. Enjoy 🔥

 
 
Thanks for the read. Like, Share, Follow 🙌

Comments

[Gabriel Kunkel]

Awesome. Didn't know about intersection observer.