GSAP ScrollTrigger动画期间视频无法铺满全屏的问题求助

嘿，我最近在做一个落地页，想实现一个用GSAP + ScrollTrigger驱动的视频全屏展开动画，但遇到个头疼的问题——视频始终没法完全铺满屏幕，周围总有一圈空白区域，实在搞不定了😫

先给大家看看当前的效果：

我的核心代码大概是这样的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 引入GSAP和ScrollTrigger的相关文件 -->
    <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>
</head>
<body>
    <video class="fullscreen-video" src="my-video.mp4" muted loop playsinline></video>

    <script>
        gsap.registerPlugin(ScrollTrigger);
        
        gsap.to(".fullscreen-video", {
            scrollTrigger: {
                trigger: ".fullscreen-video",
                start: "top top",
                end: "bottom bottom",
                scrub: true,
                markers: true // 方便调试触发范围
            },
            width: "100vw",
            height: "100vh"
        });
    </script>
</body>
</html>

我自己排查了下，总结了几个可能的问题方向，也给大家分享下解决思路：

• 视频宽高比适配问题：如果视频原生宽高比和屏幕不匹配，单纯设置宽高100%会导致拉伸或者留白，这时候给视频加上object-fit: cover属性，就能让视频保持比例的同时裁剪多余部分，刚好填满容器。
• 元素默认样式干扰：检查视频元素或者它的父容器有没有默认的padding、margin，记得加上margin: 0; padding: 0;重置样式，避免额外的留白。
• 定位方式不对：把视频设置为position: fixed或者absolute，让它脱离文档流，直接以视口为基准定位，再配合top: 0; left: 0;就能确保它从屏幕左上角开始铺满。
• GSAP动画属性优化：如果用scale来实现放大动画，记得配合xPercent: -50; yPercent: -50;让视频居中，避免放大后偏移导致留白；或者直接用CSS默认铺满，让GSAP专注于控制动画的触发时机和其他效果（比如透明度、模糊）。

给大家贴个调整后的代码示例，亲测有效：

.fullscreen-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    margin: 0;
    padding: 0;
    z-index: 10;
    transform-origin: center center;
}

gsap.from(".fullscreen-video", {
    scrollTrigger: {
        trigger: ".trigger-section",
        start: "top 80%",
        end: "bottom 20%",
        scrub: true,
        markers: false
    },
    scale: 0.7,
    opacity: 0.6,
    ease: "power2.out"
});

这样调整后，视频就能在动画过程中完美铺满全屏啦，大家有类似问题可以试试这些方法~

备注：内容来源于stack exchange，提问作者jaganarasu