gsap ScrollTrigger pin 고정시 튕김현상 질문드립니다ㅜㅜ
본문
해당 부분에서 pin 고정인데 조금 1-2cm 위에서 튕김현상 ? 같은 게 있습니다
ScrollTrigger 공부 중인데 해당 페이지를 토대로 오류를 잡아내는 공부하고 있습니다
도무지 2일동안 봐도 모르겠네요 ..
원인 아시는 분 있을까요..
https://www.bundangcheil.com/241210_postpartum_main.php
<script>
ScrollTrigger.matchMedia({
"(min-width: 769px)": function() {
//기본 타임라인 구문
var pp_mission = gsap.timeline({
scrollTrigger: {
trigger: "#postpartum__mission__wr",
start: "top top",
end:"+=120%",
pin: true,
ease: "power1",
scrub: true,
anticipatePin: 1,
markers: true,
},
});
pp_mission.to("#postpartum__mission__wr .postpartum__mission__box .right__box", 5 ,{ y: "-56%"});
},
});
window.addEventListener("resize", () => {
ScrollTrigger.refresh();
});
</script>
스크립트에는 문제가 없는 거 같은데 페이지에서 뭐가 문제일까요 ??
답변 2
휠 한 칸(?) 에 100px 씩 이동이 되는거로 아는데, 그 pin 이 시작되는 지점('top top')과 휠을 굴릴때마다 100씩 증가되는 값이 딱 떨어지지 않아서 그런게 아닐까요...??
예를 들면 start 지점이 1530px 에 위치해있다고 가정하면, 휠을 0에서부터 굴릴때 1500 에서 바로 1600 으로 가버리니깐... 그래서 튕기는 것처럼 느껴지는게 아닐까 싶어요
lenis 도 같이 쓰면 좋을거 같아요
mixed content 오류 부터 잡으세요..
https 환경에서는 http 라이브러리를 로드할수 없습니다.
