如何实现元素进入视口时触发动画且仅执行一次

我来帮你搞定这个问题！你的核心需求是让#aboutSection的动画只在用户第一次滚动到它的时候执行一次，现在重复播放是因为每次滚动事件触发都会执行动画逻辑，哪怕已经播放过了。下面给你两种可行的解决方案：

方案一：基于现有代码添加执行标记 #

这种方法不需要大改现有逻辑，只需要加一个变量来标记动画是否已经执行过：

const about = document.querySelector("#aboutSection"); // 目标元素
const t1 = new TimelineMax();
let hasAnimated = false; // 新增：标记动画是否已执行

$(window).scroll(function() {
  // 如果已经执行过动画，直接退出函数
  if (hasAnimated) return;

  $('#aboutSection').each(function() {
    var imagePos = $(this).offset().top;
    var imageHeight = $(this).height();
    var topOfWindow = $(window).scrollTop();
    
    // 当元素进入视口时执行动画
    if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
      t1.fromTo(about, 1.2, { y: "100%" }, { y: "0%", ease: Power2.easeInOut });
      hasAnimated = true; // 标记为已执行，避免重复触发
    }
  });
});

关键说明： #

• 变量hasAnimated初始为false，第一次触发动画后会被设为true
• 后续滚动事件触发时，会先检查这个变量，直接跳过动画逻辑
• 你原来代码里的$('#aboutSection').stop(true, true);可以去掉，因为GSAP的动画不受jQuery的stop()控制

方案二：使用更高效的Intersection Observer API #

这是现代浏览器推荐的方法，比监听scroll事件更高效，不需要手动计算元素位置：

const about = document.querySelector("#aboutSection"); 
const t1 = new TimelineMax();
let hasAnimated = false;

// 创建交叉观察器实例
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // 当元素进入视口且未执行过动画时触发
    if (entry.isIntersecting && !hasAnimated) {
      t1.fromTo(about, 1.2, { y: "100%" }, { y: "0%", ease: Power2.easeInOut });
      hasAnimated = true;
      observer.unobserve(entry.target); // 动画完成后停止观察，节省性能
    }
  });
}, {
  threshold: 0.1 // 当元素10%可见时触发动画（可根据需求调整）
});

// 开始观察目标section
observer.observe(about);

关键说明： #

• Intersection Observer会自动监听元素是否进入视口，无需手动计算滚动位置
• threshold参数可以调整触发动画的可见比例（比如设为1表示元素完全进入视口才触发）
• 动画执行后调用unobserve()停止观察，避免不必要的性能消耗

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