슬라이딩 팝업 애니메이션

greensock 이라는 애니메이션 라이브러리를 사용해 슬라이딩 팝업 동작을 구현했다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"</script>

라이브러리는 body 태그 안애 스크립트 src 속성에 넣어 연결해주고
gsap.to() 라는 메소드를 사용해 특정 요소를 선택해 움직임을 지정할 수 있다. 사이트에 보니 이 외에도 정말 다양한 옵션값이 존재한다. 아래 적용해본 것은 클릭시 가운데 선이 지워지고, 위아 선이 45도로 기울여지면서 서로 겹치게 하는 것이다. 동시에 박스에도 회전을 주었다.

popupButton.addEventListener("click", onClick);

function onClick(e) {
  if (isSel === false) {
    isSel = true;
    gsap.to(popup, { left: "0px", duration: 0.3 });
    gsap.to(topLine, {
      backgroundColor: "#fff",
      rotation: -45,
      top: "30px",
      duration: 0.3,
    });
    gsap.to(middleLine, {
      backgroundColor: "#fff",
      scaleX: 0,
      transformOrigin: "left",
      duration: 0.3,
    });
    gsap.to(bottomLine, {
      backgroundColor: "#fff",
      rotation: 45,
      top: "30px",
      duration: 0.3,
    });
    gsap.to(popupButton, { left: "220px", rotation: 180, duration: 0.3 });
  } else if (isSel === true) {
    isSel = false;
    gsap.to(popup, { left: "-300px", duration: 0.3 });
    gsap.to(topLine, {
      backgroundColor: "#000",
      rotation: 0,
      top: "20px",
      duration: 0.3,
    });
    gsap.to(middleLine, {
      backgroundColor: "#000",
      scaleX: 1,
      duration: 0.3,
    });
    gsap.to(bottomLine, {
      backgroundColor: "#000",
      rotation: 0,
      top: "38px",
      duration: 0.3,
    });
    gsap.to(popupButton, { left: "20px", rotation: 0, duration: 0.3 });
  }
}