使用 GSAP 和 ScrollTrigger 实现滚动触发旋转动画

这个效果主要依赖于GSAP的两个核心功能：

1. GSAP核心动画引擎：提供流畅的动画性能

2. ScrollTrigger插件：将动画与页面滚动位置关联

动画实现原理解析：

gsap.to(".img_rog", {
  rotate: 2160, // 完整旋转6圈
  scrollTrigger: {
    trigger: `.our-story-all-{{ section.id }}`, // 触发元素
    start: "top 80%", // 开始位置
    end: "bottom 20%", // 结束位置
    scrub: true // 开启平滑滚动
  },
  ease: "none", // 使用线性缓动
  transformOrigin: "50% 50%" // 设置旋转中心点
});

1. 触发机制：
   • 当用户滚动页面时，ScrollTrigger会持续监控滚动位置
   • 触发元素（.our-story-all-{{ section.id }}）进入视口时开始动画
   • 动画进度与滚动位置成正比
2. 动画执行：
   • GSAP动画引擎负责计算当前滚动进度（80%~100%范围内）
   • 元素的旋转角度会随着滚动位置平滑变化
   • 整个过程保持流畅，不会出现卡顿

<div class="index-brand-creativity-item-product">
  {% if block.settings.img_rog != blank %}
    <div class="img_rog">
      <img src="{{ block.settings.img_rog | image_url }}" 
           alt="{{ block.settings.img_rog.alt }}"
           loading="lazy">
    </div>
  {% endif %}
</div>
<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>
document.addEventListener("DOMContentLoaded", () => {
  gsap.registerPlugin(ScrollTrigger);
  
  gsap.to(".img_rog", {
    rotate: 2160, 
    scrollTrigger: {
      trigger: `.our-story-all-{{ section.id }}`,
      start: "top 80%", 
      end: "bottom 20%",
      scrub: true 
    },
    ease: "none", 
    transformOrigin: "50% 50%" 
  }); 
});
</script>