diff --git a/CHANGELOG.md b/CHANGELOG.md index 6b569abc4c..93a6c1490a 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/packages/framer-motion-3d/package.json b/packages/framer-motion-3d/package.json index b12edba98d..127461af5a 100644 --- a/packages/framer-motion-3d/package.json +++ b/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" } diff --git a/packages/framer-motion/package.json b/packages/framer-motion/package.json index 0a5ff64bf0..cf42deeaf6 100644 --- a/packages/framer-motion/package.json +++ b/packages/framer-motion/package.json @@ -72,7 +72,7 @@ "bundlesize": [ { "path": "./dist/size-rollup-motion.js", - "maxSize": "29.75 kB" + "maxSize": "29.81 kB" }, { "path": "./dist/size-rollup-m.js", @@ -80,11 +80,11 @@ }, { "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", @@ -92,12 +92,12 @@ }, { "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" } diff --git a/packages/framer-motion/src/motion/features/viewport/index.ts b/packages/framer-motion/src/motion/features/viewport/index.ts index a296c02a89..a8e2800075 100644 --- a/packages/framer-motion/src/motion/features/viewport/index.ts +++ b/packages/framer-motion/src/motion/features/viewport/index.ts @@ -13,11 +13,41 @@ export class InViewFeature extends Feature { 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 { } update() { + if (typeof IntersectionObserver === "undefined") return + const { props, prevProps } = this.node const hasOptionsChanged = ["amount", "margin", "root"].some( hasViewportOptionChanged(props, prevProps) diff --git a/packages/framer-motion/src/motion/features/viewport/types.ts b/packages/framer-motion/src/motion/features/viewport/types.ts index 45ceee9d86..e9148a14a1 100644 --- a/packages/framer-motion/src/motion/features/viewport/types.ts +++ b/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 }