zz-shopify-components/assets/zz-fade-in-content.js

Reusable Shopify components for theme projects

document.addEventListener('DOMContentLoaded', () => {
  gsap.registerPlugin(ScrollTrigger);

  // 从下往上显示
  (function () {
    const fadeDom = document.querySelectorAll('.fade-in-content');
    fadeDom.forEach((item) => {
      gsap.from(item, {
        scrollTrigger: {
          trigger: item,
          start: 'top 80%',
          toggleActions: 'play none none reverse',
          once: false, // 动画只播放一次
        },
        opacity: 0,
        y: 80,
        duration: 0.4,
        ease: 'power2.out',
      });
    });
  })();

  // 从左往右显示
  (function () {
    const fadeDom = document.querySelectorAll('.fade-in-from-left-content');
    fadeDom.forEach((item) => {
      gsap.from(item, {
        scrollTrigger: {
          trigger: item,
          start: 'top 80%',
          toggleActions: 'play none none reverse',
          once: false, // 动画只播放一次
        },
        opacity: 0,
        x: -80,
        duration: 0.4,
        ease: 'power1.out',
      });
    });
  })();

  // 从右往左显示
  (function () {
    const fadeDom = document.querySelectorAll('.fade-in-from-right-content');
    fadeDom.forEach((item) => {
      gsap.from(item, {
        scrollTrigger: {
          trigger: item,
          start: 'top 80%',
          toggleActions: 'play none none reverse',
          once: false, // 动画只播放一次
        },
        opacity: 0,
        x: 80,
        duration: 0.4,
        ease: 'power1.out',
      });
    });
  })();

  // 跟随滚动缓慢显示
  (function () {
    const fadeDom = document.querySelectorAll('.slow-reveal-content');
    fadeDom.forEach((item) => {
      gsap.from(item, {
        scrollTrigger: {
          trigger: item,
          start: 'top 80%',
          end: 'top 60%',
          toggleActions: 'play none none reverse',
          scrub: 1, // 平滑跟随滚动
        },
        opacity: 1,
        y: 100,
        duration: 0.4,
        ease: 'power1.out',
      });
    });
  })();

  // 按序从下显示(group)
  const el = document.querySelectorAll('.fade-in-box');
  el.forEach((item) => {
    // 过滤出不包含 no-fade-in 类名的子元素
    const children = Array.from(item.children).filter(
      (child) => !child.classList.contains('no-fade-in')
    );
    gsap.from(children, {
      scrollTrigger: {
        trigger: item,
        start: 'top 80%',
        toggleActions: 'play none none reverse',
        once: false, // 动画只播放一次
      },
      opacity: 0,
      y: 80,
      duration: 0.4,
      stagger: 0.2,
      ease: 'power2.out',
    });
  });

  // 按序从左进入显示
  const fromLeft = document.querySelectorAll('.fade-in-from-left');
  fromLeft.forEach((item) => {
    // 过滤出不包含 no-fade-in 类名的子元素
    const children = Array.from(item.children).filter(
      (child) => !child.classList.contains('no-fade-in')
    );
    gsap.from(children, {
      scrollTrigger: {
        trigger: item,
        start: 'top 80%',
        toggleActions: 'play none none reverse',
        once: false, // 动画只播放一次
      },
      opacity: 0,
      x: -80,
      duration: 0.4,
      stagger: 0.1,
      ease: 'power1.out',
    });
  });

  // 按序从右进入显示
  const fromRight = document.querySelectorAll('.fade-in-from-right');
  fromRight.forEach((item) => {
    // 过滤出不包含 no-fade-in 类名的子元素
    const children = Array.from(item.children).filter(
      (child) => !child.classList.contains('no-fade-in')
    );
    gsap.from(children, {
      scrollTrigger: {
        trigger: item,
        start: 'top 80%',
        toggleActions: 'play none none reverse',
        once: false,
      },
      opacity: 0,
      x: 80,
      duration: 0.4,
      stagger: 0.1,
      ease: 'power1.out',
    });
  });
});

// 跟随滚动缓慢显示
const slowReveal = document.querySelectorAll('.slow-reveal');
slowReveal.forEach((element) => {
  // 过滤出不包含 no-fade-in 类名的子元素
  const children = Array.from(element.children).filter(
    (child) => !child.classList.contains('no-fade-in')
  );
  gsap.from(children, {
    scrollTrigger: {
      trigger: element,
      start: 'top 80%',
      end: 'top 60%',
      scrub: 1, // 平滑跟随滚动
      toggleActions: 'play none none reverse',
    },
    opacity: 1,
    y: 100,
    duration: 0.4,
    stagger: 0.1,
    ease: 'power1.out',
  });
});