가로스크롤 scrollTrigger 가 작동되지 않습니다.
179
작성자 없음
投稿した質問数 0
안녕하세요 선생님. 여러번 똑같이 따라 쳐보았으나..
markers: true 여도 페이지에 scrollTrigger 표시가 되지 않고, 가로 스크롤이 동작하지 않습니다.
console 창에 다른 오류 사항은 뜨지 않습니다.
무엇이 문제인지 전혀 모르겠어서 질문 남깁니다..
$(function () {
// GSAP Plugin
gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.matchMedia({
"(min-width: 1024px)": function () {
// horizontal scroll
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,
},
});
},
});
});回答 2
0
질문자입니다. 혼자서 해결했습니다...
0
제가 강의를 보면서 동시에 코딩을 하느라 화면을 반으로 나눠서 왼편에 강의창+코딩된 페이지, 오른편에 코딩창을 띄워 놓고 하는데 matchMedia 에서 설정된 1024px 를 무시하고(...) 화면을 보고 있었기 때문이었습니다 ..ㅎ 저같은 바보같은 실수는 아무도 안 하시겠지만, 혹시나 몰라 기록을 남겨봅니다...
0
안녕하세요, 인프런 AI 인턴입니다. Keroppi님.
GSAP의 ScrollTrigger를 설정하신 코드에서 가로 스크롤이 동작하지 않는 문제로 고민 중이라고 하셨네요. 이 문제를 해결하기 위해 몇 가지 확인해 보아야 할 사항들이 있습니다.
HTML 구조 및 CSS 설정 확인:
.work클래스를 가진 요소의 크기와 CSS스타일이 제대로 설정되어 있는지 확인하세요. 특히,overflow: hidden같은 속성이 요소 외부로의 스크롤을 가로막고 있지는 않은지 주의 깊게 봐야 합니다.
스크립트 로드 순서 확인:
gsap및ScrollTrigger플러그인이 HTML에서 제대로 로드되고 있는지 개발자 도구의 네트워크 탭에서 확인하세요. 특히 해당 스크립트들이 HTML 로드 이후에 초기화되어야 합니다.
CSS 초기화:
- 애니메이션이 시작하기 전에 상위 요소가 올바르게 초기화되어 있는지 확실히 하세요. 올바르지 않은 위치가 설정되어 있다면 동작이 어긋날 수 있습니다.
- 애니메이션이 시작하기 전에 상위 요소가 올바르게 초기화되어 있는지 확실히 하세요. 올바르지 않은 위치가 설정되어 있다면 동작이 어긋날 수 있습니다.
스크립트 내 CSS 조정:
.work ul li각각의 요소가 가로로 충분히 펼쳐질 수 있도록 적절히 스타일링되어 있는지 확인하세요. 각 li가 충분히 넓지 않다면 위로 쌓이는 방식으로 표시될 수 있습니다.
브라우저 호환성 문제:
- 다양한 브라우저에서 테스트해 보시고, 특정 브라우저에서만 문제가 발생하는지 검토해보세요. 가끔 특정 브라우저 관련 이슈가 있을 수 있습니다.
- 다양한 브라우저에서 테스트해 보시고, 특정 브라우저에서만 문제가 발생하는지 검토해보세요. 가끔 특정 브라우저 관련 이슈가 있을 수 있습니다.
관련하여 유사한 문제를 다룬 질문을 참고해 보세요:
- ScrollTrigger 실무 활용_visual영역 제작하기 강의 관련 질문 - 여기서 ScrollTrigger 관련 다양한 이슈에 대한 해결책을 찾아보실 수 있습니다.
문제 해결에 도움이 되기를 바라며, 추가적으로 궁금한 점이 있거나 코드 실행에 이슈가 계속 발생할 경우 구체적인 코드와 콘솔 에러 내용을 제공해 주시면 더 정확한 도움을 드릴 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
강의 문의드립니다.
0
85
3
마우스 채워지는 텍스트
0
88
2
스크립트 부분이 이해가 어렵네요
0
89
2
scrolltrigger pin-spacer 영역 없애는 법 있나요?
0
270
2
완성본 요청드립니다.
0
96
1
선생님 완성본 문의드립니다.
0
144
2
simplyscroll Plugin에 대해서 질문드립니다.
0
120
2
가로스크롤 갤러리 반응형에서 scrollTrigger 동작 문제
0
113
1
ScrollTrigger 플러그인이 작동되지 않는 것 같습니다
0
207
3
포트폴리오 문의드립니다.
0
123
2
섹션8 질문
0
141
2
강의요청
0
173
3
5차 완성본 요청합니다.
0
147
2
3차 y축으로 올라오는 갤러리제작
0
145
2
내용입력할때 p안쓰고 span쓰는 이유가 있을까요
0
196
2
섹션 .con02 gsap 질문
0
280
3
scrolla 질문
0
141
2
header gnb splitting 적용문제
0
174
3
clamp, min max를 활용한 강의도 있나요??
0
181
1
완성본은 따로 없는건가요?
0
156
1
안녕하세요. 포트폴리오가 어느방향으로 해야할지 감이 안잡히는데 카톡같은걸로 상담도 해주시나요?
0
126
2
완성된 코드 자료 받아볼 수 있을까요?
0
181
1
섹션 14 테두리 밖 색상 제거
0
174
2
선생님
0
220
1