From 2917bb78910704288ccdf1ef465b202ae2baba4c Mon Sep 17 00:00:00 2001 From: Yugveer Singh Date: Sat, 4 Jan 2025 17:08:43 +0530 Subject: [PATCH 1/9] replaced framer-motion package with motion --- package-lock.json | 39 ++++++++++++++++++++++++++++----- package.json | 2 +- src/components/SnippetList.tsx | 2 +- src/components/SnippetModal.tsx | 2 +- 4 files changed, 37 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index bc4dad3c..e45de524 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "name": "quicksnip", "version": "0.0.0", "dependencies": { - "framer-motion": "^11.15.0", + "motion": "^11.15.0", "prismjs": "^1.29.0", "react": "^18.3.1", "react-dom": "^18.3.1", @@ -3585,10 +3585,11 @@ "node": ">=0.4.x" } }, - "node_modules/framer-motion": { + "node_modules/motion/react": { "version": "11.15.0", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.15.0.tgz", + "resolved": "https://registry.npmjs.org/motion/react/-/motion/react-11.15.0.tgz", "integrity": "sha512-MLk8IvZntxOMg7lDBLw2qgTHHv664bYoYmnFTmE0Gm/FW67aOJk0WM3ctMcG+Xhcv+vh5uyyXwxvxhSeJzSe+w==", + "license": "MIT", "dependencies": { "motion-dom": "^11.14.3", "motion-utils": "^11.14.3", @@ -4665,15 +4666,43 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/motion": { + "version": "11.15.0", + "resolved": "https://registry.npmjs.org/motion/-/motion-11.15.0.tgz", + "integrity": "sha512-iZ7dwADQJWGsqsSkBhNHdI2LyYWU+hA1Nhy357wCLZq1yHxGImgt3l7Yv0HT/WOskcYDq9nxdedyl4zUv7UFFw==", + "license": "MIT", + "dependencies": { + "motion/react": "^11.15.0", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/motion-dom": { "version": "11.14.3", "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.14.3.tgz", - "integrity": "sha512-lW+D2wBy5vxLJi6aCP0xyxTxlTfiu+b+zcpVbGVFUxotwThqhdpPRSmX8xztAgtZMPMeU0WGVn/k1w4I+TbPqA==" + "integrity": "sha512-lW+D2wBy5vxLJi6aCP0xyxTxlTfiu+b+zcpVbGVFUxotwThqhdpPRSmX8xztAgtZMPMeU0WGVn/k1w4I+TbPqA==", + "license": "MIT" }, "node_modules/motion-utils": { "version": "11.14.3", "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.14.3.tgz", - "integrity": "sha512-Xg+8xnqIJTpr0L/cidfTTBFkvRw26ZtGGuIhA94J9PQ2p4mEa06Xx7QVYZH0BP+EpMSaDlu+q0I0mmvwADPsaQ==" + "integrity": "sha512-Xg+8xnqIJTpr0L/cidfTTBFkvRw26ZtGGuIhA94J9PQ2p4mEa06Xx7QVYZH0BP+EpMSaDlu+q0I0mmvwADPsaQ==", + "license": "MIT" }, "node_modules/ms": { "version": "2.1.3", diff --git a/package.json b/package.json index 4148b723..ff3e622e 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "snippets:consolidate": "node ./utils/consolidateSnippets.js" }, "dependencies": { - "framer-motion": "^11.15.0", + "motion": "^11.15.0", "prismjs": "^1.29.0", "react": "^18.3.1", "react-dom": "^18.3.1", diff --git a/src/components/SnippetList.tsx b/src/components/SnippetList.tsx index eb5ef79d..7dbd404c 100644 --- a/src/components/SnippetList.tsx +++ b/src/components/SnippetList.tsx @@ -1,4 +1,4 @@ -import { motion, AnimatePresence } from "framer-motion"; +import { motion, AnimatePresence } from "motion/react"; import { useState } from "react"; import { useAppContext } from "@contexts/AppContext"; diff --git a/src/components/SnippetModal.tsx b/src/components/SnippetModal.tsx index b5e2379e..c062a0a1 100644 --- a/src/components/SnippetModal.tsx +++ b/src/components/SnippetModal.tsx @@ -1,4 +1,4 @@ -import { motion } from "framer-motion"; +import { motion } from "motion/react"; import React from "react"; import ReactDOM from "react-dom"; From 14b3891596829ff8abb1a4ef694fff298e346a7f Mon Sep 17 00:00:00 2001 From: Yugveer Singh Date: Sat, 4 Jan 2025 18:49:10 +0530 Subject: [PATCH 2/9] smoothed modal and list items animations --- src/components/SnippetList.tsx | 82 +++++++++++++++++++-------------- src/components/SnippetModal.tsx | 4 +- src/types/index.ts | 1 + 3 files changed, 49 insertions(+), 38 deletions(-) diff --git a/src/components/SnippetList.tsx b/src/components/SnippetList.tsx index 7dbd404c..c6920cb8 100644 --- a/src/components/SnippetList.tsx +++ b/src/components/SnippetList.tsx @@ -33,42 +33,54 @@ const SnippetList = () => { return ( - - {fetchedSnippets.map((snippet, idx) => ( - - handleOpenModal(snippet)} - whileHover={{ scale: 1.01 }} - whileTap={{ scale: 0.98 }} + + {fetchedSnippets.map((currentSnippet, idx) => { + return ( + -
- {language.lang} -
-

{snippet.title}

- - - ))} + + handleOpenModal({ + ...currentSnippet, + idx: idx + 1, + }) + } + whileHover={{ scale: 1.01 }} + whileTap={{ scale: 0.98 }} +> +
+ {language.lang} +
+

