Concepts category

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.