모바일 TimelineMax, ScrollMagic, URL Bar Resizing 이슈

상황

• TimelineMax, ScrollMagic을 활용해 모바일 페럴렉스 구현

  var controller = new ScrollMagic.Controller();
  var intro = new TimelineMax();
  intro.fromTo(defParams.section.fullcover, 1,
      { opacity: 0.5, y: 0, width: '66%' },
      { opacity: 1, y: '-100%', width: '100%' })
  .fromTo(defParams.element.introText, 0.8,
      { opacity: 1, y: 0 },
      { opacity: 0, y: '-200%' }, '-=0.9')
  .fromTo(defParams.section.experience, 0.3,
      { y: '0%'},
      { y: '-100%', ease: Linear.easeNone })
  .to(defParams.element.zoomInImage, 0.3, { top: '50%', y: '-50%', width: '89%', height: '89%' })
  new ScrollMagic.Scene({
      offset: 1,
      duration: '300%',
  }).setPin(defParams.section.pin).setTween(intro).addTo(controller);
  

height: 100% 계산이 ‘주’ 원인이 아니었다. 같은 맥락이긴 하지만..
모바일 스크롤할 때 상단, 하단에 있는 URL Bar가 사라질 시, 위의 timelineMax의 setPin으로 잡힌 영역이 duration 옵션값을 만나 지속적으로 업데이트 되기 때문이다.
모바일에선 상하단바가 없어지거나 생길 때마다 resize로 인식하기 때문에 setPin으로 설정된 영역의 속성값이 지속적으로 변했다.
위의 예시에서 duration이 ‘300%’이므로 해당 기기 뷰포트 height의 곱하기 3한 값이 상하단바가 생기거나 사라질 때마다 지속적으로 업데이트 되었던 것.

그래서 스크롤할 때 상하단바가 없어지거나 생길 때마다 뚝뚝 끊겨서 작동하는 것과같은 현상이 발생한 것이다.

해결방법

해결방법은 간단하다.
duration 옵션 값에 %같은 비례 단위말고 딱 떨어지는 고정.. px같은 단위를 넣어주면 된다.
이렇게되면 제이쿼리 orientationchange를 활용해 portrait, landscape 일 때마다 duration 값을 업뎃시켜줘야된다.