Issue#5307 - Add framer-motion to the dependency list (nodejs#5318)

MarcelRaschke · Apr 24, 2023 · 68cff74 · 68cff74
1 parent 972c357
commit 68cff74
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "@mdx-js/react": "^2.3.0",
     "classnames": "^2.3.2",
     "feed": "^4.2.2",
+    "framer-motion": "^10.12.4",
     "gray-matter": "^4.0.3",
     "handlebars": "^4.7.7",
     "highlight.js": "^11.7.0",

diff --git a/pages/_app.mdx b/pages/_app.mdx
@@ -1,3 +1,4 @@
+import { MotionConfig } from 'framer-motion';
 import { NodeDataProvider } from '../providers/nodeDataProvider';
 import { LocaleProvider } from '../providers/localeProvider';
 import { SiteProvider } from '../providers/siteProvider';
@@ -10,16 +11,18 @@ export default function App({ Component, pageProps }) {
     <SiteProvider>
       <LocaleProvider i18nData={pageProps.i18nData}>
         <NodeDataProvider nodeVersionData={pageProps.nodeVersionData}>
-          {/* @TODO: This is a temporary solution. We might want to adopt Emotion/StyledComponents here */}
-          <style jsx global>
-            {`
-              body {
-                font: 400 20px/1.5 ${sourceSansPro.style.fontFamily}, 'Open Sans',
-                  Roboto, 'San Francisco', Helvetica, Arial, sans-serif;
-              }
-            `}
-          </style>
-          <Component {...pageProps} />
+          <MotionConfig reducedMotion="user">
+            {/* @TODO: This is a temporary solution. We might want to adopt Emotion/StyledComponents here */}
+            <style jsx global>
+              {`
+                body {
+                  font: 400 20px/1.5 ${sourceSansPro.style.fontFamily}, 'Open Sans',
+                    Roboto, 'San Francisco', Helvetica, Arial, sans-serif;
+                }
+              `}
+            </style>
+            <Component {...pageProps} />
+          </MotionConfig>
         </NodeDataProvider>
       </LocaleProvider>
     </SiteProvider>