Scroll to top button with React + Framer Motion

Daniel Castro — Thu, 25 Nov 2021 22:59:41 +0000

TLDR

If you are like me and you want to get straight to the code, just look at the final result in the code sandbox here.
Remember to add Framer Motion to your react dependencies.

npm install framer-motion

ScrollToTop Button

We'll create our simple button that, for now, will always appear on the screen.
Later, on section Scroll progress, we'll change to only appear when we scroll down a bit.

import "./styles.css";

export default function ScrollToTop() {
  return (
    <button
      className="scrollToTop-btn"
    >
      Click Me!
    </button>
  );
}

Style

Since the button looks too raw, we'll add some styling to the imported styles file.
We already imported the styles and added a className to the button.
You can customize your button as you want, be creative!
Here is an example of a styled button.

.scrollToTop-btn {
  display: flex;
  justify-content: center;
  align-items: center;

  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 3.5rem;
  height: 3.5rem;
  font-size: 1rem;
  line-height: 3rem;

  background-color: #007acc;
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
}

Icon

Now, We'll change the button content to be an intuitive icon.
There are a lot of websites that provide icons. We'll use Font Awesome, but feel free to use the one that you like the most.
We'll extract the SVG code. An SVG is just a bunch of vetors that form an image (check this link for a more precise definition).

  //...

  const arrowUp = (
    <svg
      className="arrowUp" // <-- add this for styling
      aria-hidden="true"
      focusable="false"
      data-prefix="fas"
      data-icon="chevron-up"
      role="img"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 448 512"
    >
      <path
        fill="currentColor"
        d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z"
      ></path>
    </svg>
  );

  return (
    <button
      className="scrollToTop-btn"
    >
      {arrowUp} // <--- change here
    </button>
  );
}

We'll add a width and height to the icon.

.arrowUp {
  width: 2rem;
  height: 2rem;
}

onClick

The visuals of the button are completed!
We'll add the button logic with the goToTop function.
The goToTop function scrolls into the beginning of the page, top: 0, with a more natural and smooth behavior, behavior: "smooth".

//...

  // Add the smooth behavior to go to top
  const goToTop = () => {
    document.documentElement.scrollTo({
      top: 0,
      behavior: "smooth"
    });
  };

  return (
    <button
      className="scrollToTop-btn"
      onClick={goToTop} // <--- add this
    >
      {arrowUp}
    </button>
  );
}

Framer Motion

Now that we have our nice button working, we'll add some motion 💃 to it.
Animations are a great way for your components to stand out! But be careful and do not over do it. Trust me, I have gone through that track. 😅

For that we'll use Framer Motion. Framer Motion is a Production-Ready Animation Library for React. It enables the creation of animations with much ease than doing them with plain CSS.

Installation

Add the dependency by running the following command.

npm install framer-motion

Convert button into motion.button

Then, to start using motion, import motion and change the button tag to a motion.button tag.

import { motion } from "framer-motion";

//...
  return (
    <motion.button // <--- change here
      className="scrollToTop-btn"
      onClick={goToTop}
    >
      {arrowUp}
    </motion.button> // <--- and change here
  );
}

Motion animations & transitions

And voila, is that simple!
Now, we can use the Framer Motion Library API and add animations and transitions to the button.

We'll add all the animations now. Their names are almost self explanatory but I advise you to check Framer Motion documentation for more info on them, and to learn new and interesting ways of adding animations to your components.
They have a really intuitive page, where you can see the major animations you can do accomplish with Framer Motion.

We added an initial, animate, and exit property to animate the entry and exit of the button. We also added an animation while hovering and tapping/clicking the button.

//...
  return (
    <motion.button
      className="scrollToTop-btn"
      onClick={goToTop}
      initial={{ y: 100, opacity: 0 }}
      animate={{ y: 0, opacity: 1,
                 transition: { duration: 0.6 } }}
      exit={{ y: 100, opacity: 0,
                 transition: { duration: 0.6 } }}

      whileHover={{
        scale: 1.2,
        transition: { duration: 0.2 }
      }}

      whileTap={{ scale: 1 }}
    >
      {arrowUp}
    </motion.button>
  );
}

Scroll progress

With the animations completed, it is missing the scroll progress to check when the button should appear.

First, we'll import useState and useEffect from react.

import { useState, useEffect } from "react";

Second, we'll create this scrollPosition state that will have the position of the Y/height of the scrollbar.

/...
  const [scrollPosition, setScrollPosition] = useState(0);

  useEffect(() => {
    const updatePosition = () => {
      setScrollPosition(window.pageYOffset);
    };

    window.addEventListener("scroll", updatePosition);

    return () => window.removeEventListener("scroll", updatePosition);
  }, []);
//...

Third and final, we'll show the motion button conditionally, with the scrollPosition state

  return (
    {scrollPosition > 100 && (
      <motion.button
      //...
      </motion.button>
    )}
  );

Motion AnimatePresence

Finally, to wrap things up, we'll use AnimatePresence to be able to use the exit property. When we are at the top of the page, the button will exit gracefully.

import { motion, AnimatePresence } from "framer-motion";

return (
    <AnimatePresence>
      {scrollPosition > 100 && (
        <motion.button
        //...
        </motion.button>
      )}
    </AnimatePresence>
  );

Final result

If you wanna see the full final version, check the code sandbox here.
I am a constantly learning person and because of that, I encourage everyone to make suggestions!
I hope you enjoyed this scrollToTop component with motion animations that you can add to your react project or web app.

DEV Community: Daniel Castro