안녕하세요 $(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도 안 보이는 걸 보니 플러그인이 작동되지 않는 것 같은데 코드를 전부 똑같이 치고 몇 번을 다시 봤는데도 전혀 안 되네요... 파일 첨부를 어떻게 하는지 몰라서 제 코드 파일 다운로드 링크를 함께 올립니다. 한번 확인 가능할까요?ㅜㅜ https://bigfile.mail.naver.com/download?fid=JYbZa6JnM6mraAUjKCY9KqvdHqUmKoEmFAU/KxvqKxg/HquXFA2dFAtqaxvjF6UlazKZaztlF4U/FrpSMoUdaAMqaxI0KrtlKA+oFAb=
smooth-scrollbar js 는 scrollerProxy 랑 연동해야하는 귀찮은 문제가있는데 Lenis는 scroll 값을 window.scrollY 에 그대로 반영하면서 부드러운 스크롤 효과를 주기 때문에, GSAP의 ScrollTrigger 랑 자연스럽게 연동되거든요 굳이 왜 어려운길을 가는지 이유가 궁금합니다. scrollerProxy 의 학습을 위해서인지 아니면 Lenis의 어떠한 문제가있어서 인지 궁금해서 여쭈어 봅니다.
안녕하세요. 선생님 섹션 8 강의: con02영역_인터렉티브 모션 : Gsap ScrollTrigger를 활용한 워크리스트제작 에서 'My Work' 텍스트를 스크롤할 때 고정시키고 아래 .workList 영역에게 margin-top을 줘서 자연스럽게 스크롤 되도록 설정해주셨는데, 스크롤 밑으로 내릴 때는 자연스러워보여도 스크롤을 위로 다시 올릴 때 'My Work' 애니메이션이 위영역과 겹친다거나, 부자연스러운데... 이부분은 어떻게 해결해야 되나요? 그리고 타이틀영역을 positon: sticky 로 적용하는 방법은 없을까요?
섹션2. Basic Trigger Practice(3) 이 부분을 들었는데요, 여기서 강사님 화면에서는 숫자 0에서 100% 올라가는 숫자카운팅이 보여지는데 전 0% 에서 바로 100% 가 되어서요, 그 이후의 동작은 정상적으로 잘 되구요~ 소스를 완성본을 복사해봐도 동일하구요
안녕하세요. 강의를 통해 gsap을 입문한 학생입니다. 현재 강의는 스크롤 시 실선이 나타나는데 점선으로 나타내고 싶습니다. 현재 강의에서의 설정부분인데 pathLength = document.querySelector(element).getTotalLength(); gsap.set(element,{ strokeDasharray:pathLength, strokeDashoffset:pathLength, }) strokeDasharray 설정 부분에 dashArray 간격이 16을 넣었더니 이미 실선이 그려진채로 나오더라구요. 드래그하면서 실선이 그려져야하는데... 실선이 아닌 점선으로도 구현할 수 있는지 궁금합니다
const end = document.querySelector(".last").getBoundingClientRect().left; 위 코드와 같이 요소의 특정 값을 사용하여 gsap 애니메이션을 사용할 경우 resize 이벤트 시 정상적으로 동작하는 케이스가 종종 있는데 리사이즈 이벤트가 발생할 때마다 addEventListener를 통해 gsap 애니메이션 코드를 모두 다시 호출하여 값을 재할당하는 방법밖에 없을까요? 리사이징에 대비하여 애니메이션 값을 동적으로 업데이트할 수 있는 더 효율적인 방법이나 권장되는 접근 방식이 있는지 질문드립니다.
안녕하세요 먼저 너무 유익하고 도움이되는 강의를 주셔서 감사드립니다. .con02에 workList gsap쪽에 질문이 있어서 글 남기게 되었습니다. my work 타이틀이 fixed되고 리스트들이 올라왔다가 다시 스크롤을 천천히 위 방향으로 해서 올라가다보면 리스트 영역이 이상하게 위로 올라왔다가 사라지는 현상이 있어서 문의 드립니다.
스무스 스크롤바 이용해서 포트폴리오 사이트 만들고 있어요! 그런데 폰으로 확인해보니 스크롤트리거 pin 고정부분은 엄청 부드럽게 작동하고, 나머지 부분에선 뻑뻑한데 이유가 뭔지 알 수 있을까요? 그리고 강의 너무너무 감사합니다!! 덕분에 빠르게 gsap 배우고 있어요!!
안녕하세요. 오늘 처음 수업을 시작하면서 <header> <nav>영역에 splitting 적용을 해봤는데요. 해당 모션이 적용되지 않아 문의드립니다. 혹시나 싶어 codepen 예제만 따로 만들어봤는데 동일한 현상이 생기고 있어 제가 무엇을 잘못하고 있는지 알 수가 없습니다. 완성본을 따로 받아 볼 수 있을지도 문의드립니다.
안녕하세요 범쌤...! 강의 너무 잘 듣고 있습니다. motionPath를 이용해서 구현하고 싶은 UI가 있습니다. 대략적인 구현하고자 하는 모양은 이러합니다. ● 디폴트 1. 행성이 각 궤도에 맞춰 공전 ● 행성을 클릭시 1. 공전이 멈추고 클릭 된 행성이 줌인 2.행성마다 행성의 설명 UI가 보여짐 설명이 부족한 것 같아 부족하지만 피그마로 그려서 첨부해봅니다.. 실무에 필요한데 도저히 감이오지 않아요 ㅜㅜㅜㅜㅜㅜ
