Passing IntersectionObserverEntry to viewport listener

framer · Nov 23, 2021 · eefe7e0 · eefe7e0
1 parent 68f5f8c
commit eefe7e0
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@ Framer Motion adheres to [Semantic Versioning](http://semver.org/).
 ### Fixed
 
 -   Ensuring forced renders are batched so sibling `AnimatePresence` renders are triggered together. [Issue](https://github.com/framer/motion/issues/1358)
+-   Viewport enter/leave event handlers are passed `IntersectionObserverEntry` or `null` if `IntersectionObserver` is not supported on the device. [Issue](https://github.com/framer/motion/issues/1364)
 
 ## [5.3.1] 2021-11-19
 

diff --git a/src/motion/features/viewport/types.ts b/src/motion/features/viewport/types.ts
@@ -2,7 +2,9 @@ import { RefObject } from "react"
 import { TargetAndTransition } from "../../../types"
 import { VariantLabels } from "../../types"
 
-export type ViewportEventHandler = () => void
+export type ViewportEventHandler = (
+    entry: IntersectionObserverEntry | null
+) => void
 
 export interface ViewportOptions {
     root?: RefObject<Element>

diff --git a/src/motion/features/viewport/use-viewport.ts b/src/motion/features/viewport/use-viewport.ts
@@ -86,7 +86,7 @@ function useIntersectionObserver(
             const callback = isIntersecting
                 ? props.onViewportEnter
                 : props.onViewportLeave
-            callback?.()
+            callback?.(entry)
         }
 
         return observeIntersection(
@@ -128,7 +128,7 @@ function useMissingIntersectionObserver(
         requestAnimationFrame(() => {
             state.hasEnteredView = true
             const { onViewportEnter } = visualElement.getProps()
-            onViewportEnter?.()
+            onViewportEnter?.(null)
             visualElement.animationState?.setActive(AnimationType.InView, true)
         })
     }, [shouldObserve])