scrub: true: 스크롤을 내리면 애니메이션이 바로 반응해서 진행됩니다. 스크롤을 올리면 애니메이션이 바로 반응해서 거꾸로 진행됩니다. scrub: 0.5: 스크롤을 내리면 애니메이션이 스크롤바를 따라가는 데 0.5초가 걸립니다. 즉, 스크롤을 빠르게 내리더라도 애니메이션이 조금 뒤에 부드럽게 따라오는 느낌을 줍니다.

{ gsap.to(".test", { scrollTrigger: { trigger: ".div-wrap", markers: true, start: "500px center", end: "bottom center", scrub: true, }, x: `-4000px`, }); } { gsap.to(".test", { //내가 효과를 주고 싶은 요소 scrollTrigger: { //스크롤로 효과를 제어 trigger: ".div-wrap", //스크롤 효과를 줄 기준 markers: true, //기준 maker 보이게하는거 start: "500px center", // 시작점 : 언제시작(trigger)? 기준(뷰포트) end: "bottom center", // 끝점 : 언제끝(trigger)? 기준(..

var swiper = new Swiper(".Swiper", { 이 부분의 변수의 이름을 중복으로 적지 않았는지 확인한다.

swiper slide에서 slidesPerView랑 loop 같이 썼는데 loop가 작동 안하는 이유 slidesPerView : 4, 이런식으로 쓰면 class swiper-slide의 갯수를 slidesPerView의 배수로 맞춰줘야한다 (4, 8, 12 ...)

1. cdn 가져오는 법 https://greensock.com/docs/v3/Installation (1) 제일 상단 메뉴 docs > installation 섹션에 들어간다 (2) 필요한 효과를 체크 한 후 Browser code부분에 있는 script 코드를 헤더부분에 붙여넣는다. https://cdnjs.com/libraries/gsap gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers GSAP is a JavaScript library for building high-performance animations that work in **every** major brows..

초기화 되는 이유 : gsap타임라인을 사용하지 않고 여러개의 독립적인 애니메이션을 연속적으로 실행하려면, 각 애니메이션의 시작 값이 이전 애니메이션의 종료 값과 일치해야한다. 그렇지 않으면 애니메이션 간에 불연속성이 발생한다. 해결하는 방법 GSAP 타임라인 사용: 타임라인을 사용하면 여러 애니메이션을 서로 연결할 수 있으며, 각 애니메이션의 시작과 종료를 정확히 제어할 수 있습니다. 이로 인해 간단하게 순차적인 애니메이션을 구현할 수 있습니다. 위치와 회전 값 저장: 애니메이션의 종료 시점에서 위치와 회전 값을 저장하고, 다음 애니메이션의 시작 값으로 사용할 수 있습니다. 이렇게 하려면 애니메이션의 종료 시점을 감지하고 해당 값을 수동으로 설정해야 할 수도 있습니다. 콜백 함수 사용: GSAP에서는 ..