가로스크롤 scrollTrigger 가 작동되지 않습니다.

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

ScrollTrigger 실무활용_가로로 스크롤되는 겔러리제작하기

작성

안녕하세요 선생님. 여러번 똑같이 따라 쳐보았으나..

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,
        },
      });
    },
  });
});

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

답변 2

Keroppi

질문자입니다. 혼자서 해결했습니다...

Keroppi

제가 강의를 보면서 동시에 코딩을 하느라 화면을 반으로 나눠서 왼편에 강의창+코딩된 페이지, 오른편에 코딩창을 띄워 놓고 하는데 matchMedia 에서 설정된 1024px 를 무시하고(...) 화면을 보고 있었기 때문이었습니다 ..ㅎ 저같은 바보같은 실수는 아무도 안 하시겠지만, 혹시나 몰라 기록을 남겨봅니다...

J.영

지식공유자

Keroppi님^^
수고 많으셨어요^^ 기록 감사합니다^^
J.영드림

인프런 AI 인턴

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

GSAP의 ScrollTrigger를 설정하신 코드에서 가로 스크롤이 동작하지 않는 문제로 고민 중이라고 하셨네요. 이 문제를 해결하기 위해 몇 가지 확인해 보아야 할 사항들이 있습니다.

HTML 구조 및 CSS 설정 확인:
- .work 클래스를 가진 요소의 크기와 CSS스타일이 제대로 설정되어 있는지 확인하세요. 특히, overflow: hidden 같은 속성이 요소 외부로의 스크롤을 가로막고 있지는 않은지 주의 깊게 봐야 합니다.
스크립트 로드 순서 확인:
- gsap 및 ScrollTrigger 플러그인이 HTML에서 제대로 로드되고 있는지 개발자 도구의 네트워크 탭에서 확인하세요. 특히 해당 스크립트들이 HTML 로드 이후에 초기화되어야 합니다.
CSS 초기화:
- 애니메이션이 시작하기 전에 상위 요소가 올바르게 초기화되어 있는지 확실히 하세요. 올바르지 않은 위치가 설정되어 있다면 동작이 어긋날 수 있습니다.
스크립트 내 CSS 조정:
- .work ul li 각각의 요소가 가로로 충분히 펼쳐질 수 있도록 적절히 스타일링되어 있는지 확인하세요. 각 li가 충분히 넓지 않다면 위로 쌓이는 방식으로 표시될 수 있습니다.
브라우저 호환성 문제:
- 다양한 브라우저에서 테스트해 보시고, 특정 브라우저에서만 문제가 발생하는지 검토해보세요. 가끔 특정 브라우저 관련 이슈가 있을 수 있습니다.

관련하여 유사한 문제를 다룬 질문을 참고해 보세요:
- ScrollTrigger 실무 활용_visual영역 제작하기 강의 관련 질문 - 여기서 ScrollTrigger 관련 다양한 이슈에 대한 해결책을 찾아보실 수 있습니다.

문제 해결에 도움이 되기를 바라며, 추가적으로 궁금한 점이 있거나 코드 실행에 이슈가 계속 발생할 경우 구체적인 코드와 콘솔 에러 내용을 제공해 주시면 더 정확한 도움을 드릴 수 있습니다.

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

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

가로스크롤 scrollTrigger 가 작동되지 않습니다.