-
[GSAP] ScrollTrigger 시작 시점 리턴 값 얻는 방법Coding 2024. 3. 5. 22:15반응형
var myScrollTrigger = ScrollTrigger.create({ trigger: "#id", start: "top top", endTrigger: "#otherID", end: "bottom 50%+=100px", }); // ScrollTrigger 시작 지점으로 스크롤 포커스 가도록 가능 gsap.to(window, { duration: 0.5, scrollTo: myScrollTrigger.start, });
ScrollTrigger [properties]
start
start : Number
[read-only] The ScrollTrigger's starting scroll position (numeric, in pixels).
Details
[read-only] The ScrollTrigger's starting scroll position (numeric, in pixels). This value gets calculated when the ScrollTrigger is refreshed, so anytime the window/scroller gets resized it'll be recalculated.
For example, if the trigger element is 100px below the bottom of the viewport (out of view), and the ScrollTrigger's vars had start: "top bottom", then the ScrollTrigger's calculated start property would be 100 (meaning it'd have to scroll 100px to hit the starting point).
The ScrollTrigger's start and end properties will always be numeric and reflect the scroll position in pixels.반응형'Coding' 카테고리의 다른 글
[GSAP] scrollTo() 함수 기본 사용법 (0) 2024.06.02 [SCSS] 내 기준 유용하게 사용하고있는 scss mixin 모음 (0) 2023.07.14 [CSS] aspect-ratio 속성으로 object 비율 맞추기 (+크로스 브라우징) (0) 2023.07.13 [CSS] 이미지를 컨테이너에 맞게 사이즈 통일하는 방법 (object-fit, background ..) (0) 2023.07.12 [CSS, JS] 꽃이 흔들거리는 효과 구현하기 (0) 2023.05.19