diff --git a/package.json b/package.json
index 4dd054e..72a1995 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
"@testing-library/jest-dom": "^5.10.1",
"@testing-library/react": "^10.3.0",
"@testing-library/user-event": "^12.0.7",
+ "framer-motion": "^2.4.1",
"miragejs": "^0.1.40",
"query-string": "^6.13.1",
"react": "^16.13.1",
diff --git a/src/components/App.js b/src/components/App.js
index c46c099..2b8710e 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,8 +1,9 @@
-import React from "react";
+import React, { useState, useEffect, useRef } from "react";
import { Switch, Route, useLocation } from "react-router-dom";
import Reminders from "./Reminders";
import { About } from "./About";
import { Link } from "./UI";
+import { AnimatePresence, motion, AnimateSharedLayout } from "framer-motion";
export default function App() {
let location = useLocation();
@@ -41,6 +42,9 @@ export default function App() {
+
+
+
@@ -49,3 +53,93 @@ export default function App() {
);
}
+
+let id = 1;
+
+const makeItem = () => {
+ let newId = id++;
+ return { id: newId, name: `baz ${newId}` };
+};
+
+const spring = {
+ duration: 0.3,
+ // type: "spring",
+ // damping: 10,
+ // mass: 1,
+ // stiffness: 50,
+};
+
+const Test = () => {
+ let didRenderRef = useRef(false);
+ useEffect(() => {
+ didRenderRef.current = true;
+ }, []);
+ let [array, set] = useState(() => [makeItem(), makeItem(), makeItem()]);
+ // let [array, set] = useState([]);
+
+ const addItem = () => {
+ set((array) => [...array, makeItem()]);
+ };
+
+ const removeItem = (id) => {
+ set((array) => array.filter((el) => el.id !== id));
+ };
+
+ return (
+
+
+
+
+
+
+ {array.map((obj, i) => (
+ ({
+ opacity: 1,
+ transition: didRenderRef.current
+ ? { delay: 0.15, ...spring }
+ : { delay: 0.15 + i * 0.05, ...spring },
+ }),
+ }}
+ initial="hidden"
+ animate="visible"
+ exit="hidden"
+ key={obj.id}
+ className="p-4"
+ >
+
+
+ ))}
+
+
+
+