Adding fallback

CHANGELOG.md

@@ -9,14 +9,7 @@ Undocumented APIs should be considered internal and may change without warning.
 ### Updated
 
 -   Refactored `motion` component features to load without React components.
-
-### Removed
-
--   Fallback behavior for missing `IntersectionObserver`.
-
-### Changed
-
--   No longer making `ProjectionNode` for `display: contents` nodes.
+-   Deprecated fallback behavior for missing `IntersectionObserver`.
 
 ## [9.0.2] 2023-02-07
 

packages/framer-motion-3d/package.json

@@ -60,5 +60,5 @@
         "@react-three/test-renderer": "^9.0.0",
         "@rollup/plugin-commonjs": "^22.0.1"
     },
-    "gitHead": "ee87da357b48f83024e97e581157a5d6f620ce30"
+    "gitHead": "7d3fc4873d8bf31bf2ebed21f080dbee19b1c367"
 }

packages/framer-motion/package.json

@@ -72,32 +72,32 @@
     "bundlesize": [
         {
             "path": "./dist/size-rollup-motion.js",
-            "maxSize": "29.75 kB"
+            "maxSize": "29.81 kB"
         },
         {
             "path": "./dist/size-rollup-m.js",
             "maxSize": "4.68 kB"
         },
         {
             "path": "./dist/size-rollup-dom-animation.js",
-            "maxSize": "14.82 kB"
+            "maxSize": "14.88 kB"
         },
         {
             "path": "./dist/size-rollup-dom-max.js",
-            "maxSize": "25.47 kB"
+            "maxSize": "25.56 kB"
         },
         {
             "path": "./dist/size-webpack-m.js",
             "maxSize": "4.8 kB"
         },
         {
             "path": "./dist/size-webpack-dom-animation.js",
-            "maxSize": "18.84 kB"
+            "maxSize": "18.91 kB"
         },
         {
             "path": "./dist/size-webpack-dom-max.js",
-            "maxSize": "30.37 kB"
+            "maxSize": "30.43 kB"
         }
     ],
-    "gitHead": "ee87da357b48f83024e97e581157a5d6f620ce30"
+    "gitHead": "7d3fc4873d8bf31bf2ebed21f080dbee19b1c367"
 }

packages/framer-motion/src/motion/features/viewport/index.ts

@@ -13,11 +13,41 @@ export class InViewFeature extends Feature<Element> {
 
     private isInView = false
 
+    /**
+     * TODO: Remove this in 10.0
+     */
+    private viewportFallback() {
+        /**
+         * Fire this in an rAF because, at this point, the animation state
+         * won't have flushed for the first time and there's certain logic in
+         * there that behaves differently on the initial animation.
+         */
+        requestAnimationFrame(() => {
+            this.hasEnteredView = true
+            const { onViewportEnter } = this.node.getProps()
+            onViewportEnter && onViewportEnter(null)
+            if (this.node.animationState) {
+                this.node.animationState.setActive(AnimationType.InView, true)
+            }
+        })
+    }
+
     private startObserver() {
         this.unmount()
 
         const { viewport = {} } = this.node.getProps()
-        const { root, margin: rootMargin, amount = "some", once } = viewport
+        const {
+            root,
+            margin: rootMargin,
+            amount = "some",
+            once,
+            fallback = true,
+        } = viewport
+
+        if (typeof IntersectionObserver === "undefined") {
+            if (fallback) this.viewportFallback()
+            return
+        }
 
         const options = {
             root: root ? root.current : undefined,
@@ -74,6 +104,8 @@ export class InViewFeature extends Feature<Element> {
     }
 
     update() {
+        if (typeof IntersectionObserver === "undefined") return
+
         const { props, prevProps } = this.node
         const hasOptionsChanged = ["amount", "margin", "root"].some(
             hasViewportOptionChanged(props, prevProps)

packages/framer-motion/src/motion/features/viewport/types.ts

@@ -11,6 +11,9 @@ export interface ViewportOptions {
     once?: boolean
     margin?: string
     amount?: "some" | "all" | number
+    /**
+     * @deprecated IntersectionObserver fallback will always be disabled from 10.0. Prefer polyfill for older browser support.
+     */
     fallback?: boolean
 }