将 GSAP Vanilla JS 转换为 GSAP React JS

如何解决将 GSAP Vanilla JS 转换为 GSAP React JS

我想将下面的 Vanilla JS 代码转换为 React JS 代码。我试图用 React Hooks 转换它们，但它不起作用。可以通过提供代码解决方案或参考链接来帮助我学习。

gsap.registerPlugin(ScrollTrigger);

const sections = document.querySelectorAll('.rg__column')

function initHoverReveal() {

    sections.forEach(section => {
        section.imageBlock = section.querySelector('.rg__image')
        section.image = section.querySelector('.rg__image img')
        section.mask = section.querySelector('.rg__image--mask')
        section.text = section.querySelector('.rg__text')
        section.textCopy = section.querySelector('.rg__text--copy')
        section.textMask = section.querySelector('.rg__text--mask')
        section.textP = section.querySelector('.rg__text--copy p')

        gsap.set([section.imageBlock,section.textMask],{yPercent: -101})
        gsap.set([section.mask,section.textP],{yPercent: 100})
        gsap.set(section.image,{scale: 1.2})

        section.addEventListener('mouseenter',createHoverReveal)
        section.addEventListener('mouseleave',createHoverReveal)

    })
}

function getTextHeight(textCopy) {
    return textCopy.clientHeight
}

function createHoverReveal(e) {
    // console.log(e.type)

    const {imageBlock,mask,text,textCopy,textMask,textP,image} = e.target

    let tl = gsap.timeline({
        defaults: {
            duration: 0.7,ease: 'Power4.out'
        }
    })

    if (e.type === 'mouseenter') {
        tl
        .to([mask,imageBlock,textP],{yPercent: 0})
        .to(text,{y: () => -getTextHeight(textCopy)/2},0)
        .to(image,{duration: 1.1,scale: 1},0)
    } else if(e.type === 'mouseleave') {
        tl
        .to([mask,{yPercent: 100})
        .to([imageBlock,textMask],{yPercent: -101},0)
        .to(text,{y: 0},{scale: 1.2},0)
    }

    return tl
}