103 lines
3.8 KiB
TypeScript
103 lines
3.8 KiB
TypeScript
'use client'
|
|
|
|
import { useGSAP } from "@gsap/react"
|
|
import { ScrollTrigger } from "gsap/all"
|
|
import type { RefObject } from "react"
|
|
import { GSAP_DEBUG, useGsapContext } from "~/app/_providers/GsapProvicer"
|
|
|
|
export type UseRevealOptions = {
|
|
position: gsap.Position
|
|
/** Skip the orchestrated entrance and let ScrollTrigger drive from the start. */
|
|
scrollOnly?: boolean
|
|
/**
|
|
* Reveal once and keep it: after the element animates in (entrance or first
|
|
* scroll-in) it never reverses on leave. Default false = animate out at the
|
|
* top and back in on scroll-up.
|
|
*/
|
|
once?: boolean
|
|
debugId?: string
|
|
/**
|
|
* Build the hidden -> shown animation for `el`. It must be a single,
|
|
* *independent* animation (not added to any timeline): `play()` reveals,
|
|
* `reverse()` hides. The hook pauses it, schedules its entrance through the
|
|
* shared timeline, and lets a ScrollTrigger drive the very same animation on
|
|
* scroll — so the two modes never fight over the element.
|
|
*/
|
|
makeReveal: (el: HTMLElement) => gsap.core.Tween | gsap.core.Timeline
|
|
}
|
|
|
|
/**
|
|
* Shared reveal behavior for cards, text and pop-ups: an element in view at
|
|
* load plays an orchestrated timeline entrance, then hands the *same* tween to
|
|
* a ScrollTrigger that animates it out at the top and back in on scroll-up. An
|
|
* element off-screen at load is ScrollTrigger-driven from the start.
|
|
*/
|
|
export function useReveal(
|
|
ref: RefObject<HTMLElement | null>,
|
|
{ position, scrollOnly = false, once = false, debugId, makeReveal }: UseRevealOptions,
|
|
) {
|
|
const ctx = useGsapContext()
|
|
useGSAP(() => {
|
|
const el = ref.current
|
|
if (!el || !ctx) return
|
|
|
|
const scroller = ctx.getScroller()
|
|
const scrollerEl = scroller instanceof Element ? scroller : undefined
|
|
|
|
const rect = el.getBoundingClientRect()
|
|
let top = 0
|
|
let bottom = window.innerHeight
|
|
if (scrollerEl) {
|
|
const r = scrollerEl.getBoundingClientRect()
|
|
top = r.top
|
|
bottom = r.top + r.height
|
|
}
|
|
const isInView = rect.bottom > top && rect.top < bottom
|
|
|
|
const reveal = makeReveal(el)
|
|
// A reveal that animates height (pop-ups) shifts every trigger below it.
|
|
// Re-measure as it animates so positions track the real layout instead of
|
|
// only correcting at the very end. requestRefresh is throttled + deferred to
|
|
// the next frame, so this won't re-enter a ScrollTrigger callback.
|
|
reveal.eventCallback("onUpdate", () => ctx.requestRefresh())
|
|
reveal.pause()
|
|
|
|
const baseTrigger = {
|
|
trigger: el,
|
|
start: "top bottom",
|
|
end: "bottom top",
|
|
scroller: scrollerEl,
|
|
markers: GSAP_DEBUG,
|
|
id: GSAP_DEBUG ? debugId : undefined,
|
|
}
|
|
// Full behavior: in at the bottom, out at the top, and back on scroll-up.
|
|
const addReplayTrigger = () =>
|
|
ScrollTrigger.create({
|
|
...baseTrigger,
|
|
onEnter: () => reveal.play(),
|
|
onEnterBack: () => reveal.play(),
|
|
onLeave: () => reveal.reverse(),
|
|
onLeaveBack: () => reveal.reverse(),
|
|
})
|
|
|
|
if (isInView && !scrollOnly) {
|
|
// The shared timeline only decides *when* the entrance starts; the reveal
|
|
// plays independently so the ScrollTrigger can take it over afterwards.
|
|
ctx.schedule(() => reveal.play(), position)
|
|
// `once` elements keep their revealed state — no scroll trigger at all.
|
|
if (!once) ctx.onReady(addReplayTrigger)
|
|
} else if (isInView) {
|
|
// scrollOnly + already on screen: no enter crossing will fire, so reveal
|
|
// now. Keep a trigger for scroll-out unless this is a `once` element.
|
|
reveal.play()
|
|
if (!once) addReplayTrigger()
|
|
} else if (once) {
|
|
// Off-screen: reveal when first reached, then self-destruct so it never
|
|
// reverses.
|
|
ScrollTrigger.create({ ...baseTrigger, once: true, onEnter: () => reveal.play() })
|
|
} else {
|
|
addReplayTrigger()
|
|
}
|
|
}, { dependencies: [] })
|
|
}
|