滚动时缩放SVG图像遮罩并显示网站内容效果实现咨询

ScrollMagic和GSAP的组合完全能实现你要的效果——初始展示完成动画的Logo，滚动时逐步显示遮罩下的内容。这俩搭配本来就是做滚动触发动画的黄金组合：ScrollMagic负责精准监听滚动进度，GSAP负责细腻的动画控制，刚好匹配你的需求场景。

1. 页面结构准备 #

• 单独设置Logo元素，用于加载后的初始动画
• 准备全屏遮罩层（固定定位，覆盖在内容上方，背景色与初始页面一致）
• 内容区域放在遮罩层下方，初始状态被完全遮挡

2. GSAP实现Logo初始入场动画 #

页面加载完成后自动播放Logo的展示动画，比如淡入+缩放：

// 页面加载完成后执行Logo动画
gsap.from(".logo", {
  scale: 0,
  opacity: 0,
  duration: 1.2,
  ease: "power2.out"
});

3. ScrollMagic绑定滚动触发遮罩动画 #

创建ScrollMagic控制器，将滚动进度映射为遮罩的动画进度，实现滚动时逐步露出内容：

// 初始化ScrollMagic控制器
const controller = new ScrollMagic.Controller();

// 创建滚动触发场景
const revealScene = new ScrollMagic.Scene({
  triggerElement: "body",
  triggerHook: 0, // 滚动开始即触发动画
  duration: "100%" // 动画持续整个视口高度的滚动距离
})
.setTween(gsap.to(".mask", {
  y: "-100%", // 遮罩向上移出视口，露出下方内容
  ease: "power1.inOut"
}))
.addTo(controller);

4. 细节优化 #

• 遮罩层样式设置：position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;，确保完全覆盖内容
• 如果需要跟随滚动实时同步动画进度，可通过onUpdate回调精准控制：

revealScene.on("update", function(e) {
  // e.progress为0-1的滚动进度值
  gsap.to(".mask", {
    y: `-${e.progress * 100}%`,
    ease: "none" // 线性跟随滚动
  });
});

轻量替代方案 #

如果觉得ScrollMagic体积偏大，也可以直接用GSAP自带的ScrollTrigger插件，写法更简洁，兼容性更好：

gsap.to(".mask", {
  y: "-100%",
  scrollTrigger: {
    trigger: "body",
    start: "top top",
    end: "bottom top",
    scrub: true // 动画完全跟随滚动进度
  }
});

内容的提问来源于stack exchange，提问作者Yordan Kostadinov