GSAP TweenLite实现先旋转再上滑，避免旋转滑动同步动画

嘿，刚接触GSAP就能做出上滑效果很棒！想要让元素先在视窗外完成旋转，再执行上滑动画，核心是把两个动画按顺序编排，而不是放在同一个Tween里同步执行。这里推荐用GSAP的TimelineLite（你已经引入了TweenMax，也可以用TimelineMax）来管理动画序列，它能让动画顺序更清晰，后续扩展也更方便。

问题分析 #

你原来的代码把rotation和top属性放在同一个TweenLite.to()里，所以两个动画会同时启动。咱们需要把它们拆成两个独立的动画步骤，先完成旋转（此时元素还在视窗外，用户看不到旋转过程），再触发上滑。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js"></script>
  <style>
    .container {
      display: block;
      width: 300px;
      height: 250px;
      border: 1px solid #000000;
      overflow: hidden;
      position: relative;
    }
    .background {
      position: relative;
      display: block;
      width: 200%;
      height: 200%;
      left: -100%;
      bottom: -300px; /* 初始在容器下方视窗外 */
    }
    .background.dark-blue {
      background: #071D49;
    }
  </style>
</head>
<body>
  <div class="container">
    <div id="slide_one">
      <div class="background dark-blue"></div>
    </div>
  </div>

  <script>
    $(document).ready(function(){
      // 创建时间线实例，用来编排顺序动画
      var timeline = new TimelineLite();
      
      // 第一步：在视窗外完成18度旋转（位置保持初始状态，用户看不到这个过程）
      timeline.to("#slide_one .background", 0.4, {rotation: 18})
      // 第二步：旋转完成后，执行上滑动画到top:0
        .to("#slide_one .background", 0.4, {top: "0"});
    });
  </script>
</body>
</html>

关键说明 #

• TimelineLite会按你添加动画的顺序依次执行，第一个to()完成后才会启动第二个，完美实现“先旋转后上滑”的需求。
• 旋转阶段元素保持初始的bottom: -300px位置，所以完全在容器的视窗外，用户只会看到旋转完成后的元素上滑进入视野。
• 如果后续需要调整动画间隔、添加延迟或者更多动画步骤，直接在时间线里继续添加to()或者其他GSAP方法即可，非常灵活。

另外，如果你不想用时间线，也可以用onComplete回调来实现，比如：

$(document).ready(function(){
  // 先执行旋转动画
  TweenLite.to("#slide_one .background", 0.4, {
    rotation: 18,
    // 旋转完成后触发上滑动画
    onComplete: function() {
      TweenLite.to("#slide_one .background", 0.4, {top: "0"});
    }
  });
});

不过时间线的方式在管理多序列动画时更清晰，更推荐使用哦～

内容的提问来源于stack exchange，提问作者James