[Apple Interaction] Deadpool(Feat. Scrollmagic & GSAP)

📼 구현 화면

사용자 스크롤 이동에 따른 동영상 재생위치 변경 및 애니메이션 재생
(feat. apple interaction)

🌏 Link

Github: Deadpool
Netlify: Deadpool

👨🏻‍💻 Self Feedback

• ScrollMagic, GSAP을 활용하여 사용자의 조작에 따른 상호작용을 구현함
• async/await를 통해 video.duration를 비동기로 받아와서 변수에 적용함
  (동기로 받을 시, 로딩이 완료되기 전으로 NaN을 반환하기 때문)
• 비디오 위에 layout을 깔고 opacity를 조절하여 fade-in, fade-out 효과를 따로 구현
• 위 내용을 TimelineMax에 delay를 추가하여 한 번에 구현하는 방식으로 Refactoring 완료
• 사라졌던 Text가 다시 나타나는 Text Animtaion 추가 구현

상기 내용을 활용하여 여러 텍스트를 영상에 맞추어 적절히 배치하면 Apple Airpod Pro 상세페이지와 같이 한층 더 고급스러운 인터렉션을 구현해낼 수 있을 것으로 기대됨

📚 Reference

Apple: Airpod Pro
TweenMax: TimelineMax
ScrollMagic: ScrollMagic.Scene
ScrollMagic: [ScrollMagic] 스크롤매직 라이브러리 - 기초편
[Youtube] Apple animation tutorial: Apple Airpod Pro Javascript Animation Tutorial

🧩 And More

동영상 출처 : Deadpool | Trailer [HD] | 20th Century FOX
온라인 동영상 압축 : videosmaller
GIF 변환 : cdkm