update framer-motion to 4.0.0

Author: dowdiness

gatsby-browser.js

@@ -20,10 +20,6 @@ import "src/styles/tailwind-utils.css"
 
 import * as React from 'react'
 import Layout from 'src/components/Layout'
-import {
-  MotionConfig,
-  AnimationFeature,
-} from "framer-motion"
 import { Provider } from "jotai"
 import { MDXProvider } from "@mdx-js/react"
 import { YouTube } from 'mdx-embed'
@@ -47,9 +43,7 @@ const wrapRootElement = ({ element }) => {
   return (
     <MDXProvider components={components}>
       <Provider>
-        <MotionConfig features={[AnimationFeature]}>
-          {element}
-        </MotionConfig>
+        {element}
       </Provider>
     </MDXProvider>
   )

gatsby-ssr.js

@@ -7,10 +7,6 @@
 // You can delete this file if you're not using it
 import * as React from 'react'
 import Layout from 'src/components/Layout'
-import {
-  MotionConfig,
-  AnimationFeature,
-} from "framer-motion"
 import { Provider } from "jotai"
 import { MDXProvider } from "@mdx-js/react"
 import { YouTube } from 'mdx-embed'
@@ -29,9 +25,7 @@ const wrapRootElement = ({ element }) => {
   return (
     <MDXProvider components={components}>
       <Provider>
-        <MotionConfig features={[AnimationFeature]}>
-          {element}
-        </MotionConfig>
+        {element}
       </Provider>
     </MDXProvider>
   )

package.json

@@ -19,7 +19,7 @@
     "fontsource-jost": "^4.0.0",
     "fontsource-noto-sans-jp": "^4.0.0",
     "fontsource-noto-serif-jp": "^4.0.0",
-    "framer-motion": "^3.10.0",
+    "framer-motion": "^4.0.0",
     "gatsby": "^3.1.0",
     "gatsby-plugin-draft": "^0.1.0",
     "gatsby-plugin-feed": "^3.1.0",
@@ -101,7 +101,7 @@
     "url": "git+https://github.com/dowdiness/yowai-zine.git"
   },
   "scripts": {
-    "build": "GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES=false gatsby build --log-pages",
+    "build": "gatsby build --log-pages",
     "develop": "gatsby develop",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
     "start": "npm run develop",

src/__generated__/gatsby-types.ts

@@ -0,0 +1,2 @@
+import { domAnimation } from 'framer-motion'
+export default domAnimation

src/components/Layout/domAnimation.ts

@@ -6,11 +6,13 @@ import loadable from '@loadable/component'
 // @ts-ignore
 import ErrorBoundary from 'src/components/Element/ErrorBoundary'
 
-import { m as motion, useViewportScroll, useTransform } from 'framer-motion'
+import { m as motion, useViewportScroll, useTransform, LazyMotion } from 'framer-motion'
 import useMouse from 'src/hooks/useMouse'
 
 const AudioModal = loadable(() => import('src/components/AudioPlayer/Audio'))
 
+const loadFeatures = () => import('./domAnimation').then(res => res.default)
+
 type LayoutProps = {
   location: Location
 }
@@ -22,23 +24,25 @@ const Layout: React.FC<LayoutProps> = ({ children, location }) => {
 
   return (
     <ErrorBoundary>
-      <div
-        className="container"
-      >
-        {/* <Header className="container fixed inset-x-0 top-0 z-40" location={location} /> */}
-        <main>{children}</main>
-        <Footer className="z-40 py-16" />
-        <motion.div
-          className="fixed top-0 right-0 z-50 w-2 h-screen bg-blue-600"
-          style={{ scaleY: multipleScaleY, translateY: '-50%' }}
+      <LazyMotion strict features={loadFeatures}>
+        <div
+          className="container"
+        >
+          {/* <Header className="container fixed inset-x-0 top-0 z-40" location={location} /> */}
+          <main>{children}</main>
+          <Footer className="z-40 py-16" />
+          <motion.div
+            className="fixed top-0 right-0 z-50 w-2 h-screen bg-blue-600"
+            style={{ scaleY: multipleScaleY, translateY: '-50%' }}
+          />
+        </div>
+        <div
+          ref={mouse.cursorRef}
+          id="cursor"
+          className={`fixed top-0 left-0 z-20 pointer-events-none hidden sm:block`}
         />
-      </div>
-      <div
-        ref={mouse.cursorRef}
-        id="cursor"
-        className={`fixed top-0 left-0 z-20 pointer-events-none hidden sm:block`}
-      />
-      <AudioModal />
+        <AudioModal />
+      </LazyMotion>
     </ErrorBoundary>
   )
 }

src/components/Layout/index.tsx

@@ -6785,16 +6785,16 @@ fragment-cache@^0.2.1:
   dependencies:
     map-cache "^0.2.2"
 
-framer-motion@^3.10.0:
-  version "3.10.0"
-  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-3.10.0.tgz#3840612b754aaab6b7857096d7473521b7e3436e"
-  integrity sha512-i+Pp3bwMGHFZw3OnsMJGWeAxlAg6ye6Hbek3xRuoCmGjpOQrGKG7Ra249YFAk32wMSwmAbGUzxTE1fgP3ZOmnQ==
+framer-motion@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-4.0.0.tgz#3eab6d79e9a662ed8dfcfd05e680ba3a6b841672"
+  integrity sha512-j7lPnXEZdpkAelLRU8FhaZC3UbqnZwSTT/W9rSRwb3cKX4eWrekakK86cVkUE79v1HRE9IPzdPVNP9/e8CPRag==
   dependencies:
     framesync "5.2.0"
     hey-listen "^1.0.8"
     popmotion "9.3.1"
     style-value-types "4.1.1"
-    tslib "^1.10.0"
+    tslib "^2.1.0"
   optionalDependencies:
     "@emotion/is-prop-valid" "^0.8.2"
 
@@ -15016,6 +15016,11 @@ tslib@^2.0.0, tslib@~2.0.0, tslib@~2.0.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
   integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==
 
+tslib@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a"
+  integrity sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==
+
 tsutils@^3.17.1:
   version "3.17.1"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"