Блог

У меня есть невидимый квадрат2, расположенный слева от квадрата 1. Я использую GSAP для анимации квадрата 1, перемещающегося влево, затем после этого я хочу отдельно анимировать квадрат2, медленно выскальзывающий из квадрата 1.

У меня работает первая часть анимации, но я не могу понять, как заставить square2 выскользнуть из нее.

Я пытаюсь расположить квадрат2 на 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})
}