在Elementor中使用GSAP为标题添加Stagger入场动画效果

要让标题字母的交错滑入动画在元素进入用户视野时才触发，你可以借助GSAP的ScrollTrigger插件监听元素可见状态，替代原页面加载即执行的逻辑。以下是修改后的完整实现方案：

完整代码（可直接在Elementor自定义HTML模块中使用） #

<style>
  /* 初始状态：字母从下方200px位置隐藏 */
  .stagger-title .char {
    transform: translateY(200px);
    opacity: 0;
    transition: transform 0.8s, opacity 0.8s;
  }
</style>

<!-- 引入依赖库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script src="https://unpkg.com/split-type"></script>

<script>
  // 初始化SplitType拆分标题为单个字母
  const myText = new SplitType('.stagger-title');

  // 使用ScrollTrigger监听元素进入视口的事件
  gsap.to('.stagger-title .char', {
    y: 0,
    opacity: 1,
    stagger: 0.02,
    duration: 0.8,
    scrollTrigger: {
      trigger: '.stagger-title', // 触发动画的目标元素
      start: 'top 80%', // 当元素顶部进入视口80%位置时触发
      toggleActions: 'play none none reverse' // 进入播放，离开反向播放（可选）
    }
  });
</script>

Elementor使用步骤 #

• 给需要添加动画的标题模块添加自定义CSS类：stagger-title（避免影响页面其他标题元素）
• 在页面中添加一个自定义HTML模块，粘贴上述代码
• 预览页面，滚动到标题位置时，即可看到字母逐个从底部滑入的交错效果

关键参数说明 #

• start: 'top 80%'：可按需调整触发时机，比如'top 50%'表示元素顶部到达视口中间时触发
• toggleActions: 'play none none reverse'：设置元素离开视口时是否反向播放动画，改成'play none none none'可让动画只播放一次
• stagger: 0.02：控制每个字母动画的间隔时间，数值越小，字母滑入节奏越紧凑

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