video scroll animation에 대해

요즘 삼성 S22 울트라에 꽂혀서 공식 홈페이지(https://www.samsung.com/sec/smartphones/galaxy-s22-ultra/)를 들어갔는데 스크롤에 따라 애니메이션이 굉장히 스무스하게 움직여서 '이거 어떻게 한거지?!' 이러고 방법을 찾아보았다.

굉장히 스무스한 갤럭시 S22 울트라 애니메이션

소스코드를 뜯어보니 .mp4 파일을 비디오 태그로 삽입한 후에 JS로 스크롤 위치에 따라 재생되도록 한 것 같아서 한번 비슷한 튜토리얼이 있나 찾아봤고, 찾았다! gsap라는 라이브러리를 사용하는 방식이었다.

https://greensock.com/forums/topic/32782-video-scroll-animation/

Video Scroll Animation

JS 코드를 살펴보면 이런 형태이다.

...
/* ---------------------------------- */
/* Scroll Control! */

gsap.registerPlugin(ScrollTrigger);

let tl = gsap.timeline({
  defaults: { duration: 1 },
  scrollTrigger: {
    trigger: "#container",
    start: "top top",
    end: "bottom bottom",
    scrub: true
  }
});

once(video, "loadedmetadata", () => {
  tl.fromTo(
    video,
    {
      currentTime: 0
    },
    {
      currentTime: video.duration || 1
    }
  );
});
...

https://velog.io/@oneook/GSAP-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-JS-Libraries

GSAP 자바스크립트 애니메이션 라이브러리

모던하고 인터랙티브한 웹을 만드는 데 유용하게 사용할 수 있을 것 같다!

 

++) 맥북 공식 소개 사이트(https://www.apple.com/kr/macbook-pro-14-and-16/)도 이런 애니메이션인데 이건 .mp4 영상이 아니라 jpg 이미지 태그를 사용하고 있고, gsap가 아니라 css transform:matrix 속성에서 x값을 바꿔주는 방식을 활용한 것 같다. 저 data-anim-keyframe-1 변수에 들어간 배열도 애니메이션에 관여하는 것 같은데 이 부분은 조금 더 찾아봐야 할 것 같다.

data-anim-keyframe-1="{"start":0.05,"end":0.4,"x":["20vw", 0], "ease": 0.5, "disabledWhen": "no-enhance-xp", "breakpointMask" : "S"}
style="transform: matrix(1, 0, 0, 1, 148.698, 0);"

https://rgy0409.tistory.com/2990

CSS3 transform 사용법 (matrix 포함)

애니메이션을 무겁지 않게 브라우저에서 돌릴 수 있고, 부드럽게 돌리는 방법을 JS 이벤트나 비동기 처리를 잘 하게 되면 꼭 추가적으로 배우고 싶다.