Elementor分类筛选后GSAP ScrollTrigger移动端翻转动画失效求助

我用WordPress搭配Elementor Pro搭建了网站，做了带翻转盒（flipboxes）的循环网格。针对移动端和平板（屏幕宽度<1024px），用GSAP ScrollTrigger实现了滚动触发翻转盒显示背面容器的效果，替代原本的hover触发逻辑。但使用Elementor的Taxonomy Filter（分类筛选）后，动画直接失效，必须刷新页面才能恢复，单独调用ScrollTrigger.refresh()也没解决问题。

当前使用的JS代码：

gsap.registerPlugin(ScrollTrigger);

// Function to set up the flip effect
function setupFlipEffect(element) {
  // Set up the timeline
  const tl = gsap.timeline({
    scrollTrigger: {
      trigger: element,
      start: "top center",
      end: "center center+=200",
      scrub: true,
    },
    ease: "power1.inOut",
  });

  // Set up the flip animations
  tl.to(element.querySelector(".eael-elements-flip-box-front-container"), { opacity: 0 })
    .to(element.querySelector(".eael-elements-flip-box-rear-container"), { opacity: 1 }, 0);

  // Ensure the rear container is visible during rotation
  gsap.set(element.querySelector(".eael-elements-flip-box-rear-container"), { visibility: "visible" });
}

// Check if the screen width is below 1024px
function isMobileScreen() {
  return window.innerWidth < 1024;
}

// Apply the flip effect only if it's a mobile screen
const flipBoxes = document.querySelectorAll(".eael-elements-flip-box-flip-card");
if (isMobileScreen()) {
  flipBoxes.forEach((flipBox) => {
    setupFlipEffect(flipBox);
  });
}

Elementor的分类筛选是动态DOM操作：筛选后会移除原有翻转盒、重新渲染符合筛选条件的新翻转盒。你的代码只在页面首次加载时执行了一次，新渲染的翻转盒根本没绑定ScrollTrigger动画；另外，旧的ScrollTrigger实例还留在GSAP缓存里，反而会和新元素产生冲突。

只调用ScrollTrigger.refresh()没用，因为它只是更新现有Trigger的位置，不会给新元素绑定动画，也不会清理旧的无效Trigger。

需要做三件核心事：

• 监听Elementor筛选完成的事件，在DOM更新后重新绑定动画
• 每次绑定前清理旧的ScrollTrigger实例，避免内存泄漏和冲突
• 封装逻辑，确保移动端判断和动画绑定可复用

修改后的代码如下：

gsap.registerPlugin(ScrollTrigger);

// 清理所有旧的ScrollTrigger实例
function clearOldScrollTriggers() {
  ScrollTrigger.getAll().forEach(trigger => trigger.kill());
}

// 设置翻转效果
function setupFlipEffect(element) {
  const tl = gsap.timeline({
    scrollTrigger: {
      trigger: element,
      start: "top center",
      end: "center center+=200",
      scrub: true,
    },
    ease: "power1.inOut",
  });

  tl.to(element.querySelector(".eael-elements-flip-box-front-container"), { opacity: 0 })
    .to(element.querySelector(".eael-elements-flip-box-rear-container"), { opacity: 1 }, 0);

  gsap.set(element.querySelector(".eael-elements-flip-box-rear-container"), { visibility: "visible" });
}

// 检查是否为移动端
function isMobileScreen() {
  return window.innerWidth < 1024;
}

// 绑定所有翻转盒的动画
function bindFlipBoxAnimations() {
  if (!isMobileScreen()) return;
  
  clearOldScrollTriggers(); // 先清理旧实例
  const flipBoxes = document.querySelectorAll(".eael-elements-flip-box-flip-card");
  flipBoxes.forEach(flipBox => setupFlipEffect(flipBox));
  ScrollTrigger.refresh(); // 刷新位置
}

// 页面加载时绑定一次
document.addEventListener('DOMContentLoaded', bindFlipBoxAnimations);

// 监听Elementor筛选完成事件（Elementor Pro筛选完成后会触发这个钩子）
document.addEventListener('elementor/frontend/init', () => {
  if (window.elementorFrontend) {
    window.elementorFrontend.hooks.addAction('frontend/element_ready/eael-taxonomy-filter.default', bindFlipBoxAnimations);
  }
});

// 监听窗口 resize，切换设备时重新绑定
window.addEventListener('resize', bindFlipBoxAnimations);

• clearOldScrollTriggers()：每次绑定前杀死所有旧的ScrollTrigger，避免旧实例干扰新元素，同时释放内存
• 监听frontend/element_ready/eael-taxonomy-filter.default事件：这是Elementor Taxonomy Filter完成DOM更新后触发的官方钩子，确保在新翻转盒渲染完成后再绑定动画
• 监听resize事件：确保屏幕尺寸跨越1024px阈值时，动画能正确启用或禁用

内容的提问来源于stack exchange，提问作者Tina Filipčič