Question

我有一个不可见的 square2 div 位于 square1 的左侧。我正在使用 GSAP 为向左移动的 square1 设置动画，然后我想单独为 square2 缓慢滑出 square1 设置动画。

我让动画的第一部分正常工作，但我不知道如何让 square2 滑出它。

我试图将 square2 100% 的 div 宽度定位到右侧，使其可见，然后将其设置为向左移动。这是我的尝试。

我不认为可见性设置是必要的，因为 GSAP 应该使其自动可见，但我将其包括在内，以防有人认为可见性设置是问题。

代码笔：https://codepen.io/SquanchyHappy/pen/rNmKJdJ

<div id="container">
  <div id="square1"></div>
<div id="square2"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>

body {
  background-color: black;
}

#container {
  position: absolute;
  right: 0%;
  width: 200px;
}

#square1 {
  visibility: hidden;
  background-color: grey;
height: 100px;
  width: 100px;
  float: left;
}

#square2 {
  background-color: blue;
  height: 100px;
  width: 100px;
  float: right;
}

gsap.registerPlugin("MotionPathPlugin");

slideAnimation();

function slideAnimation() {
  let tl = gsap.timeline({ delay: 1 });
  tl.set(square2, { xPercent: 50, transformOrigin: "0% 50%" });
  tl.from(
    square2,
    { x: screen.width, ease: "none", duration: 0.5 },
    0
  );
  tl.from(
    square2,
    {
      y: square2.getBoundingClientRect().top - 300,
      ease: "none",
      duration: 0.5
    },
    0
  );
  tl.to(square2, {
    xPercent: 0,
    duration: 0.5,
    ease: "power2",
    clearProps: "transform"
  });
  //Below is the part I can't figure out
  //square2.style.visibility = 'visible'
  //tl.set(square2, {xPercent: 100})
  //tl.from(square2, {duration: 3})
}

动画 div 从 x 轴上 100% 的 div 宽度滑动

0 个答案: