page transitions

package-lock.json

@@ -2143,20 +2143,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/react-router": {
-      "version": "6.7.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.7.0.tgz",
-      "integrity": "sha512-KNWlG622ddq29MAM159uUsNMdbX8USruoKnwMMQcs/QWZgFUayICSn2oB7reHce1zPj6CG18kfkZIunSSRyGHg==",
-      "dependencies": {
-        "@remix-run/router": "1.3.0"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "peerDependencies": {
-        "react": ">=16.8"
-      }
-    },
     "node_modules/react-router-dom": {
       "version": "6.7.0",
       "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.7.0.tgz",
@@ -2173,6 +2159,20 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-router-dom/node_modules/react-router": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.7.0.tgz",
+      "integrity": "sha512-KNWlG622ddq29MAM159uUsNMdbX8USruoKnwMMQcs/QWZgFUayICSn2oB7reHce1zPj6CG18kfkZIunSSRyGHg==",
+      "dependencies": {
+        "@remix-run/router": "1.3.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
     "node_modules/react-spinners": {
       "version": "0.13.8",
       "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz",

src/components/global/NewsScroll.tsx

@@ -22,7 +22,7 @@ import { setNewsScroll } from "../../actions/setData";
 
 interface Props {
   title: boolean;
-  category: number;
+  category?: number;
 }
 
 const NewsScroll = ({ title, category }: Props) => {

src/pages/Category.tsx

@@ -1,3 +1,6 @@
+// Modules
+import { motion } from "framer-motion";
+
 // Components
 import { useParams } from "react-router-dom";
 import Aside from "../components/aside/Aside";
@@ -10,7 +13,12 @@ import Placeholder from "../assets/images/placeholder3.png";
 const Category = () => {
   let { category } = useParams();
   return (
-    <main className="category">
+    <motion.main
+      className="category"
+      initial={{ opacity: 0, scale: 0.8 }}
+      animate={{ opacity: 1, scale: 1, transition: { duration: 0.15 } }}
+      exit={{ opacity: 0, scale: 0.8, transition: { duration: 0.15 } }}
+    >
       <div className="container">
         <div className="category-inner">
           <div className="category-left">
@@ -22,7 +30,7 @@ const Category = () => {
           </div>
         </div>
       </div>
-    </main>
+    </motion.main>
   );
 };
 

src/pages/Main.tsx

@@ -1,3 +1,6 @@
+// Modules
+import { motion } from "framer-motion";
+
 // Components
 import Aside from "../components/aside/Aside";
 import NewsScroll from "../components/global/NewsScroll";
@@ -6,21 +9,26 @@ import MainContent from "../components/main/MainContent";
 
 const Main = () => {
   return (
-    <main className="main">
+    <motion.main
+      className="main"
+      initial={{ opacity: 0, scale: 0.8 }}
+      animate={{ opacity: 1, scale: 1, transition: { duration: 0.15 } }}
+      exit={{ opacity: 0, scale: 0.8, transition: { duration: 0.15 } }}
+    >
       <h1 style={{ display: "none" }}>Туркменистан новостной портал</h1>
       <div className="news-section">
         <div className="container">
           <div className="news-inner">
             <MainContent />
             <div className="news-outer-wrapper">
-              <NewsScroll sectionTitle={true} />
+              <NewsScroll title={false} />
               <Aside />
             </div>
             <Videos />
           </div>
         </div>
       </div>
-    </main>
+    </motion.main>
   );
 };
 

src/pages/NewsArticle.tsx

@@ -1,27 +1,28 @@
 // Modules
-import { Link, useParams } from 'react-router-dom';
+import { Link, useParams } from "react-router-dom";
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";
-import { useSelector, useDispatch } from 'react-redux';
+import { useSelector, useDispatch } from "react-redux";
-import { v4 as uuidv4 } from 'uuid';
+import { v4 as uuidv4 } from "uuid";
+import { motion } from "framer-motion";
 
 // Components
-import Aside from '../components/aside/Aside';
+import Aside from "../components/aside/Aside";
-import NewsArticleSlider from '../components/news/NewsArticleSlider';
+import NewsArticleSlider from "../components/news/NewsArticleSlider";
-import Loader from '../components/global/Loader';
+import Loader from "../components/global/Loader";
 
 // Icons
-import { ReactComponent as Share } from '../assets/icons/share.svg';
+import { ReactComponent as Share } from "../assets/icons/share.svg";
 
 // Types
-import { RootState } from '../types/store.types';
+import { RootState } from "../types/store.types";
-import { IPostData } from '../types/store.types';
+import { IPostData } from "../types/store.types";
 
 // Actions
-import { setPost } from '../actions/setData';
+import { setPost } from "../actions/setData";
 
 // Api
-import { Api } from '../api/Api';
+import { Api } from "../api/Api";
-import { url } from '../url';
+import { url } from "../url";
 
 const NewsArticle = () => {
   const { id } = useParams();
@@ -33,18 +34,27 @@ const NewsArticle = () => {
   const [lastLanguage, setLastLanguage] = useState<string>(language);
 
   // redux
-  const data = useSelector<RootState, RootState['post']['data']>((state) => state.post.data);
+  const data = useSelector<RootState, RootState["post"]["data"]>(
+    (state) => state.post.data
+  );
   const dispatch = useDispatch();
 
   useEffect(() => {
-    if (!(data.data.id === parseInt(id as string) && lastLanguage === language)) {
+    if (
-      api.get(data, (data: IPostData['data']) => dispatch(setPost(data)));
+      !(data.data.id === parseInt(id as string) && lastLanguage === language)
+    ) {
+      api.get(data, (data: IPostData["data"]) => dispatch(setPost(data)));
       setLastLanguage(language);
     }
   }, [language, lastLanguage]);
 
   return (
-    <div className="news-article">
+    <motion.div
+      className="news-article"
+      initial={{ opacity: 0, scale: 0.8 }}
+      animate={{ opacity: 1, scale: 1, transition: { duration: 0.15 } }}
+      exit={{ opacity: 0, scale: 0.8, transition: { duration: 0.15 } }}
+    >
       <div className="container">
         <div className="news-article-inner">
           {data.data.id > -1 ? (
@@ -56,13 +66,16 @@ const NewsArticle = () => {
                       <Link
                         key={uuidv4()}
                         to={`/category/${category.id}`}
-                        className="news-article-category">
+                        className="news-article-category"
+                      >
                         {category.name}
                       </Link>
                     ))}
                   </div>
                   <div className="news-article-right">
-                    <h3 className="news-article-date">{data.data.published_at}</h3>
+                    <h3 className="news-article-date">
+                      {data.data.published_at}
+                    </h3>
                   </div>
                 </div>
                 <h2 className="news-article-title">{data.data.title}</h2>
@@ -72,7 +85,8 @@ const NewsArticle = () => {
               </div>
               <p
                 className="news-article-text"
-                dangerouslySetInnerHTML={{ __html: data.data.content_html }}></p>
+                dangerouslySetInnerHTML={{ __html: data.data.content_html }}
+              ></p>
               <button className="share-btn">
                 <Share /> <span>Поделиться</span>
               </button>
@@ -83,7 +97,7 @@ const NewsArticle = () => {
           <Aside />
         </div>
       </div>
-    </div>
+    </motion.div>
   );
 };