삼성페이 티켓 페이지 인터렉션 구현하기

연휴를 녹이러 영화도 볼겸 체인소맨 극장판을 봤다.

틀린말은 아닐지도? ㅋㅎㅋㅎ

 
특이했던 것이 요즘은 롯데시네마 앱에서 영화표를 예매하면 삼성페이에 자동으로 연동된다.
뒷단 개발자들이 갈렸을 것 같은데... 간만에 프론트 개발자라 다행이라는 생각이 들었다.

출처 : 네이버 모바노 님 블로그 (https://blog.naver.com/mobano/223474960698)

그런데 삼성페이를 써보던 중 페이지를 아래로 스크롤하면 티켓과 영화 제목이 자연스럽게 사라지는 애니메이션이 눈에 들어왔다.
원래대로라면 티켓 정보를 보여주는 평범한 페이지라 느껴졌을 텐데, 이런 인터렉션을 넣으니 경험이 상당히 괜찮게 느껴져서 직접 만들어보고 싶었다.

코드 : https://github.com/C17AN/ticket-interaction-clone.git

처음에는 scrub: true 정도만 사용하면 무난하게 만들 수 있을 것 같았는데, 추가로 고려해야 했던 점들이 몇 가지 있었다.

• 최상단 티켓 이미지가 제자리를 유지한 채로 scale: 0에 도달할 수 있도록 pin: true를 걸어줘야 한다.
• 스크롤을 놓쳤을 때 인터렉션의 progress를 0%로 되돌릴지, 100%로 이동할지 결정해야 한다. (snap 옵션)
• 영화 제목은 스크롤과 다른 속도로 움직여야 한다. (패럴렉스 효과)
• 제목의 y좌표는 화면이 넓어져도 좁은 화면과 동일한 비율대로 움직여야 한다. (font-size: *10px ÷ 360px * 100vw = 2.778vw)
  (* 나는 최소 뷰포트 너비를 360px로 삼고, 가독성을 위해 1px = 0.1rem 으로 치환해 작업했다.)

// GSAP 코드
useGSAP(() => {
  gsap.registerPlugin(ScrollTrigger);

  const tl = gsap.timeline({
    scrollTrigger: {
      trigger: ".fixed-container",
      start: "top top",
      end: "bottom top",
      pin: true,
      scrub: true,
      snap: {
        snapTo: (p) => (p > 0.5 ? 1 : 0),
        duration: 0.2,
      },
      invalidateOnRefresh: true,
    },
  });

  tl
  .to(".ticket-image", { scale: 0 }, 0)
  .to(
    ".ticket-name",
    { opacity: 0, y: -60 },
    0
  );

  ScrollTrigger.refresh();
}, []);

 아무튼, 극장판은 애니메이션 원작 스토리를 모르는 상태로 봤음에도 재밌게 볼 수 있었다.

다음날 또 봤다.. (ㅎㅎ;)