Есть ли способ, которым я могу очистить свою gsap анимацию с помощью реакции и использования? - PullRequest
Новая
       48

Есть ли способ, которым я могу очистить свою gsap анимацию с помощью реакции и использования?

0 голосов
/ 26 октября 2019

Моя цель - исправить ошибку при работе с большим массивом с использованием ссылок React и Gsap tweens. Можно ли удалить DOM-узлы, когда они покидают порт просмотра в процессе прокрутки пользователем, возможно, в сочетании с React Intersection Observer?

Например .. 

useEffect(() => {
    TweenMax.to(hoverRef.current, .2, { opacity: hovered ? 1 : 0 })
    TweenMax.to(imageRef.current, .5, { scale: hovered ? .5 : 1, opacity: hovered ? .9 : 1, ease: Back.easeOut, y: hovered ? '-12px' : '0px', })
    TweenMax.to(imageRef.current, .2, { delay: .1, y: hovered ? '-12px' : '0px', })
    !props.fromExplore ?
        (TweenMax.to(utencilRef1.current, .5, { x: hovered ? 0 : 20, rotation: hovered ? 0 : 20, ease: Back.easeOut }) &&
            TweenMax.to(utencilRef2.current, .5, { x: hovered ? 0 : -20, rotation: hovered ? 0 : -20, ease: Back.easeOut }))
        :
        TweenMax.to("#nothing-999", 1, { opacity: 0 })
}, [hovered])

VS 

useEffect(() => {
    ...
    return function cleanup(){};
}, [hovered])




const [trackingRef, inView, entry] = useInView({
    threshold: 0,
})
...