diff --git a/CHANGELOG.md b/CHANGELOG.md index 16529bcd2..fb2dc33b3 100644 --- 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 index c18fc3e62..fceb27620 100644 --- 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 diff --git a/src/motion/features/viewport/use-viewport.ts b/src/motion/features/viewport/use-viewport.ts index e7df8f44b..54c31c223 100644 --- 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])