37 lines
853 B
JavaScript
37 lines
853 B
JavaScript
import gsap from 'gsap'
|
|
|
|
export default (timelineSetup = () => {}) => {
|
|
const timelines = new WeakMap()
|
|
const getTimeline = (el) => {
|
|
if (!timelines.has(el)) {
|
|
const tl = gsap.timeline({ paused: true })
|
|
|
|
timelines.set(el, tl)
|
|
}
|
|
return timelines.get(el)
|
|
}
|
|
const onEnter = (el, done) => {
|
|
const tl = getTimeline(el)
|
|
|
|
tl.clear()
|
|
timelineSetup?.(tl, el)
|
|
|
|
tl.eventCallback('onReverseComplete', null)
|
|
tl.eventCallback('onComplete', done)
|
|
tl.play()
|
|
}
|
|
const onLeave = (el, done) => {
|
|
el.style.pointerEvents = 'none'
|
|
|
|
const tl = getTimeline(el)
|
|
|
|
tl.eventCallback('onComplete', null)
|
|
tl.eventCallback('onReverseComplete', done)
|
|
tl.reverse()
|
|
}
|
|
|
|
return {
|
|
onEnter,
|
|
onLeave,
|
|
}
|
|
}
|