如何以更高效的方式为这种遮蔽效果制作动画？

Question

基本上我有这个图像。首先

这里发生的是当我点击它的时候。它会弹出白色条，然后从右到左和从左到右移除这些层，然后中间会弹出一些东西。

我正在使用它的反应。但是，是的，这似乎是可能的，但我认为这里的技术非常丰富并且不利于性能。因为我要一份 THE RISING PHASE 1 的双份副本。 然后使用剪辑路径。

这是代码...

            <div className="can-opener flex items-center justify-center">
                <div className="white1"></div>
                <div className="white2"></div>
                <div className="wrapper tp">
                    <div className="hero">
                        <h1 className="hero__heading"> THE RISING </h1>
                    </div>
                </div>
                <div className="wrapper bt">
                    <div className="hero_filter">
                        <h1 className="hero__heading2"> PHASE 1 </h1>
                    </div>
                </div>
            </div>

这是 SCSS。

.theme {
    .entitle-theme {

        .can-opener {
            width: 100%;
            height: 100%;
            // clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);

        }

        .wrapper {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            
        }
        
        .hero,.hero_filter {
            display: grid;
            background: url(horizon.png) 50% 50%/cover;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .hero_filter {
            filter: grayscale(70%);
        }

        .wrapper.tp {
            --icl-p:0%;
            --icl-r:0%;
            clip-path: polygon(0 calc(45% + var(--icl-p)), 100% calc(45% + var(--icl-p)), 100% calc(45% + var(--icl-r)), 0 calc(45% + var(--icl-r)));
            top: 40%;
            // animation: openingTheme1 2s cubic-bezier(.35,.62,.56,.99) 1s forwards;
        }
        .wrapper.bt {
            clip-path: polygon(0 calc(45% + var(--icl-p)), 100% calc(45% + var(--icl-p)), 100% calc(45% + var(--icl-r)), 0 calc(45% + var(--icl-r)));
            bottom: 40%;
            // animation: openingTheme2 2s cubic-bezier(.35,.62,.56,.99) 1s forwards;
        }
    }
}

@keyframes openingTheme1 {
    0% {
        // clip-path: polygon(0 61%, 100% 60%, 100% 37%, 0 37%);
        top: 40%;
    }
    100% {
        // clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
        top: 30%;
    }
}

@keyframes openingTheme2 {
    0% {
        // clip-path: polygon(0 61%, 100% 60%, 100% 37%, 0 37%);
        bottom: 40%;
    }
    100% {
        // clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
        bottom: 30%;
    }
}

Gsap

            const tl = gsap.timeline({})
            tl
            .to('.entitle-theme .wrapper.tp',{
                "--icl-p":"55%",
                "--icl-r":"-45%",
                top:"30%",
                duration:2,
                ease:"power2.inOut"
            })
            .to('.entitle-theme .wrapper.bt',{
                "--icl-p":"55%",
                "--icl-r":"-45%",
                bottom:"30%",
                duration:2,
                ease:"power2.inOut"
            },"-=2")

这段代码只是为了给你一个洞察力，但它实际上并没有图像中的东西所以我需要一点，如果有人能给我我该怎么做？