adding animation on page change

flagrede · Jul 4, 2020 · 993426d · 993426d
1 parent d55e06c
commit 993426d
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 5 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -82,7 +82,7 @@ function App() {
           />
           <ItemsContext.Provider value={contextState}>
             <div className="flex">
-              <ItemsGrid items={items} />
+              <ItemsGrid direction={direction} page={page} items={items} />
             </div>
           </ItemsContext.Provider>
           <NavigationArrow

diff --git a/src/components/CategoriesMenuItem.tsx b/src/components/CategoriesMenuItem.tsx
@@ -15,7 +15,7 @@ const CategoriesMenuItem: React.FC<Props> = ({
 }) => (
   <div
     onClick={() => {
-      setPage([page, 1]);
+      setPage([page, 0]);
     }}
     className={cx(
       {

diff --git a/src/components/ItemsGrid.tsx b/src/components/ItemsGrid.tsx
@@ -1,13 +1,40 @@
 import React from "react";
 import Item from "./Item";
 import { ItemType } from "../data/items.type";
+import { motion } from "framer-motion";
 
 type Props = {
   items: ItemType[];
+  page: number;
+  direction: number;
 };
 
-const ItemsGrid: React.FC<Props> = ({ items }) => (
-  <div className="mx-auto grid grid-cols-3 md:grid-cols-5 gap-6">
+const variants = {
+  enter: (direction: number) => {
+    return {
+      x: direction * 100,
+      opacity: 0,
+    };
+  },
+  center: {
+    x: 0,
+    opacity: 1,
+  },
+};
+
+const ItemsGrid: React.FC<Props> = ({ items, page, direction }) => (
+  <motion.div
+    key={page}
+    className="mx-auto grid grid-cols-3 md:grid-cols-5 gap-6"
+    custom={direction}
+    variants={variants}
+    initial="enter"
+    animate="center"
+    transition={{
+      x: { type: "tween" },
+      opacity: { duration: 0.2 },
+    }}
+  >
     {items.map((item, index) => (
       <Item
         key={`${item.name}-${index}`}
@@ -17,7 +44,7 @@ const ItemsGrid: React.FC<Props> = ({ items }) => (
         itemIndex={index}
       />
     ))}
-  </div>
+  </motion.div>
 );
 
 export default ItemsGrid;