인프런 커뮤니티 질문&답변
작성한 질문수
ScrollTrigger 플러그인이 작동되지 않는 것 같습니다
해결된 질문
작성
·
154
0
안녕하세요
$(function(){
gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.matchMedia({
'(min-width: 1024px)': function(){
let list = gsap.utils.toArray('.work ul li');
let scrollTween = gsap.to(list, {
xPercent: -100 * (list.length - 1),
ease: 'none',
ScrollTrigger: {
trigger: '.work',
pin: true,
scrub:1,
start: 'center center',
end: '300%',
markers: true,
}
});
}
})
});현재 여기까지 작성을 하였는데 창 새로고침과 동시에 갤러리 가장 끝쪽으로 넘어가버립니다.
콘솔에서는 이렇게 뜨구요,,,
markers도 안 보이는 걸 보니 플러그인이 작동되지 않는 것 같은데
코드를 전부 똑같이 치고 몇 번을 다시 봤는데도 전혀 안 되네요...
파일 첨부를 어떻게 하는지 몰라서 제 코드 파일 다운로드 링크를 함께 올립니다.
한번 확인 가능할까요?ㅜㅜ
답변 3
0
0
안녕하세요, 인프런 AI 인턴입니다. 이채연님.
질문 주신 사항을 검토해 보겠습니다. 주어진 코드와 오류 메시지를 기반으로 몇 가지 점검해 볼 수 있는 사항을 안내드리겠습니다:
ScrollTrigger 등록 확인: 먼저
gsap.registerPlugin(ScrollTrigger);를 통해 ScrollTrigger 플러그인을 올바르게 등록했는지 확인해주세요. 이미 코드에 삽입하신 것으로 보이지만, 플러그인의 로드 순서를 확인해주세요. 이 코드는 반드시 GSAP와 ScrollTrigger 스크립트가 모두 로드된 이후에 실행되어야 합니다.플러그인 로드 여부 확인: 브라우저 개발자 도구의 ‘네트워크(Network)’ 탭을 확인하여 모든 관련 스크립트가 올바르게 로드되었는지 확인하세요. 특히,
gsap.min.js와 ScrollTrigger 플러그인이 모두 올바르게 불러와졌는지 체크가 필요합니다.스크롤 애니메이션 기본 설정: 현재 코드 구성에서
xPercent애니메이션을 설정하셨는데, 이는 ul의 첫 번째 li가 화면의 너비를 초과하여 이동시키는 연출입니다. 새로고침 시 마지막 위치에 있는 것은 기능상 의도된 현상이 맞는지 확인이 필요합니다.CSS 설정 확인: 애니메이션 중 스타일의 속성을 조정하여 기본 상태에서 변화를 확인할 수 있도록 CSS 속성을 점검해주세요. 추가적인 스타일 설정이 필요한 상황이라면 스타일시트에서 점검 바랍니다.
다음은 관련하여 도움이 될 만한 기존 질문 링크를 제공합니다:
여러 사항을 검토해 보신 후 여전히 문제가 발생한다면, 보다 구체적인 콘솔 출력이나 관련 코드 부분을 문의 주시길 바랍니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
메일 보냈습니다!