Transition effect when button gets visible/invisible in react

I have this app that upon going down 500px, a scroll to top button shows up and upon going back up, it disappears. But the effect of it is quick and there’s no animation to it:

JS

const ScrollTop = () => {
  const [visible, setVisible] = useState(false);

  // Show Button After Scrolling Down More than 500px
  const toggleVisible = () => {
    if (
      document.body.scrollTop > 500 ||
      document.documentElement.scrollTop > 500
    ) {
      setVisible(true);
    } else {
      setVisible(false);
    }
  };

  // Listen for Scrolling Event
  window.addEventListener("scroll", toggleVisible);

  // Get Back Top when Clicked
  const handleScroll = () => {
    window.scrollTo({
      top: 0,
    });
  };

  return (
    <button
      id="back-to-top"
      style={{ display: visible ? "block" : "none" }}
      onClick={handleScroll}
      title="Go To Top"
    >
      <i className="fas fa-chevron-circle-up"></i>
    </button>
  );
};

CSS

#back-to-top {
  background: none;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
  position: fixed;
  bottom: 30px;
  right: 20px;
  color: rgb(255, 51, 0);
  z-index: 99;
  font-size: 2.5rem;
}

#back-to-top:hover {
  color: rgb(255, 0, 140);
}

Is there any way in CSS and JS to add a transition effect to its behavior so it’ll smoothly fade in and out?

Answer

For styling I suggest conditionally applying a classname when you want to display the back-to-top button. You will also want to move the adding (and removing) of the window scroll listener into an useEffect hook. The useEffect hook should add the event listener and return a cleanup function to remove it when the ScrollTop component unmounts. Provide false as the third argument so you use passive listeners.

const ScrollTop = () => {
  const [visible, setVisible] = useState(false);

  // Show Button After Scrolling Down More than 500px
  const toggleVisible = () => {
    if (
      document.body.scrollTop > 500 ||
      document.documentElement.scrollTop > 500
    ) {
      setVisible(true);
    } else {
      setVisible(false);
    }
  };

  useEffect(() => {
    // Listen for Scrolling Event
    window.addEventListener("scroll", toggleVisible, false);
    return () => {
      window.removeEventListener("scroll", toggleVisible, false);
    }
  }, []);

  // Get Back Top when Clicked
  const handleScroll = () => {
    window.scrollTo({
      top: 0,
    });
  };

  return (
    <button
      id="back-to-top"
      className={visible ? "back-to-top-visible" : null}
      onClick={handleScroll}
      title="Go To Top"
    >
      <i className="fas fa-chevron-circle-up"></i>
    </button>
  );
};

CSS – How you want to transition is up to you, but the basic starting point is to define a transition rule with property/ies to transition, a duration, easing/timing function, and delay. For the example I chose to transition the scaling. Start with an initial scaling value of 0, and when the back-to-top-visible classname is applied end with a scaling value of 1.

Using CSS transitions

#back-to-top {
  background: none;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
  position: fixed;
  bottom: 30px;
  right: 20px;
  color: rgb(255, 51, 0);
  z-index: 99;
  font-size: 2.5rem;
  transform: scale(0);
  transition: all 0.5s ease-in-out;
}

#back-to-top:hover {
  color: rgb(255, 0, 140);
}

#back-to-top.back-to-top-visible {
  transform: scale(1);
}