Emeka Orji
Emeka Orji

Reputation: 306

React-reveal on scroll is being affected by Scroll-to-top component on location change

I'm building a website and I'm using react-reveal to animate content on my pages(home page about page, and contact page) as I scroll to them,

Then I noticed that the way react navigate pages is through the 'react-router' which just renders a new component when a link is clicked(or location changes) and not refreshing the whole page entirely,

This means whenever I switch to a new page, the scroll/scroll-bar position on the previous page does not refresh. Then I found a solution here: a scrollToTop() function that runs every time a new page is rendered

import React, { useEffect } from "react";
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';

import HomePage from '../pages/HomePage';
import AboutPage from '../pages/AboutPage';
import ContactPage from '../pages/ContactPage';

const ScrollToTop = () => {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
};

function AppRouter() {
  return (
    <>
      <Router>
        <ScrollToTop />
        <Routes>
          <Route path='/' element={<HomePage />} />
          <Route path='/about' element={<AboutPage />} />
          <Route path='/contact' element={<ContactPage />} />
        </Routes>
      </Router>
    </>
  );
}

ReactDOM.render(<AppRouter />, document.getElementById('root'));

But now the problem is whenever I navigate to a page, it scrolls to the top and all the animations that react-reveal offers have been triggered already while the scrollToTop() ran on page render.

So now when user scrolls down the page, there are no animations to display

Question:

  • How do force my page to start at the top without using the scrollToTop() function

or

  • How do I activate react-reveal only when the page has scrolled to the top

I have searched here and only found solution of scrollToTop(), but this removes the reveal on scroll effects

Upvotes: 1

Views: 643

Answers (0)

Related Questions