本文详解如何利用 gsap 与 scrolltrigger 插件，在 react 中实现两个全屏区块间的无缝缩放过渡：滚动时 section1 缓慢缩放淡出，section2 同步缩放淡入，支持双向滚动回退。
本文详解如何利用 gsap 与 scrolltrigger 插件，在 react 中实现两个全屏区块间的无缝缩放过渡：滚动时 section1 缓慢缩放淡出，section2 同步缩放淡入，支持双向滚动回退。
在 React 中结合 GSAP 实现滚动驱动的缩放动画（zoom-in/zoom-out），关键在于精准控制触发时机、缩放基准与视觉连贯性。核心思路是：让 section1 初始满屏显示（scale=1, opacity=1），section2 初始隐藏且缩放至 2 倍（scale=2, opacity=0）；随滚动，前者渐缩渐隐，后者渐显渐归位，形成“镜头推拉”式的视觉过渡。
✅ 正确配置要点
- 必须注册插件：gsap.registerPlugin(ScrollTrigger) 不可省略，否则 scrollTrigger 无效；
- 元素需具备明确尺寸：为保证视口对齐，建议为 section1 和 section2 设置 height: '100vh' 及居中样式；
-
触发逻辑要匹配设计意图：
- section1 动画应以自身为 trigger，start: "top top" 表示顶部触达视口顶端即开始；
- section2 推荐用 start: "top center"（而非 "top top"），使其在进入视口中央时启动缩放，避免过早显现；
- scrub: 1 是关键：启用滚动同步动画，实现“拖拽式”平滑缩放，而非一次性播放。
? 完整可运行代码示例
import React, { useEffect } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
const SampleZoom = () => {
useEffect(() => {
gsap.registerPlugin(ScrollTrigger);
const { innerHeight } = window;
// section1：从 scale=1 → scale=2，opacity=1 → 0（视觉上“拉远”消失）
gsap.from("#section1", {
scale: 2,
opacity: 0,
duration: 1,
scrollTrigger: {
trigger: "#section1",
start: "top top",
end: `+=${innerHeight * 0.5}`,
scrub: 1,
toggleActions: "play none none reverse", // 确保反向滚动时正确还原
}
});
// section2：从 scale=2 → scale=1，opacity=0 → 1（视觉上“推近”显现）
gsap.from("#section2", {
scale: 2,
opacity: 0,
duration: 1,
scrollTrigger: {
trigger: "#section2",
start: "top center",
end: `+=${innerHeight}`,
scrub: 1,
toggleActions: "play none none reverse",
}
});
}, []);
return (
<div>
<div id="section1" style="{{" height: background: display: alignitems: justifycontent: fontsize: fontweight:>
<h2>ROBO</h2>
</div>
<div id="section2" style="{{" height: background: display: flexdirection: alignitems: justifycontent: padding: textalign: fontsize: lineheight:>
<p>Hello world. I am Chitti, The Robot ... Speed 1 THz ... Memory 1 zettabyte.</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7457" title="Ink — React for interactive command-line apps."><img
src="https://img.php.cn/upload/skill/000/000/081/179151488712051.jpg" alt="Ink — React for interactive command-line apps." onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill7457" title="Ink — React for interactive command-line apps." class="overflowclass">Ink — React for interactive command-line apps.</a>
<p class="overflowclass">Ink — 用 React 开发交互式命令行应用，使用 React组件构建丰富的终端 UI。</p>
</div>
<a rel="nofollow" href="/xiazai/skill7457" title="Ink — React for interactive command-line apps." class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<p>The most expensive movie made in India till date has finally released...</p>
</div>
</div>
);
};
export default SampleZoom;
⚠️ 注意事项与优化建议
- 性能优化：若页面复杂，可在 useEffect 清理函数中调用 ScrollTrigger.kill() 防止内存泄漏；
- 响应式适配：innerHeight 在 resize 时可能变化，如需动态适配，可监听 window.resize 并刷新 ScrollTrigger；
- 视觉锚点调试：使用 ScrollTrigger.debug(true) 可显示触发区域辅助定位；
- CSS 重置：确保目标元素无 transform: scale() 内联样式干扰，GSAP 会接管 transform 属性；
- 移动端兼容性：GSAP ScrollTrigger 默认支持移动端滚动，但需确认 body 无 overflow-x: hidden 等限制。
通过以上配置，即可实现视频中所见的电影级缩放转场效果——自然、可控、双向可逆，真正将滚动行为转化为沉浸式视觉叙事。
