How to animate other components in a more complex app?

[AnatuGreen]

I understand how to use this in a simple app. But what if I have a much complex structure. Say I imported other components into my App.js and then I also used React Router in my app, How do I go ahead to animate those different components?

Example of how my App.js file looks:

import NaviButtons from "../src/components/NaviButtons";
import MyStack from "../src/components/MyStack";
import Blog from "../src/components/BlogContent";
import { Routes, Route, Outlet, Link } from "react-router-dom";
import Footer from "./components/Footer";
import Recognition from "./components/Recognition";
import Nav from "../src/components/Nav";
import About from "../src/components/About";
import Services from "../src/components/Services";

function App() {
  return (
        <div>
          <Routes>
            <Route path="/" element={<OnePage />} />
            <Route path="/blog" element={<Blog />} />
          </Routes>
        </div>
  );
}

function OnePage() {
  return (
    <div className="masterContainer">
      <Banner />
      <Services />
      <About />
      <Articles />
      <Recognition />
      <Footer />
    </div>
  );
}