마우스 채워지는 텍스트

GSAP의 ScrollTrigger를 활용한 포트폴리오 제작

ScrollTrigger 실무활용_마우스에 따라 채워지는 텍스트 _Script적용

작성

선생님과 똑같이 따라했는데요,

마우스와 같은 위치에서 채워지는게 아니라 마우스가 한참 위에 있어야 뒤늦게 올라오는데 이게 맞는건가요..? 강의에서 선생님 완성본도 비슷하게 뒤늦게? 올라오던데 마우스 위치와 같이 채워지게는 못하는 걸까요?

높이와 넓이 문제인 것도 같아서 여러 수정을 해봤는데 안 되네요ㅜㅜ

HTML/CSS 포트폴리오 반응형-웹 gsap scrolltrigger

답변 2

J.영

지식공유자

안녕하세요? green님
본 강의 구조에서는 y축의 위칫값에 따라 높이값이 달라지는 구조입니다.

gsap.to(container, {

y: y

});

여기서 y는 마우스의 현재 위치이며, 마우스를 화면 아래쪽으로 내리면 y 값은 커지게 됩니다.

예를 들어:

화면 맨 위에서 마우스 있으면: y = 0

중간쯤이면: y = 400 (예시)

화면 맨 아래쯤이면: y = 800~1000 (모니터 해상도에 따라 다름)

그렇기 때문에 지금 구조로 마우스와 .mask가 같은 위치로 되기는 어렵습니다.
전체적 구조를 다시 짜고, 스크립트도 다 다시 작성해야 합니다.
결국 교안을 다시 만들어야하는 상황입니다.ㅜ.ㅜ
죄송합니다.

J.young드림

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. green님.

green님께서 말씀하신 문제는 GSAP와 ScrollTrigger를 활용할 때, 마우스의 위치와 텍스트의 채워지는 타이밍이 어긋나는 현상인 것 같습니다. 이는 아마도 스크롤의 속도와 요소의 애니메이션이 맞지 않아서 발생하는 문제일 가능성이 큽니다.

고려해볼 설정:

Start/End 트리거 설정: ScrollTrigger의 start와 end 지점을 좀 더 세분화하여 조정해보시기 바랍니다. 현재의 offset 값을 수정하면, 스크롤에 연동되는 애니메이션의 스무스함을 개선할 수 있습니다.
스크롤 속도 조정: 여러 스크롤 속도 및 디스플레이 설정을 조정하는 것이 좋습니다. 속도와 지연을 잘 조정하면 이 문제가 해결될 수 있습니다.
마우스 포지션과 이벤트 조정: 애니메이션이 정확히 마우스 포지션과 연동되기를 원하신다면, 애니메이션 속성(딜레이나 타이밍)을 세부적이게 조정해야 합니다. CSS의 transition 속성이 아닌, GSAP의 트윈 속성을 활용해보는 것도 도움이 될 수 있습니다.

비슷한 문제를 다룬 기존의 질문 및 답변이 있을 경우 이를 참고하시면 도움이 될 수 있습니다.

참고 링크

현재 내용으로는 가장 유사한 예를 정확히 찾아드리기는 어렵지만, 일반적인 스크롤 트리거 관련 문제 해결에 도움이 될 수 있는 ScrollTrigger 관련 질문을 참고해 주시기 바랍니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변