Skip to content

Commit 8b24e26

Browse files
fezcodefezcode
committed
animations.
1 parent dc3a8af commit 8b24e26

File tree

4 files changed

+95
-17
lines changed

4 files changed

+95
-17
lines changed

‎package-lock.json‎

Lines changed: 43 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
"@testing-library/jest-dom": "^6.9.1",
88
"@testing-library/react": "^16.3.0",
99
"@testing-library/user-event": "^13.5.0",
10+
"framer-motion": "^12.23.24",
1011
"front-matter": "^4.0.2",
1112
"react": "^19.2.0",
1213
"react-dom": "^19.2.0",

‎src/App.js‎

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,13 @@
11
import React from 'react';
2-
import { HashRouter as Router, Routes, Route } from 'react-router-dom';
2+
import { HashRouter as Router } from 'react-router-dom';
33
import Layout from './components/Layout';
4-
import HomePage from './pages/HomePage';
5-
import BlogPage from './pages/BlogPage';
6-
import BlogPostPage from './pages/BlogPostPage';
7-
import ProjectsPage from './pages/ProjectsPage';
8-
import ProjectPage from './pages/ProjectPage';
9-
import AboutPage from './pages/AboutPage';
10-
import NotFoundPage from './pages/NotFoundPage';
4+
import AnimatedRoutes from './components/AnimatedRoutes';
115

126
function App() {
137
return (
148
<Router>
159
<Layout>
16-
<Routes>
17-
<Route path="/" element={<HomePage />} />
18-
<Route path="/blog" element={<BlogPage />} />
19-
<Route path="/blog/:slug" element={<BlogPostPage />} />
20-
<Route path="/projects" element={<ProjectsPage />} />
21-
<Route path="/projects/:slug" element={<ProjectPage />} />
22-
<Route path="/about" element={<AboutPage />} />
23-
<Route path="*" element={<NotFoundPage />} />
24-
</Routes>
10+
<AnimatedRoutes />
2511
</Layout>
2612
</Router>
2713
);

‎src/components/AnimatedRoutes.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React from 'react';
2+
import { Routes, Route, useLocation } from 'react-router-dom';
3+
import { AnimatePresence, motion } from 'framer-motion';
4+
import HomePage from '../pages/HomePage';
5+
import BlogPage from '../pages/BlogPage';
6+
import BlogPostPage from '../pages/BlogPostPage';
7+
import ProjectsPage from '../pages/ProjectsPage';
8+
import ProjectPage from '../pages/ProjectPage';
9+
import AboutPage from '../pages/AboutPage';
10+
import NotFoundPage from '../pages/NotFoundPage';
11+
12+
const pageVariants = {
13+
initial: {
14+
opacity: 0
15+
},
16+
in: {
17+
opacity: 1
18+
},
19+
out: {
20+
opacity: 0
21+
}
22+
};
23+
24+
const pageTransition = {
25+
type: "tween",
26+
ease: "easeInOut",
27+
duration: 0.3
28+
};
29+
30+
function AnimatedRoutes() {
31+
const location = useLocation();
32+
33+
return (
34+
<AnimatePresence mode="wait">
35+
<Routes location={location} key={location.pathname}>
36+
<Route path="/" element={<motion.div initial="initial" animate="in" exit="out" variants={pageVariants} transition={pageTransition}><HomePage /></motion.div>} />
37+
<Route path="/blog" element={<motion.div initial="initial" animate="in" exit="out" variants={pageVariants} transition={pageTransition}><BlogPage /></motion.div>} />
38+
<Route path="/blog/:slug" element={<motion.div initial="initial" animate="in" exit="out" variants={pageVariants} transition={pageTransition}><BlogPostPage /></motion.div>} />
39+
<Route path="/projects" element={<motion.div initial="initial" animate="in" exit="out" variants={pageVariants} transition={pageTransition}><ProjectsPage /></motion.div>} />
40+
<Route path="/projects/:slug" element={<motion.div initial="initial" animate="in" exit="out" variants={pageVariants} transition={pageTransition}><ProjectPage /></motion.div>} />
41+
<Route path="/about" element={<motion.div initial="initial" animate="in" exit="out" variants={pageVariants} transition={pageTransition}><AboutPage /></motion.div>} />
42+
<Route path="*" element={<motion.div initial="initial" animate="in" exit="out" variants={pageVariants} transition={pageTransition}><NotFoundPage /></motion.div>} />
43+
</Routes>
44+
</AnimatePresence>
45+
);
46+
}
47+
48+
export default AnimatedRoutes;

0 commit comments

Comments
 (0)