Scroll concepts.
ScrollTrigger and the patterns that turn page scroll into animation timing.
- Horizontal scrollHorizontal scroll is a scroll-driven layout where a full-viewport section is pinned in place and its inner track slides sideways as the user scrolls vertically.
- invalidateOnRefreshinvalidateOnRefresh is a ScrollTrigger option that tells GSAP to re-read each tween's starting values on every ScrollTrigger.refresh().
- PinningPinning is a ScrollTrigger feature that locks an element in place while scroll progresses past it.
- Scroll snappingScroll snapping is a ScrollTrigger feature that eases the scroll position to the nearest defined stop after the user stops scrolling.
- Scroll velocityScroll velocity is the speed and direction the user is scrolling, measured in pixels per second, which ScrollTrigger exposes through self.getVelocity() inside its callbacks.
- ScrollSmootherScrollSmoother is a GSAP plugin that wraps native scrolling in a smoothing layer, so the page eases toward the scroll position instead of snapping to it.
- ScrollToPluginScrollToPlugin is a GSAP plugin that animates scroll position, so you can smooth-scroll the window or any scrollable element to a pixel value or a target element with an ease and duration you control.
- ScrollTriggerScrollTrigger is a GSAP plugin that ties any animation to scroll position.
- ScrollTrigger.batch()ScrollTrigger.batch() is a static method that creates one ScrollTrigger per element but groups the ones entering the viewport in the same frame into a single callback, so you can stagger a whole batch at once instead of animating each element on its own trigger.
- ScrubScrub is the ScrollTrigger option that binds a tween's progress to scroll position instead of time.
- toggleActionstoggleActions is a ScrollTrigger string that controls what a linked animation does at four scroll moments: onEnter, onLeave, onEnterBack, onLeaveBack.