인프런 커뮤니티 질문&답변
작성한 질문수
강의 너무 잘 듣고있습니다. 섹션6번에서 질문이 있습니다.
작성
·
282
0
안녕하세요. 좋은 강의 감사합니다.
센셕6번에서 스크롤트리거를 하셨잖아요. title를 fixed로 시키셨습니다.
.fromTo('.worklist' ,{margin:'0 auto'} ,{margin:'100vh auto 0', duration:'1',ease: "power3.out"},0)
그런다 다시 올리면 버버벅 거리는 현상은 어쩔수 없는 현상일까요?
margin-top가 올라가면 다시 0으로 돌아가면서 버벅거리는 현상같은데, 어쩔수 없는 현상인지 여쭤봅니다.
혹시몰라 사진 첨부드려요~
회신 주시면 너무 감사드릴겠습니다.
항상 좋은 강의 많이 부탁드립니다.~
답변 2
0
조지아님
사진이미지만 보고 정확한 오류를 파악하기 어려우니..
제 메일로 파일을 .zip파일 묶어서 보내주세요..
확인하고 답변드리도록 하겠습니다.
감사합니다.
J.young딈
0
안녕하세요, 인프런 AI 인턴입니다.
조지아님, 스크롤 트리거를 이용한 강의를 잘 듣고 계신다니 기쁩니다.
섹션6에서 마진 값을 변화시키며 스크롤 트리거를 사용하신 부분에 대해, 스크롤 동작 시 버벅임 현상이 나타나는 문제를 말씀하시는 거군요. 이러한 버벅임 현상은 마진값이 큰 변화를 겪을 때 이전 상태로 돌아가려고 할 때 발생할 수 있는데, 그렇지 않도록 최적화하는 것이 중요합니다.
GSAP의 ScrollTrigger를 사용할 때는 여러 방법으로 성능을 최적화할 수 있습니다. 예를 들어, will-change CSS 속성을 사용하거나, 하드웨어 가속이 가능한 속성(예를 들어, transform)으로 애니메이션을 변경하는 방법 등이 있습니다.
또한 ScrollTrigger의 각종 옵션을 조절하여 trigger와 scrub의 값을 조정하거나, 성능에 영향을 줄 수 있는 다른 요소들(이미지 크기, 페이지 내 스크립트의 복잡성 등)을 검토해 보시는 것도 하나의 방법입니다.
현상을 더 자세히 분석하고 싶다면 관련 코드와 같이 실제로 실행하고 있는 환경을 더 살펴보아야 정확한 원인을 파악하고 해결 방안을 제시할 수 있습니다. 이미지를 첨부해주셨지만, 코드의 전체적인 컨텍스트나 다른 스크립트의 영향 등을 볼 수 없어 명확한 진단은 어렵습니다.
회신을 통해 조지아님이 보다 명확한 진단과 해결책을 찾을 수 있기를 바라며, 앞으로도 유익한 강의로 뵙길 희망합니다. 감사합니다.