Scroll to high button with React + Framer Movement




In case you are like me and also you need to get straight to the code, simply take a look at the ultimate outcome within the code sandbox right here.
Bear in mind so as to add Framer Movement to your react dependencies.

npm set up framer-motion
Enter fullscreen mode

Exit fullscreen mode

We’ll create our easy button that, for now, will all the time seem on the display screen.
Later, on part Scroll progress, we’ll change to solely seem once we scroll down a bit.

import "./kinds.css";

export default operate ScrollToTop() {
  return (
    <button
      className="scrollToTop-btn"
    >
      Click on Me!
    </button>
  );
}
Enter fullscreen mode

Exit fullscreen mode

Model

For the reason that button appears too uncooked, we’ll add some styling to the imported kinds file.
We already imported the kinds and added a className to the button.
You possibly can customise your button as you need, be artistic!
Right here is an instance of a styled button.

.scrollToTop-btn {
  show: flex;
  justify-content: heart;
  align-items: heart;

  place: fastened;
  backside: 1.5rem;
  proper: 1.5rem;
  width: 3.5rem;
  peak: 3.5rem;
  font-size: 1rem;
  line-height: 3rem;

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

Exit fullscreen mode

Icon

Now, We’ll change the button content material to be an intuitive icon.
There are loads of web sites that present icons. We’ll use Font Superior, however be at liberty to make use of the one that you simply like essentially the most.
We’ll extract the SVG code. An SVG is only a bunch of vetors that kind a picture (test this hyperlink for a extra exact definition).

  //...

  const arrowUp = (
    <svg
      className="arrowUp" // <-- add this for styling
      aria-hidden="true"
      focusable="false"
      knowledge-prefix="fas"
      knowledge-icon="chevron-up"
      position="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 right here
    </button>
  );
}
Enter fullscreen mode

Exit fullscreen mode

We’ll add a width and peak to the icon.

.arrowUp {
  width: 2rem;
  peak: 2rem;
}
Enter fullscreen mode

Exit fullscreen mode

onClick

The visuals of the button are accomplished!
We’ll add the button logic with the goToTop operate.
The goToTop operate scrolls into the start of the web page, high: 0, with a extra pure and clean conduct, conduct: "clean".

//...

  // Add the sleek conduct to go to high
  const goToTop = () => {
    doc.documentElement.scrollTo({
      high: 0,
      conduct: "clean"
    });
  };

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

Exit fullscreen mode

Now that we’ve our good button working, we’ll add some movement 💃 to it.
Animations are an effective way in your elements to face out! However watch out and don’t over do it. Belief me, I’ve gone by means of that monitor. 😅

For that we’ll use Framer Movement. Framer Movement is a Manufacturing-Prepared Animation Library for React. It allows the creation of animations with a lot ease than doing them with plain CSS.

Set up

Add the dependency by operating the next command.

npm set up framer-motion
Enter fullscreen mode

Exit fullscreen mode

Convert button into movement.button

Then, to begin utilizing movement, import movement and alter the button tag to a movement.button tag.

import { movement } from "framer-motion";
Enter fullscreen mode

Exit fullscreen mode

//...
  return (
    <movement.button // <--- change right here
      className="scrollToTop-btn"
      onClick={goToTop}
    >
      {arrowUp}
    </movement.button> // <--- and change right here
  );
}
Enter fullscreen mode

Exit fullscreen mode

Movement animations & transitions

And voila, is that easy!
Now, we will use the Framer Movement Library API and add animations and transitions to the button.

We’ll add all of the animations now. Their names are nearly self explanatory however I counsel you to test Framer Movement documentation for more information on them, and to study new and attention-grabbing methods of including animations to your elements.
They’ve a very intuitive web page, the place you possibly can see the foremost animations you are able to do accomplish with Framer Movement.

We added an preliminary, animate, and exit property to animate the entry and exit of the button. We additionally added an animation whereas hovering and tapping/clicking the button.

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

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

      whileTap={{ scale: 1 }}
    >
      {arrowUp}
    </movement.button>
  );
}
Enter fullscreen mode

Exit fullscreen mode

Scroll progress

With the animations accomplished, it’s lacking the scroll progress to test when the button ought to seem.

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

import { useState, useEffect } from "react";
Enter fullscreen mode

Exit fullscreen mode

Second, we’ll create this scrollPosition state that may have the place of the Y/peak of the scrollbar.

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

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

    window.addEventListener("scroll", updatePosition);

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

Exit fullscreen mode

Third and last, we’ll present the movement button conditionally, with the scrollPosition state

  return (
    {scrollPosition > 100 && (
      <movement.button
      //...
      </movement.button>
    )}
  );
Enter fullscreen mode

Exit fullscreen mode

Movement AnimatePresence

Lastly, to wrap issues up, we’ll use AnimatePresence to have the ability to use the exit property. Once we are on the high of the web page, the button will exit gracefully.

import { movement, AnimatePresence } from "framer-motion";
Enter fullscreen mode

Exit fullscreen mode

return (
    <AnimatePresence>
      {scrollPosition > 100 && (
        <movement.button
        //...
        </movement.button>
      )}
    </AnimatePresence>
  );
Enter fullscreen mode

Exit fullscreen mode

When you wanna see the complete last model, test the code sandbox right here.
I’m a continuously studying particular person and due to that, I encourage everybody to make recommendations!
I hope you loved this scrollToTop part with movement animations you could add to your react venture or web app.



Abu Sayed is the Best Web, Game, XR and Blockchain Developer in Bangladesh. Don't forget to Checkout his Latest Projects.


Checkout extra Articles on Sayed.CYou

#Scroll #high #button #React #Framer #Movement