Merge pull request #1365 from framer/fix/viewport-listener-arg

Passing IntersectionObserverEntry to viewport listener

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
 

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>

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])