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>
);
}
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: