GSAP动画秘籍1：实现炫酷线条运动，无缝衔接文字呈现

实现炫酷线条运动与文字无缝衔接的GSAP动画秘籍

1. 资源引入在HTML中引入GSAP核心库及ScrollTrigger插件（用于滚动触发动画）：

   <script src="./gsap.min.js"></script><script src="./ScrollTrigger.min.js"></script>

2. HTML结构与初始样式

   定义容器（.gsapLine）和动画元素（文字.font、线条.line）。

   关键样式：

   文字初始透明度为0，并左移100px（transform: translateX(-100px)）。

   线条初始缩放为0（scaleX(0)），设置transform-origin: left确保从左侧开始延伸。

   <style> .gsapLine { position: relative; } .font { opacity: 0; transform: translateX(-100px); } .line { width: 500px; height: 2px; background: black; position: absolute; right: 0; bottom: 0; transform: scaleX(0); transform-origin: left; }</style><div class="gsapLine"> <p class="text_title font">文字标题</p> <p class="text_bref font">文字内容...</p> <div class="line"></div></div>

3. GSAP动画逻辑

   滚动触发：通过scrollTrigger指定触发元素（.gsapLine）和开始位置（top 60%）。

   时间线控制：使用gsap.timeline编排动画序列：

   线条从左向右延伸（scaleX: 1），持续1秒，缓动效果为power1.out。

   文字在动画结束前0.3秒开始淡入并移回原位（x: 0, opacity: 1）。

   var t1 = gsap.timeline({ scrollTrigger: { trigger: ".gsapLine", start: "top 60%" }});t1.to(".line", { scaleX: 1, duration: 1, ease: 'power1.out' }) .to(".font", { x: 0, opacity: 1, duration: 0.6, ease: 'power1.out' }, '-=0.3');

• transform-origin的作用若未设置，线条缩放会从中心向两端扩展；设置为left后，动画从左侧单边延伸，更符合视觉预期。

• 时间线衔接（-=语法）'-=0.3'表示文字动画在前一个动画结束前0.3秒开始，实现无缝衔接效果。

• 扩展性

  多元素动画：通过循环为多个.gsapLine容器创建独立时间线。

  复杂效果：在onEnter回调中添加逻辑（如动态内容加载）。

1. 动画不触发？

   检查ScrollTrigger是否引入，或尝试调整start参数（如"top center"）。

   确保触发元素（.gsapLine）在视窗内可见。

2. 性能优化

   对大量动画元素使用stagger属性错开动画时间。

   避免在滚动事件中频繁计算布局（GSAP已自动优化）。

3. 进阶效果

   路径动画：结合MotionPathPlugin实现曲线运动。

   SVG动画：直接对SVG路径的stroke-dasharray属性做动画。

通过GSAP的时间线控制和ScrollTrigger的滚动交互，可轻松实现线条延伸+文字渐现的组合动画。核心在于：

1. 合理设置初始状态（隐藏/位移）。
2. 利用时间线编排动画顺序与重叠。
3. 借助插件（如ScrollTrigger）简化交互逻辑。

更多案例可参考