{currentSnippet.title}

+ + + ); + })} diff --git a/src/components/SnippetModal.tsx b/src/components/SnippetModal.tsx index c062a0a1..043adcda 100644 --- a/src/components/SnippetModal.tsx +++ b/src/components/SnippetModal.tsx @@ -47,9 +47,7 @@ const SnippetModal: React.FC = ({ key="modal-content" className="modal | flow" data-flow-space="lg" - initial={{ scale: 0.8, opacity: 0, y: 20 }} - animate={{ scale: 1, opacity: 1, y: 0 }} - exit={{ scale: 0.8, opacity: 0, y: 20 }} + layoutId={snippet.title + snippet.idx?.toString()} transition={{ type: "spring", duration: 0.5 }} >
diff --git a/src/types/index.ts b/src/types/index.ts index b4eac550..e2ae7783 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -14,6 +14,7 @@ export type SnippetType = { code: string; tags: string[]; author: string; + idx?: number; // Add optional idx property }; export type AppState = { From 8a0703bf9e33d5f1e039d58e265a91371c128630 Mon Sep 17 00:00:00 2001 From: Yugveer Singh Date: Sat, 4 Jan 2025 18:54:57 +0530 Subject: [PATCH 3/9] added support for reduced motion --- src/components/SnippetList.tsx | 14 ++++++++------ src/components/SnippetModal.tsx | 8 +++++--- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/src/components/SnippetList.tsx b/src/components/SnippetList.tsx index c6920cb8..ee266c04 100644 --- a/src/components/SnippetList.tsx +++ b/src/components/SnippetList.tsx @@ -1,4 +1,4 @@ -import { motion, AnimatePresence } from "motion/react"; +import { motion, AnimatePresence, useReducedMotion } from "motion/react"; import { useState } from "react"; import { useAppContext } from "@contexts/AppContext"; @@ -13,6 +13,8 @@ const SnippetList = () => { const { fetchedSnippets } = useSnippets(); const [isModalOpen, setIsModalOpen] = useState(false); + const shouldReduceMotion = useReducedMotion(); + if (!fetchedSnippets) return (
@@ -38,14 +40,14 @@ const SnippetList = () => { return ( { y: -20, transition: { delay: idx * 0.01, - duration: 0.09, + duration: shouldReduceMotion ? 0 : 0.09, }, }} transition={{ type: "spring", - duration: 0.5, + duration: shouldReduceMotion ? 0 : 0.5, }} > = ({ }) => { const modalRoot = document.getElementById("modal-root"); + const shouldReduceMotion = useReducedMotion(); + useEscapeKey(handleCloseModal); if (!modalRoot) { @@ -41,14 +43,14 @@ const SnippetModal: React.FC = ({ initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} - transition={{ duration: 0.2 }} + transition={{ duration: shouldReduceMotion ? 0 : 0.2 }} >

{snippet.title}

From 9b18b00cd3ec8fca7ba652ec8d6303f3f036f812 Mon Sep 17 00:00:00 2001 From: Yugveer Singh Date: Sat, 4 Jan 2025 19:11:53 +0530 Subject: [PATCH 4/9] remove unnecessary prop from AnimatePresence in SnippetList component --- src/components/SnippetList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SnippetList.tsx b/src/components/SnippetList.tsx index ee266c04..2fd50bcf 100644 --- a/src/components/SnippetList.tsx +++ b/src/components/SnippetList.tsx @@ -35,7 +35,7 @@ const SnippetList = () => { return ( - + {fetchedSnippets.map((currentSnippet, idx) => { return ( Date: Sat, 4 Jan 2025 19:16:21 +0530 Subject: [PATCH 5/9] doc: added some comments --- src/components/SnippetList.tsx | 3 ++- src/components/SnippetModal.tsx | 2 +- src/types/index.ts | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/SnippetList.tsx b/src/components/SnippetList.tsx index 2fd50bcf..843851a7 100644 --- a/src/components/SnippetList.tsx +++ b/src/components/SnippetList.tsx @@ -40,7 +40,7 @@ const SnippetList = () => { return ( { onClick={() => handleOpenModal({ ...currentSnippet, + // added idx for the layout animation to work correctly idx: idx + 1, }) } diff --git a/src/components/SnippetModal.tsx b/src/components/SnippetModal.tsx index d8c15941..dd31728c 100644 --- a/src/components/SnippetModal.tsx +++ b/src/components/SnippetModal.tsx @@ -49,7 +49,7 @@ const SnippetModal: React.FC = ({ key="modal-content" className="modal | flow" data-flow-space="lg" - layoutId={snippet.title + snippet.idx?.toString()} + layoutId={snippet.title + snippet.idx?.toString()} // unique id for layout animation transition={{ type: "spring", duration: shouldReduceMotion ? 0 : 0.5 }} >
diff --git a/src/types/index.ts b/src/types/index.ts index e2ae7783..255aa631 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -14,7 +14,7 @@ export type SnippetType = { code: string; tags: string[]; author: string; - idx?: number; // Add optional idx property + idx?: number; }; export type AppState = { From cd6c616c3785d0a7d1fa11077f99641f15b4441d Mon Sep 17 00:00:00 2001 From: Yugveer Singh Date: Sat, 4 Jan 2025 21:46:29 +0530 Subject: [PATCH 6/9] removed idx from the snippet type and swtiched to title and description for unique key --- src/components/SnippetList.tsx | 17 ++++++----------- src/components/SnippetModal.tsx | 2 +- src/types/index.ts | 1 - 3 files changed, 7 insertions(+), 13 deletions(-) diff --git a/src/components/SnippetList.tsx b/src/components/SnippetList.tsx index 843851a7..d959dc8c 100644 --- a/src/components/SnippetList.tsx +++ b/src/components/SnippetList.tsx @@ -36,11 +36,12 @@ const SnippetList = () => { - {fetchedSnippets.map((currentSnippet, idx) => { + {fetchedSnippets.map((snippet, idx) => { + const uniqueId = `${snippet.title}-${snippet.description}`; return ( { - handleOpenModal({ - ...currentSnippet, - // added idx for the layout animation to work correctly - idx: idx + 1, - }) - } + onClick={() => handleOpenModal(snippet)} whileHover={{ scale: 1.01 }} whileTap={{ scale: 0.98 }} >
{language.lang}
-

{currentSnippet.title}

+

{snippet.title}

 ); diff --git a/src/components/SnippetModal.tsx b/src/components/SnippetModal.tsx index dd31728c..1981ab77 100644 --- a/src/components/SnippetModal.tsx +++ b/src/components/SnippetModal.tsx @@ -49,7 +49,7 @@ const SnippetModal: React.FC = ({ key="modal-content" className="modal | flow" data-flow-space="lg" - layoutId={snippet.title + snippet.idx?.toString()} // unique id for layout animation + layoutId={`${snippet.title}-${snippet.description}`} transition={{ type: "spring", duration: shouldReduceMotion ? 0 : 0.5 }} >
diff --git a/src/types/index.ts b/src/types/index.ts index 255aa631..b4eac550 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -14,7 +14,6 @@ export type SnippetType = { code: string; tags: string[]; author: string; - idx?: number; }; export type AppState = { From 90c7896c3541dc698f44106682d208872d1a58a8 Mon Sep 17 00:00:00 2001 From: Yugveer Singh Date: Sat, 4 Jan 2025 23:24:59 +0530 Subject: [PATCH 7/9] use language + title as layout id --- src/components/SnippetList.tsx | 2 +- src/components/SnippetModal.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/SnippetList.tsx b/src/components/SnippetList.tsx index d959dc8c..0378f4f3 100644 --- a/src/components/SnippetList.tsx +++ b/src/components/SnippetList.tsx @@ -37,7 +37,7 @@ const SnippetList = () => { {fetchedSnippets.map((snippet, idx) => { - const uniqueId = `${snippet.title}-${snippet.description}`; + const uniqueId = `${language.lang}-${snippet.title}`; return ( = ({ key="modal-content" className="modal | flow" data-flow-space="lg" - layoutId={`${snippet.title}-${snippet.description}`} + layoutId={`${language}-${snippet.title}`} transition={{ type: "spring", duration: shouldReduceMotion ? 0 : 0.5 }} >
From 2a5055a8e233514392fb299b27c5a965a5222dbc Mon Sep 17 00:00:00 2001 From: Yugveer Singh Date: Sun, 5 Jan 2025 15:22:50 +0530 Subject: [PATCH 8/9] fixed package-lock.json --- package-lock.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index e45de524..66d58886 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3585,9 +3585,9 @@ "node": ">=0.4.x" } }, - "node_modules/motion/react": { + "node_modules/framer-motion": { "version": "11.15.0", - "resolved": "https://registry.npmjs.org/motion/react/-/motion/react-11.15.0.tgz", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.15.0.tgz", "integrity": "sha512-MLk8IvZntxOMg7lDBLw2qgTHHv664bYoYmnFTmE0Gm/FW67aOJk0WM3ctMcG+Xhcv+vh5uyyXwxvxhSeJzSe+w==", "license": "MIT", "dependencies": { @@ -4672,7 +4672,7 @@ "integrity": "sha512-iZ7dwADQJWGsqsSkBhNHdI2LyYWU+hA1Nhy357wCLZq1yHxGImgt3l7Yv0HT/WOskcYDq9nxdedyl4zUv7UFFw==", "license": "MIT", "dependencies": { - "motion/react": "^11.15.0", + "framer-motion": "^11.15.0", "tslib": "^2.4.0" }, "peerDependencies": { From 8a1352c7de47ceb7fc31565414db53621e536277 Mon Sep 17 00:00:00 2001 From: Yugveer Singh Date: Sun, 5 Jan 2025 16:00:31 +0530 Subject: [PATCH 9/9] lowered the layout animation duration and changed the easing --- src/components/SnippetList.tsx | 4 ++-- src/components/SnippetModal.tsx | 5 ++++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/SnippetList.tsx b/src/components/SnippetList.tsx index 0378f4f3..1b96925b 100644 --- a/src/components/SnippetList.tsx +++ b/src/components/SnippetList.tsx @@ -60,8 +60,8 @@ const SnippetList = () => { }, }} transition={{ - type: "spring", - duration: shouldReduceMotion ? 0 : 0.5, + ease: [0, 0.75, 0.25, 1], + duration: shouldReduceMotion ? 0 : 0.25, }} > = ({ className="modal | flow" data-flow-space="lg" layoutId={`${language}-${snippet.title}`} - transition={{ type: "spring", duration: shouldReduceMotion ? 0 : 0.5 }} + transition={{ + ease: [0, 0.75, 0.25, 1], + duration: shouldReduceMotion ? 0 : 0.3, + }} >

{snippet.title}

AltStyle によって変換されたページ (->オリジナル) /