在 TypeScript 中使用 ScrollMagic 和 TimelineMax 结合使用创建动画

import { ScrollMagicPluginGsapTimeline } from 'scrollmagic-plugin-gsap-timeline';
import ScrollMagic from 'scrollmagic';
import { TimelineMax, TweenMax } from 'gsap';
 
// 初始化 ScrollMagic 和 TimelineMax
const controller = new ScrollMagic.Controller();
 
// 创建一个 TimelineMax 实例
const timeline = new TimelineMax({
  repeat: -1, // 无限重复
  yoyo: true //  Yoyo 效果，即返回初始状态
});
 
// 将 ScrollMagic 和 TimelineMax 结合使用
new ScrollMagicPluginGsapTimeline(ScrollMagic, TimelineMax);
 
// 定义动画元素和动画
const element = document.getElementById('yourElementId');
 
// 添加动画到 timeline
timeline.from(element, 1, { opacity: 0 }); // 从透明到不透明
timeline.to(element, 1, { rotation: 360 }); // 旋转360度
 
// 创建 ScrollMagic 场景并绑定到 controller
new ScrollMagic.Scene({
  triggerElement: '#yourTriggerElementId',
  triggerHook: 'onEnter',
  duration: '100%' // 或者具体的像素值
})
.setPin('#yourPinnedElementId') // 将元素固定到顶部
.setTween(timeline) // 绑定 timeline 到场景
.addIndicators({ name: 'your scene name', colorEnd: 'blue' }) // 添加指示器
.addTo(controller); // 将场景添加到控制器

这段代码展示了如何在 TypeScript 中结合使用 ScrollMagic 和 TimelineMax 创建复杂的滚动动画。首先，我们引入了必要的插件 scrollmagic-plugin-gsap-timeline，然后初始化了 ScrollMagic 控制器。接着，我们创建了一个 TimelineMax 实例并定义了动画。最后，我们创建了 ScrollMagic 场景，将元素固定到顶部，并将 TimelineMax 动画绑定到场景上。