0%

加载完成后的首屏

遮罩退出用 clip / yPercent，比单纯 opacity 更有「掀开」感。点下方按钮可重播整段。

实现要点
  • 对普通对象 { value: 0 } 做 tween，在 onUpdate 里写 DOM，避免直接 tween 文本节点。
  • 进度到 100% 后再播退出时间线，两段用 add() 串起来。
  • 退出时把 preloader pointer-events: none，防止挡住点击。
const proxy = { value: 0 };
const tl = gsap.timeline();
tl.to(proxy, {
  value: 100,
  duration: 2,
  ease: "power1.inOut",
  onUpdate: () => percent.textContent = Math.round(proxy.value) + "%"
})
.to("#barFill", { width: "100%" }, 0) // 与计数同时开始
.to("#preloader", { yPercent: -100, duration: 0.8, ease: "power4.inOut" });