gsap-ScrollTrigger

  // 注册ScrollTrigger插件
        gsap.registerPlugin(ScrollTrigger);

        // 第一个动画：方块从左侧滑入
        gsap.to('.box', {
            x: 0,             // X轴移动到原始位置
            opacity: 1,       // 不透明度变为1（完全可见）
            duration: 1,      // 动画持续时间1秒
            scrollTrigger: {
                trigger: '.box',    // 触发元素：指定哪个元素触发动画
                start: 'top center', // 开始点：元素顶部到达视窗中心时
                end: 'bottom center', // 结束点：元素底部到达视窗中心时
                toggleActions: 'play pause reverse reset', // 滚动行为：向下滚动播放，停止暂停，向上滚动反向，完全离开重置
                markers: true       // 显示开发辅助标记（调试用）
            }
        });

        // 第二个动画：文字从下方淡入
        gsap.to('.text', {
            y: 0,             // Y轴移动到原始位置
            opacity: 1,       // 不透明度变为1（完全可见）
            duration: 1,      // 动画持续时间1秒
            scrollTrigger: {
                trigger: '.text',   // 触发元素：文本元素
                start: 'top 80%',   // 开始点：元素顶部到达视窗80%位置时
                toggleActions: 'play none none reset', // 滚动行为：向下滚动播放，其他动作无反应，离开时重置
                markers: true       // 显示开发辅助标记（调试用）
            }
        });