values의 수치에 관해서

Question

values: { messageA_opacity_in: [0, 1, {start: 0.15, end: 0.2}], messageA_opacity_out: [1, 0, {start: 0.3, end: 0.35}], messageA_translateY_in: [20, 0, {start: 0.15, end: 0.2}], messageA_translateY_out: [0, -20, {start: 0.3, end: 0.35}], messageB_opacity_in: [0, 1, {start: 0.5, end: 0.55}], messageB_opacity_out: [1, 0, {start: 0.58, end: 0.63}], messageB_translateY_in: [20, 0, {start: 0.5, end: 0.55}], messageB_translateY_out: [0, -20, {start: 0.58, end: 0.63}], messageC_opacity_in: [0, 1, {start: 0.72, end: 0.77}], messageC_opacity_out: [1, 0, {start: 0.85, end: 0.9}], messageC_translateY_in: [20, 0, {start: 0.72, end: 0.77}], messageC_translateY_out: [0, -20, {start: 0.85, end: 0.9}], pinB_scaleY: [0.5, 1, {start: 0.5, end: 0.55}], pinC_scaleY: [0.5, 1, {start: 0.72, end: 0.77}], } 위의 코드는 동영상을 보면서 작성한 코드이구요 messageA_opacity_in: [0, 1, {start: 0.15, end: 0.2}], messageA_opacity_out: [1, 0, {start: 0.3, end: 0.35}], messageA_translateY_in: [20, 0, {start: 0.15, end: 0.2}], messageA_translateY_out: [0, -20, {start: 0.3, end: 0.35}], messageB_opacity_in: [0, 1, {start: 0.6, end: 0.65}], messageB_opacity_out: [1, 0, {start: 0.68, end: 0.73}], messageB_translateY_in: [20, 0, {start: 0.6, end: 0.65}], messageB_translateY_out: [0, -20, {start: 0.68, end: 0.73}], messageC_opacity_in: [0, 1, {start: 0.87, end: 0.92}], messageC_opacity_out: [1, 0, {start: 0.95, end: 1}], messageC_translateY_in: [20, 0, {start: 0.87, end: 0.92}], messageC_translateY_out: [0, -20, {start: 0.95, end: 0.1}], pinB_scaleY: [0.5, 1, {start: 0.6, end: 0.65}], pinC_scaleY: [0.5, 1, {start: 0.87, end: 0.92}], 위의 코드는 수치를 변경해서 작성한 코드입니다. 제일 위의 코드를 사용했을 땐 .pin이 out되지 않는 현상이 나타났는데 아래의 코드를 사용하니 .pin의 out 애니메이션이 정상적으로 동작하더군요 왜 이런 차이가 나는지 궁금합니다.

1분코딩 · Answer

아시다시피 start와 end 값은 해당 구간에서의 스크롤 된 비율의 기준점인데, 아마 CSS 또는 어떤 부분의 차이로 인식되는 비율에 약간 차이가 발생한 것 같습니다.
스크롤 할 때마다 console.log로 scrollRatio를 출력해보시면서 변화되는 수치를 살펴보시면서 입력하신 값과 변화되는 시점에 차이가 없다면 별 문제 없을 것으로 보입니다^^