gsap
Version:
GSAP is a framework-agnostic JavaScript animation library that turns developers into animation superheroes. Build high-performance animations that work in **every** major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths,
1,255 lines (1,093 loc) • 112 kB
JavaScript
/*!
* ScrollTrigger 3.13.0
* https://gsap.com
*
* @license Copyright 2008-2025, GreenSock. All rights reserved.
* Subject to the terms at https://gsap.com/standard-license
* @author: Jack Doyle, jack@greensock.com
*/
/* eslint-disable */
import { Observer, _getTarget, _vertical, _horizontal, _scrollers, _proxies, _getScrollFunc, _getProxyProp, _getVelocityProp } from "./Observer.js";
var gsap,
_coreInitted,
_win,
_doc,
_docEl,
_body,
_root,
_resizeDelay,
_toArray,
_clamp,
_time2,
_syncInterval,
_refreshing,
_pointerIsDown,
_transformProp,
_i,
_prevWidth,
_prevHeight,
_autoRefresh,
_sort,
_suppressOverwrites,
_ignoreResize,
_normalizer,
_ignoreMobileResize,
_baseScreenHeight,
_baseScreenWidth,
_fixIOSBug,
_context,
_scrollRestoration,
_div100vh,
_100vh,
_isReverted,
_clampingMax,
_limitCallbacks,
// if true, we'll only trigger callbacks if the active state toggles, so if you scroll immediately past both the start and end positions of a ScrollTrigger (thus inactive to inactive), neither its onEnter nor onLeave will be called. This is useful during startup.
_startup = 1,
_getTime = Date.now,
_time1 = _getTime(),
_lastScrollTime = 0,
_enabled = 0,
_parseClamp = function _parseClamp(value, type, self) {
var clamp = _isString(value) && (value.substr(0, 6) === "clamp(" || value.indexOf("max") > -1);
self["_" + type + "Clamp"] = clamp;
return clamp ? value.substr(6, value.length - 7) : value;
},
_keepClamp = function _keepClamp(value, clamp) {
return clamp && (!_isString(value) || value.substr(0, 6) !== "clamp(") ? "clamp(" + value + ")" : value;
},
_rafBugFix = function _rafBugFix() {
return _enabled && requestAnimationFrame(_rafBugFix);
},
// in some browsers (like Firefox), screen repaints weren't consistent unless we had SOMETHING queued up in requestAnimationFrame()! So this just creates a super simple loop to keep it alive and smooth out repaints.
_pointerDownHandler = function _pointerDownHandler() {
return _pointerIsDown = 1;
},
_pointerUpHandler = function _pointerUpHandler() {
return _pointerIsDown = 0;
},
_passThrough = function _passThrough(v) {
return v;
},
_round = function _round(value) {
return Math.round(value * 100000) / 100000 || 0;
},
_windowExists = function _windowExists() {
return typeof window !== "undefined";
},
_getGSAP = function _getGSAP() {
return gsap || _windowExists() && (gsap = window.gsap) && gsap.registerPlugin && gsap;
},
_isViewport = function _isViewport(e) {
return !!~_root.indexOf(e);
},
_getViewportDimension = function _getViewportDimension(dimensionProperty) {
return (dimensionProperty === "Height" ? _100vh : _win["inner" + dimensionProperty]) || _docEl["client" + dimensionProperty] || _body["client" + dimensionProperty];
},
_getBoundsFunc = function _getBoundsFunc(element) {
return _getProxyProp(element, "getBoundingClientRect") || (_isViewport(element) ? function () {
_winOffsets.width = _win.innerWidth;
_winOffsets.height = _100vh;
return _winOffsets;
} : function () {
return _getBounds(element);
});
},
_getSizeFunc = function _getSizeFunc(scroller, isViewport, _ref) {
var d = _ref.d,
d2 = _ref.d2,
a = _ref.a;
return (a = _getProxyProp(scroller, "getBoundingClientRect")) ? function () {
return a()[d];
} : function () {
return (isViewport ? _getViewportDimension(d2) : scroller["client" + d2]) || 0;
};
},
_getOffsetsFunc = function _getOffsetsFunc(element, isViewport) {
return !isViewport || ~_proxies.indexOf(element) ? _getBoundsFunc(element) : function () {
return _winOffsets;
};
},
_maxScroll = function _maxScroll(element, _ref2) {
var s = _ref2.s,
d2 = _ref2.d2,
d = _ref2.d,
a = _ref2.a;
return Math.max(0, (s = "scroll" + d2) && (a = _getProxyProp(element, s)) ? a() - _getBoundsFunc(element)()[d] : _isViewport(element) ? (_docEl[s] || _body[s]) - _getViewportDimension(d2) : element[s] - element["offset" + d2]);
},
_iterateAutoRefresh = function _iterateAutoRefresh(func, events) {
for (var i = 0; i < _autoRefresh.length; i += 3) {
(!events || ~events.indexOf(_autoRefresh[i + 1])) && func(_autoRefresh[i], _autoRefresh[i + 1], _autoRefresh[i + 2]);
}
},
_isString = function _isString(value) {
return typeof value === "string";
},
_isFunction = function _isFunction(value) {
return typeof value === "function";
},
_isNumber = function _isNumber(value) {
return typeof value === "number";
},
_isObject = function _isObject(value) {
return typeof value === "object";
},
_endAnimation = function _endAnimation(animation, reversed, pause) {
return animation && animation.progress(reversed ? 0 : 1) && pause && animation.pause();
},
_callback = function _callback(self, func) {
if (self.enabled) {
var result = self._ctx ? self._ctx.add(function () {
return func(self);
}) : func(self);
result && result.totalTime && (self.callbackAnimation = result);
}
},
_abs = Math.abs,
_left = "left",
_top = "top",
_right = "right",
_bottom = "bottom",
_width = "width",
_height = "height",
_Right = "Right",
_Left = "Left",
_Top = "Top",
_Bottom = "Bottom",
_padding = "padding",
_margin = "margin",
_Width = "Width",
_Height = "Height",
_px = "px",
_getComputedStyle = function _getComputedStyle(element) {
return _win.getComputedStyle(element);
},
_makePositionable = function _makePositionable(element) {
// if the element already has position: absolute or fixed, leave that, otherwise make it position: relative
var position = _getComputedStyle(element).position;
element.style.position = position === "absolute" || position === "fixed" ? position : "relative";
},
_setDefaults = function _setDefaults(obj, defaults) {
for (var p in defaults) {
p in obj || (obj[p] = defaults[p]);
}
return obj;
},
_getBounds = function _getBounds(element, withoutTransforms) {
var tween = withoutTransforms && _getComputedStyle(element)[_transformProp] !== "matrix(1, 0, 0, 1, 0, 0)" && gsap.to(element, {
x: 0,
y: 0,
xPercent: 0,
yPercent: 0,
rotation: 0,
rotationX: 0,
rotationY: 0,
scale: 1,
skewX: 0,
skewY: 0
}).progress(1),
bounds = element.getBoundingClientRect();
tween && tween.progress(0).kill();
return bounds;
},
_getSize = function _getSize(element, _ref3) {
var d2 = _ref3.d2;
return element["offset" + d2] || element["client" + d2] || 0;
},
_getLabelRatioArray = function _getLabelRatioArray(timeline) {
var a = [],
labels = timeline.labels,
duration = timeline.duration(),
p;
for (p in labels) {
a.push(labels[p] / duration);
}
return a;
},
_getClosestLabel = function _getClosestLabel(animation) {
return function (value) {
return gsap.utils.snap(_getLabelRatioArray(animation), value);
};
},
_snapDirectional = function _snapDirectional(snapIncrementOrArray) {
var snap = gsap.utils.snap(snapIncrementOrArray),
a = Array.isArray(snapIncrementOrArray) && snapIncrementOrArray.slice(0).sort(function (a, b) {
return a - b;
});
return a ? function (value, direction, threshold) {
if (threshold === void 0) {
threshold = 1e-3;
}
var i;
if (!direction) {
return snap(value);
}
if (direction > 0) {
value -= threshold; // to avoid rounding errors. If we're too strict, it might snap forward, then immediately again, and again.
for (i = 0; i < a.length; i++) {
if (a[i] >= value) {
return a[i];
}
}
return a[i - 1];
} else {
i = a.length;
value += threshold;
while (i--) {
if (a[i] <= value) {
return a[i];
}
}
}
return a[0];
} : function (value, direction, threshold) {
if (threshold === void 0) {
threshold = 1e-3;
}
var snapped = snap(value);
return !direction || Math.abs(snapped - value) < threshold || snapped - value < 0 === direction < 0 ? snapped : snap(direction < 0 ? value - snapIncrementOrArray : value + snapIncrementOrArray);
};
},
_getLabelAtDirection = function _getLabelAtDirection(timeline) {
return function (value, st) {
return _snapDirectional(_getLabelRatioArray(timeline))(value, st.direction);
};
},
_multiListener = function _multiListener(func, element, types, callback) {
return types.split(",").forEach(function (type) {
return func(element, type, callback);
});
},
_addListener = function _addListener(element, type, func, nonPassive, capture) {
return element.addEventListener(type, func, {
passive: !nonPassive,
capture: !!capture
});
},
_removeListener = function _removeListener(element, type, func, capture) {
return element.removeEventListener(type, func, !!capture);
},
_wheelListener = function _wheelListener(func, el, scrollFunc) {
scrollFunc = scrollFunc && scrollFunc.wheelHandler;
if (scrollFunc) {
func(el, "wheel", scrollFunc);
func(el, "touchmove", scrollFunc);
}
},
_markerDefaults = {
startColor: "green",
endColor: "red",
indent: 0,
fontSize: "16px",
fontWeight: "normal"
},
_defaults = {
toggleActions: "play",
anticipatePin: 0
},
_keywords = {
top: 0,
left: 0,
center: 0.5,
bottom: 1,
right: 1
},
_offsetToPx = function _offsetToPx(value, size) {
if (_isString(value)) {
var eqIndex = value.indexOf("="),
relative = ~eqIndex ? +(value.charAt(eqIndex - 1) + 1) * parseFloat(value.substr(eqIndex + 1)) : 0;
if (~eqIndex) {
value.indexOf("%") > eqIndex && (relative *= size / 100);
value = value.substr(0, eqIndex - 1);
}
value = relative + (value in _keywords ? _keywords[value] * size : ~value.indexOf("%") ? parseFloat(value) * size / 100 : parseFloat(value) || 0);
}
return value;
},
_createMarker = function _createMarker(type, name, container, direction, _ref4, offset, matchWidthEl, containerAnimation) {
var startColor = _ref4.startColor,
endColor = _ref4.endColor,
fontSize = _ref4.fontSize,
indent = _ref4.indent,
fontWeight = _ref4.fontWeight;
var e = _doc.createElement("div"),
useFixedPosition = _isViewport(container) || _getProxyProp(container, "pinType") === "fixed",
isScroller = type.indexOf("scroller") !== -1,
parent = useFixedPosition ? _body : container,
isStart = type.indexOf("start") !== -1,
color = isStart ? startColor : endColor,
css = "border-color:" + color + ";font-size:" + fontSize + ";color:" + color + ";font-weight:" + fontWeight + ";pointer-events:none;white-space:nowrap;font-family:sans-serif,Arial;z-index:1000;padding:4px 8px;border-width:0;border-style:solid;";
css += "position:" + ((isScroller || containerAnimation) && useFixedPosition ? "fixed;" : "absolute;");
(isScroller || containerAnimation || !useFixedPosition) && (css += (direction === _vertical ? _right : _bottom) + ":" + (offset + parseFloat(indent)) + "px;");
matchWidthEl && (css += "box-sizing:border-box;text-align:left;width:" + matchWidthEl.offsetWidth + "px;");
e._isStart = isStart;
e.setAttribute("class", "gsap-marker-" + type + (name ? " marker-" + name : ""));
e.style.cssText = css;
e.innerText = name || name === 0 ? type + "-" + name : type;
parent.children[0] ? parent.insertBefore(e, parent.children[0]) : parent.appendChild(e);
e._offset = e["offset" + direction.op.d2];
_positionMarker(e, 0, direction, isStart);
return e;
},
_positionMarker = function _positionMarker(marker, start, direction, flipped) {
var vars = {
display: "block"
},
side = direction[flipped ? "os2" : "p2"],
oppositeSide = direction[flipped ? "p2" : "os2"];
marker._isFlipped = flipped;
vars[direction.a + "Percent"] = flipped ? -100 : 0;
vars[direction.a] = flipped ? "1px" : 0;
vars["border" + side + _Width] = 1;
vars["border" + oppositeSide + _Width] = 0;
vars[direction.p] = start + "px";
gsap.set(marker, vars);
},
_triggers = [],
_ids = {},
_rafID,
_sync = function _sync() {
return _getTime() - _lastScrollTime > 34 && (_rafID || (_rafID = requestAnimationFrame(_updateAll)));
},
_onScroll = function _onScroll() {
// previously, we tried to optimize performance by batching/deferring to the next requestAnimationFrame(), but discovered that Safari has a few bugs that make this unworkable (especially on iOS). See https://codepen.io/GreenSock/pen/16c435b12ef09c38125204818e7b45fc?editors=0010 and https://codepen.io/GreenSock/pen/JjOxYpQ/3dd65ccec5a60f1d862c355d84d14562?editors=0010 and https://codepen.io/GreenSock/pen/ExbrPNa/087cef197dc35445a0951e8935c41503?editors=0010
if (!_normalizer || !_normalizer.isPressed || _normalizer.startX > _body.clientWidth) {
// if the user is dragging the scrollbar, allow it.
_scrollers.cache++;
if (_normalizer) {
_rafID || (_rafID = requestAnimationFrame(_updateAll));
} else {
_updateAll(); // Safari in particular (on desktop) NEEDS the immediate update rather than waiting for a requestAnimationFrame() whereas iOS seems to benefit from waiting for the requestAnimationFrame() tick, at least when normalizing. See https://codepen.io/GreenSock/pen/qBYozqO?editors=0110
}
_lastScrollTime || _dispatch("scrollStart");
_lastScrollTime = _getTime();
}
},
_setBaseDimensions = function _setBaseDimensions() {
_baseScreenWidth = _win.innerWidth;
_baseScreenHeight = _win.innerHeight;
},
_onResize = function _onResize(force) {
_scrollers.cache++;
(force === true || !_refreshing && !_ignoreResize && !_doc.fullscreenElement && !_doc.webkitFullscreenElement && (!_ignoreMobileResize || _baseScreenWidth !== _win.innerWidth || Math.abs(_win.innerHeight - _baseScreenHeight) > _win.innerHeight * 0.25)) && _resizeDelay.restart(true);
},
// ignore resizes triggered by refresh()
_listeners = {},
_emptyArray = [],
_softRefresh = function _softRefresh() {
return _removeListener(ScrollTrigger, "scrollEnd", _softRefresh) || _refreshAll(true);
},
_dispatch = function _dispatch(type) {
return _listeners[type] && _listeners[type].map(function (f) {
return f();
}) || _emptyArray;
},
_savedStyles = [],
// when ScrollTrigger.saveStyles() is called, the inline styles are recorded in this Array in a sequential format like [element, cssText, gsCache, media]. This keeps it very memory-efficient and fast to iterate through.
_revertRecorded = function _revertRecorded(media) {
for (var i = 0; i < _savedStyles.length; i += 5) {
if (!media || _savedStyles[i + 4] && _savedStyles[i + 4].query === media) {
_savedStyles[i].style.cssText = _savedStyles[i + 1];
_savedStyles[i].getBBox && _savedStyles[i].setAttribute("transform", _savedStyles[i + 2] || "");
_savedStyles[i + 3].uncache = 1;
}
}
},
_revertAll = function _revertAll(kill, media) {
var trigger;
for (_i = 0; _i < _triggers.length; _i++) {
trigger = _triggers[_i];
if (trigger && (!media || trigger._ctx === media)) {
if (kill) {
trigger.kill(1);
} else {
trigger.revert(true, true);
}
}
}
_isReverted = true;
media && _revertRecorded(media);
media || _dispatch("revert");
},
_clearScrollMemory = function _clearScrollMemory(scrollRestoration, force) {
// zero-out all the recorded scroll positions. Don't use _triggers because if, for example, .matchMedia() is used to create some ScrollTriggers and then the user resizes and it removes ALL ScrollTriggers, and then go back to a size where there are ScrollTriggers, it would have kept the position(s) saved from the initial state.
_scrollers.cache++;
(force || !_refreshingAll) && _scrollers.forEach(function (obj) {
return _isFunction(obj) && obj.cacheID++ && (obj.rec = 0);
});
_isString(scrollRestoration) && (_win.history.scrollRestoration = _scrollRestoration = scrollRestoration);
},
_refreshingAll,
_refreshID = 0,
_queueRefreshID,
_queueRefreshAll = function _queueRefreshAll() {
// we don't want to call _refreshAll() every time we create a new ScrollTrigger (for performance reasons) - it's better to batch them. Some frameworks dynamically load content and we can't rely on the window's "load" or "DOMContentLoaded" events to trigger it.
if (_queueRefreshID !== _refreshID) {
var id = _queueRefreshID = _refreshID;
requestAnimationFrame(function () {
return id === _refreshID && _refreshAll(true);
});
}
},
_refresh100vh = function _refresh100vh() {
_body.appendChild(_div100vh);
_100vh = !_normalizer && _div100vh.offsetHeight || _win.innerHeight;
_body.removeChild(_div100vh);
},
_hideAllMarkers = function _hideAllMarkers(hide) {
return _toArray(".gsap-marker-start, .gsap-marker-end, .gsap-marker-scroller-start, .gsap-marker-scroller-end").forEach(function (el) {
return el.style.display = hide ? "none" : "block";
});
},
_refreshAll = function _refreshAll(force, skipRevert) {
_docEl = _doc.documentElement; // some frameworks like Astro may cache the <body> and replace it during routing, so we'll just re-record the _docEl and _body for safety (otherwise, the markers may not get added properly).
_body = _doc.body;
_root = [_win, _doc, _docEl, _body];
if (_lastScrollTime && !force && !_isReverted) {
_addListener(ScrollTrigger, "scrollEnd", _softRefresh);
return;
}
_refresh100vh();
_refreshingAll = ScrollTrigger.isRefreshing = true;
_scrollers.forEach(function (obj) {
return _isFunction(obj) && ++obj.cacheID && (obj.rec = obj());
}); // force the clearing of the cache because some browsers take a little while to dispatch the "scroll" event and the user may have changed the scroll position and then called ScrollTrigger.refresh() right away
var refreshInits = _dispatch("refreshInit");
_sort && ScrollTrigger.sort();
skipRevert || _revertAll();
_scrollers.forEach(function (obj) {
if (_isFunction(obj)) {
obj.smooth && (obj.target.style.scrollBehavior = "auto"); // smooth scrolling interferes
obj(0);
}
});
_triggers.slice(0).forEach(function (t) {
return t.refresh();
}); // don't loop with _i because during a refresh() someone could call ScrollTrigger.update() which would iterate through _i resulting in a skip.
_isReverted = false;
_triggers.forEach(function (t) {
// nested pins (pinnedContainer) with pinSpacing may expand the container, so we must accommodate that here.
if (t._subPinOffset && t.pin) {
var prop = t.vars.horizontal ? "offsetWidth" : "offsetHeight",
original = t.pin[prop];
t.revert(true, 1);
t.adjustPinSpacing(t.pin[prop] - original);
t.refresh();
}
});
_clampingMax = 1; // pinSpacing might be propping a page open, thus when we .setPositions() to clamp a ScrollTrigger's end we should leave the pinSpacing alone. That's what this flag is for.
_hideAllMarkers(true);
_triggers.forEach(function (t) {
// the scroller's max scroll position may change after all the ScrollTriggers refreshed (like pinning could push it down), so we need to loop back and correct any with end: "max". Same for anything with a clamped end
var max = _maxScroll(t.scroller, t._dir),
endClamp = t.vars.end === "max" || t._endClamp && t.end > max,
startClamp = t._startClamp && t.start >= max;
(endClamp || startClamp) && t.setPositions(startClamp ? max - 1 : t.start, endClamp ? Math.max(startClamp ? max : t.start + 1, max) : t.end, true);
});
_hideAllMarkers(false);
_clampingMax = 0;
refreshInits.forEach(function (result) {
return result && result.render && result.render(-1);
}); // if the onRefreshInit() returns an animation (typically a gsap.set()), revert it. This makes it easy to put things in a certain spot before refreshing for measurement purposes, and then put things back.
_scrollers.forEach(function (obj) {
if (_isFunction(obj)) {
obj.smooth && requestAnimationFrame(function () {
return obj.target.style.scrollBehavior = "smooth";
});
obj.rec && obj(obj.rec);
}
});
_clearScrollMemory(_scrollRestoration, 1);
_resizeDelay.pause();
_refreshID++;
_refreshingAll = 2;
_updateAll(2);
_triggers.forEach(function (t) {
return _isFunction(t.vars.onRefresh) && t.vars.onRefresh(t);
});
_refreshingAll = ScrollTrigger.isRefreshing = false;
_dispatch("refresh");
},
_lastScroll = 0,
_direction = 1,
_primary,
_updateAll = function _updateAll(force) {
if (force === 2 || !_refreshingAll && !_isReverted) {
// _isReverted could be true if, for example, a matchMedia() is in the process of executing. We don't want to update during the time everything is reverted.
ScrollTrigger.isUpdating = true;
_primary && _primary.update(0); // ScrollSmoother uses refreshPriority -9999 to become the primary that gets updated before all others because it affects the scroll position.
var l = _triggers.length,
time = _getTime(),
recordVelocity = time - _time1 >= 50,
scroll = l && _triggers[0].scroll();
_direction = _lastScroll > scroll ? -1 : 1;
_refreshingAll || (_lastScroll = scroll);
if (recordVelocity) {
if (_lastScrollTime && !_pointerIsDown && time - _lastScrollTime > 200) {
_lastScrollTime = 0;
_dispatch("scrollEnd");
}
_time2 = _time1;
_time1 = time;
}
if (_direction < 0) {
_i = l;
while (_i-- > 0) {
_triggers[_i] && _triggers[_i].update(0, recordVelocity);
}
_direction = 1;
} else {
for (_i = 0; _i < l; _i++) {
_triggers[_i] && _triggers[_i].update(0, recordVelocity);
}
}
ScrollTrigger.isUpdating = false;
}
_rafID = 0;
},
_propNamesToCopy = [_left, _top, _bottom, _right, _margin + _Bottom, _margin + _Right, _margin + _Top, _margin + _Left, "display", "flexShrink", "float", "zIndex", "gridColumnStart", "gridColumnEnd", "gridRowStart", "gridRowEnd", "gridArea", "justifySelf", "alignSelf", "placeSelf", "order"],
_stateProps = _propNamesToCopy.concat([_width, _height, "boxSizing", "max" + _Width, "max" + _Height, "position", _margin, _padding, _padding + _Top, _padding + _Right, _padding + _Bottom, _padding + _Left]),
_swapPinOut = function _swapPinOut(pin, spacer, state) {
_setState(state);
var cache = pin._gsap;
if (cache.spacerIsNative) {
_setState(cache.spacerState);
} else if (pin._gsap.swappedIn) {
var parent = spacer.parentNode;
if (parent) {
parent.insertBefore(pin, spacer);
parent.removeChild(spacer);
}
}
pin._gsap.swappedIn = false;
},
_swapPinIn = function _swapPinIn(pin, spacer, cs, spacerState) {
if (!pin._gsap.swappedIn) {
var i = _propNamesToCopy.length,
spacerStyle = spacer.style,
pinStyle = pin.style,
p;
while (i--) {
p = _propNamesToCopy[i];
spacerStyle[p] = cs[p];
}
spacerStyle.position = cs.position === "absolute" ? "absolute" : "relative";
cs.display === "inline" && (spacerStyle.display = "inline-block");
pinStyle[_bottom] = pinStyle[_right] = "auto";
spacerStyle.flexBasis = cs.flexBasis || "auto";
spacerStyle.overflow = "visible";
spacerStyle.boxSizing = "border-box";
spacerStyle[_width] = _getSize(pin, _horizontal) + _px;
spacerStyle[_height] = _getSize(pin, _vertical) + _px;
spacerStyle[_padding] = pinStyle[_margin] = pinStyle[_top] = pinStyle[_left] = "0";
_setState(spacerState);
pinStyle[_width] = pinStyle["max" + _Width] = cs[_width];
pinStyle[_height] = pinStyle["max" + _Height] = cs[_height];
pinStyle[_padding] = cs[_padding];
if (pin.parentNode !== spacer) {
pin.parentNode.insertBefore(spacer, pin);
spacer.appendChild(pin);
}
pin._gsap.swappedIn = true;
}
},
_capsExp = /([A-Z])/g,
_setState = function _setState(state) {
if (state) {
var style = state.t.style,
l = state.length,
i = 0,
p,
value;
(state.t._gsap || gsap.core.getCache(state.t)).uncache = 1; // otherwise transforms may be off
for (; i < l; i += 2) {
value = state[i + 1];
p = state[i];
if (value) {
style[p] = value;
} else if (style[p]) {
style.removeProperty(p.replace(_capsExp, "-$1").toLowerCase());
}
}
}
},
_getState = function _getState(element) {
// returns an Array with alternating values like [property, value, property, value] and a "t" property pointing to the target (element). Makes it fast and cheap.
var l = _stateProps.length,
style = element.style,
state = [],
i = 0;
for (; i < l; i++) {
state.push(_stateProps[i], style[_stateProps[i]]);
}
state.t = element;
return state;
},
_copyState = function _copyState(state, override, omitOffsets) {
var result = [],
l = state.length,
i = omitOffsets ? 8 : 0,
// skip top, left, right, bottom if omitOffsets is true
p;
for (; i < l; i += 2) {
p = state[i];
result.push(p, p in override ? override[p] : state[i + 1]);
}
result.t = state.t;
return result;
},
_winOffsets = {
left: 0,
top: 0
},
// // potential future feature (?) Allow users to calculate where a trigger hits (scroll position) like getScrollPosition("#id", "top bottom")
// _getScrollPosition = (trigger, position, {scroller, containerAnimation, horizontal}) => {
// scroller = _getTarget(scroller || _win);
// let direction = horizontal ? _horizontal : _vertical,
// isViewport = _isViewport(scroller);
// _getSizeFunc(scroller, isViewport, direction);
// return _parsePosition(position, _getTarget(trigger), _getSizeFunc(scroller, isViewport, direction)(), direction, _getScrollFunc(scroller, direction)(), 0, 0, 0, _getOffsetsFunc(scroller, isViewport)(), isViewport ? 0 : parseFloat(_getComputedStyle(scroller)["border" + direction.p2 + _Width]) || 0, 0, containerAnimation ? containerAnimation.duration() : _maxScroll(scroller), containerAnimation);
// },
_parsePosition = function _parsePosition(value, trigger, scrollerSize, direction, scroll, marker, markerScroller, self, scrollerBounds, borderWidth, useFixedPosition, scrollerMax, containerAnimation, clampZeroProp) {
_isFunction(value) && (value = value(self));
if (_isString(value) && value.substr(0, 3) === "max") {
value = scrollerMax + (value.charAt(4) === "=" ? _offsetToPx("0" + value.substr(3), scrollerSize) : 0);
}
var time = containerAnimation ? containerAnimation.time() : 0,
p1,
p2,
element;
containerAnimation && containerAnimation.seek(0);
isNaN(value) || (value = +value); // convert a string number like "45" to an actual number
if (!_isNumber(value)) {
_isFunction(trigger) && (trigger = trigger(self));
var offsets = (value || "0").split(" "),
bounds,
localOffset,
globalOffset,
display;
element = _getTarget(trigger, self) || _body;
bounds = _getBounds(element) || {};
if ((!bounds || !bounds.left && !bounds.top) && _getComputedStyle(element).display === "none") {
// if display is "none", it won't report getBoundingClientRect() properly
display = element.style.display;
element.style.display = "block";
bounds = _getBounds(element);
display ? element.style.display = display : element.style.removeProperty("display");
}
localOffset = _offsetToPx(offsets[0], bounds[direction.d]);
globalOffset = _offsetToPx(offsets[1] || "0", scrollerSize);
value = bounds[direction.p] - scrollerBounds[direction.p] - borderWidth + localOffset + scroll - globalOffset;
markerScroller && _positionMarker(markerScroller, globalOffset, direction, scrollerSize - globalOffset < 20 || markerScroller._isStart && globalOffset > 20);
scrollerSize -= scrollerSize - globalOffset; // adjust for the marker
} else {
containerAnimation && (value = gsap.utils.mapRange(containerAnimation.scrollTrigger.start, containerAnimation.scrollTrigger.end, 0, scrollerMax, value));
markerScroller && _positionMarker(markerScroller, scrollerSize, direction, true);
}
if (clampZeroProp) {
self[clampZeroProp] = value || -0.001;
value < 0 && (value = 0);
}
if (marker) {
var position = value + scrollerSize,
isStart = marker._isStart;
p1 = "scroll" + direction.d2;
_positionMarker(marker, position, direction, isStart && position > 20 || !isStart && (useFixedPosition ? Math.max(_body[p1], _docEl[p1]) : marker.parentNode[p1]) <= position + 1);
if (useFixedPosition) {
scrollerBounds = _getBounds(markerScroller);
useFixedPosition && (marker.style[direction.op.p] = scrollerBounds[direction.op.p] - direction.op.m - marker._offset + _px);
}
}
if (containerAnimation && element) {
p1 = _getBounds(element);
containerAnimation.seek(scrollerMax);
p2 = _getBounds(element);
containerAnimation._caScrollDist = p1[direction.p] - p2[direction.p];
value = value / containerAnimation._caScrollDist * scrollerMax;
}
containerAnimation && containerAnimation.seek(time);
return containerAnimation ? value : Math.round(value);
},
_prefixExp = /(webkit|moz|length|cssText|inset)/i,
_reparent = function _reparent(element, parent, top, left) {
if (element.parentNode !== parent) {
var style = element.style,
p,
cs;
if (parent === _body) {
element._stOrig = style.cssText; // record original inline styles so we can revert them later
cs = _getComputedStyle(element);
for (p in cs) {
// must copy all relevant styles to ensure that nothing changes visually when we reparent to the <body>. Skip the vendor prefixed ones.
if (!+p && !_prefixExp.test(p) && cs[p] && typeof style[p] === "string" && p !== "0") {
style[p] = cs[p];
}
}
style.top = top;
style.left = left;
} else {
style.cssText = element._stOrig;
}
gsap.core.getCache(element).uncache = 1;
parent.appendChild(element);
}
},
_interruptionTracker = function _interruptionTracker(getValueFunc, initialValue, onInterrupt) {
var last1 = initialValue,
last2 = last1;
return function (value) {
var current = Math.round(getValueFunc()); // round because in some [very uncommon] Windows environments, scroll can get reported with decimals even though it was set without.
if (current !== last1 && current !== last2 && Math.abs(current - last1) > 3 && Math.abs(current - last2) > 3) {
// if the user scrolls, kill the tween. iOS Safari intermittently misreports the scroll position, it may be the most recently-set one or the one before that! When Safari is zoomed (CMD-+), it often misreports as 1 pixel off too! So if we set the scroll position to 125, for example, it'll actually report it as 124.
value = current;
onInterrupt && onInterrupt();
}
last2 = last1;
last1 = Math.round(value);
return last1;
};
},
_shiftMarker = function _shiftMarker(marker, direction, value) {
var vars = {};
vars[direction.p] = "+=" + value;
gsap.set(marker, vars);
},
// _mergeAnimations = animations => {
// let tl = gsap.timeline({smoothChildTiming: true}).startTime(Math.min(...animations.map(a => a.globalTime(0))));
// animations.forEach(a => {let time = a.totalTime(); tl.add(a); a.totalTime(time); });
// tl.smoothChildTiming = false;
// return tl;
// },
// returns a function that can be used to tween the scroll position in the direction provided, and when doing so it'll add a .tween property to the FUNCTION itself, and remove it when the tween completes or gets killed. This gives us a way to have multiple ScrollTriggers use a central function for any given scroller and see if there's a scroll tween running (which would affect if/how things get updated)
_getTweenCreator = function _getTweenCreator(scroller, direction) {
var getScroll = _getScrollFunc(scroller, direction),
prop = "_scroll" + direction.p2,
// add a tweenable property to the scroller that's a getter/setter function, like _scrollTop or _scrollLeft. This way, if someone does gsap.killTweensOf(scroller) it'll kill the scroll tween.
getTween = function getTween(scrollTo, vars, initialValue, change1, change2) {
var tween = getTween.tween,
onComplete = vars.onComplete,
modifiers = {};
initialValue = initialValue || getScroll();
var checkForInterruption = _interruptionTracker(getScroll, initialValue, function () {
tween.kill();
getTween.tween = 0;
});
change2 = change1 && change2 || 0; // if change1 is 0, we set that to the difference and ignore change2. Otherwise, there would be a compound effect.
change1 = change1 || scrollTo - initialValue;
tween && tween.kill();
vars[prop] = scrollTo;
vars.inherit = false;
vars.modifiers = modifiers;
modifiers[prop] = function () {
return checkForInterruption(initialValue + change1 * tween.ratio + change2 * tween.ratio * tween.ratio);
};
vars.onUpdate = function () {
_scrollers.cache++;
getTween.tween && _updateAll(); // if it was interrupted/killed, like in a context.revert(), don't force an updateAll()
};
vars.onComplete = function () {
getTween.tween = 0;
onComplete && onComplete.call(tween);
};
tween = getTween.tween = gsap.to(scroller, vars);
return tween;
};
scroller[prop] = getScroll;
getScroll.wheelHandler = function () {
return getTween.tween && getTween.tween.kill() && (getTween.tween = 0);
};
_addListener(scroller, "wheel", getScroll.wheelHandler); // Windows machines handle mousewheel scrolling in chunks (like "3 lines per scroll") meaning the typical strategy for cancelling the scroll isn't as sensitive. It's much more likely to match one of the previous 2 scroll event positions. So we kill any snapping as soon as there's a wheel event.
ScrollTrigger.isTouch && _addListener(scroller, "touchmove", getScroll.wheelHandler);
return getTween;
};
export var ScrollTrigger = /*#__PURE__*/function () {
function ScrollTrigger(vars, animation) {
_coreInitted || ScrollTrigger.register(gsap) || console.warn("Please gsap.registerPlugin(ScrollTrigger)");
_context(this);
this.init(vars, animation);
}
var _proto = ScrollTrigger.prototype;
_proto.init = function init(vars, animation) {
this.progress = this.start = 0;
this.vars && this.kill(true, true); // in case it's being initted again
if (!_enabled) {
this.update = this.refresh = this.kill = _passThrough;
return;
}
vars = _setDefaults(_isString(vars) || _isNumber(vars) || vars.nodeType ? {
trigger: vars
} : vars, _defaults);
var _vars = vars,
onUpdate = _vars.onUpdate,
toggleClass = _vars.toggleClass,
id = _vars.id,
onToggle = _vars.onToggle,
onRefresh = _vars.onRefresh,
scrub = _vars.scrub,
trigger = _vars.trigger,
pin = _vars.pin,
pinSpacing = _vars.pinSpacing,
invalidateOnRefresh = _vars.invalidateOnRefresh,
anticipatePin = _vars.anticipatePin,
onScrubComplete = _vars.onScrubComplete,
onSnapComplete = _vars.onSnapComplete,
once = _vars.once,
snap = _vars.snap,
pinReparent = _vars.pinReparent,
pinSpacer = _vars.pinSpacer,
containerAnimation = _vars.containerAnimation,
fastScrollEnd = _vars.fastScrollEnd,
preventOverlaps = _vars.preventOverlaps,
direction = vars.horizontal || vars.containerAnimation && vars.horizontal !== false ? _horizontal : _vertical,
isToggle = !scrub && scrub !== 0,
scroller = _getTarget(vars.scroller || _win),
scrollerCache = gsap.core.getCache(scroller),
isViewport = _isViewport(scroller),
useFixedPosition = ("pinType" in vars ? vars.pinType : _getProxyProp(scroller, "pinType") || isViewport && "fixed") === "fixed",
callbacks = [vars.onEnter, vars.onLeave, vars.onEnterBack, vars.onLeaveBack],
toggleActions = isToggle && vars.toggleActions.split(" "),
markers = "markers" in vars ? vars.markers : _defaults.markers,
borderWidth = isViewport ? 0 : parseFloat(_getComputedStyle(scroller)["border" + direction.p2 + _Width]) || 0,
self = this,
onRefreshInit = vars.onRefreshInit && function () {
return vars.onRefreshInit(self);
},
getScrollerSize = _getSizeFunc(scroller, isViewport, direction),
getScrollerOffsets = _getOffsetsFunc(scroller, isViewport),
lastSnap = 0,
lastRefresh = 0,
prevProgress = 0,
scrollFunc = _getScrollFunc(scroller, direction),
tweenTo,
pinCache,
snapFunc,
scroll1,
scroll2,
start,
end,
markerStart,
markerEnd,
markerStartTrigger,
markerEndTrigger,
markerVars,
executingOnRefresh,
change,
pinOriginalState,
pinActiveState,
pinState,
spacer,
offset,
pinGetter,
pinSetter,
pinStart,
pinChange,
spacingStart,
spacerState,
markerStartSetter,
pinMoves,
markerEndSetter,
cs,
snap1,
snap2,
scrubTween,
scrubSmooth,
snapDurClamp,
snapDelayedCall,
prevScroll,
prevAnimProgress,
caMarkerSetter,
customRevertReturn; // for the sake of efficiency, _startClamp/_endClamp serve like a truthy value indicating that clamping was enabled on the start/end, and ALSO store the actual pre-clamped numeric value. We tap into that in ScrollSmoother for speed effects. So for example, if start="clamp(top bottom)" results in a start of -100 naturally, it would get clamped to 0 but -100 would be stored in _startClamp.
self._startClamp = self._endClamp = false;
self._dir = direction;
anticipatePin *= 45;
self.scroller = scroller;
self.scroll = containerAnimation ? containerAnimation.time.bind(containerAnimation) : scrollFunc;
scroll1 = scrollFunc();
self.vars = vars;
animation = animation || vars.animation;
if ("refreshPriority" in vars) {
_sort = 1;
vars.refreshPriority === -9999 && (_primary = self); // used by ScrollSmoother
}
scrollerCache.tweenScroll = scrollerCache.tweenScroll || {
top: _getTweenCreator(scroller, _vertical),
left: _getTweenCreator(scroller, _horizontal)
};
self.tweenTo = tweenTo = scrollerCache.tweenScroll[direction.p];
self.scrubDuration = function (value) {
scrubSmooth = _isNumber(value) && value;
if (!scrubSmooth) {
scrubTween && scrubTween.progress(1).kill();
scrubTween = 0;
} else {
scrubTween ? scrubTween.duration(value) : scrubTween = gsap.to(animation, {
ease: "expo",
totalProgress: "+=0",
inherit: false,
duration: scrubSmooth,
paused: true,
onComplete: function onComplete() {
return onScrubComplete && onScrubComplete(self);
}
});
}
};
if (animation) {
animation.vars.lazy = false;
animation._initted && !self.isReverted || animation.vars.immediateRender !== false && vars.immediateRender !== false && animation.duration() && animation.render(0, true, true); // special case: if this ScrollTrigger gets re-initted, a from() tween with a stagger could get initted initially and then reverted on the re-init which means it'll need to get rendered again here to properly display things. Otherwise, See https://gsap.com/forums/topic/36777-scrollsmoother-splittext-nextjs/ and https://codepen.io/GreenSock/pen/eYPyPpd?editors=0010
self.animation = animation.pause();
animation.scrollTrigger = self;
self.scrubDuration(scrub);
snap1 = 0;
id || (id = animation.vars.id);
}
if (snap) {
// TODO: potential idea: use legitimate CSS scroll snapping by pushing invisible elements into the DOM that serve as snap positions, and toggle the document.scrollingElement.style.scrollSnapType onToggle. See https://codepen.io/GreenSock/pen/JjLrgWM for a quick proof of concept.
if (!_isObject(snap) || snap.push) {
snap = {
snapTo: snap
};
}
"scrollBehavior" in _body.style && gsap.set(isViewport ? [_body, _docEl] : scroller, {
scrollBehavior: "auto"
}); // smooth scrolling doesn't work with snap.
_scrollers.forEach(function (o) {
return _isFunction(o) && o.target === (isViewport ? _doc.scrollingElement || _docEl : scroller) && (o.smooth = false);
}); // note: set smooth to false on both the vertical and horizontal scroll getters/setters
snapFunc = _isFunction(snap.snapTo) ? snap.snapTo : snap.snapTo === "labels" ? _getClosestLabel(animation) : snap.snapTo === "labelsDirectional" ? _getLabelAtDirection(animation) : snap.directional !== false ? function (value, st) {
return _snapDirectional(snap.snapTo)(value, _getTime() - lastRefresh < 500 ? 0 : st.direction);
} : gsap.utils.snap(snap.snapTo);
snapDurClamp = snap.duration || {
min: 0.1,
max: 2
};
snapDurClamp = _isObject(snapDurClamp) ? _clamp(snapDurClamp.min, snapDurClamp.max) : _clamp(snapDurClamp, snapDurClamp);
snapDelayedCall = gsap.delayedCall(snap.delay || scrubSmooth / 2 || 0.1, function () {
var scroll = scrollFunc(),
refreshedRecently = _getTime() - lastRefresh < 500,
tween = tweenTo.tween;
if ((refreshedRecently || Math.abs(self.getVelocity()) < 10) && !tween && !_pointerIsDown && lastSnap !== scroll) {
var progress = (scroll - start) / change,
totalProgress = animation && !isToggle ? animation.totalProgress() : progress,
velocity = refreshedRecently ? 0 : (totalProgress - snap2) / (_getTime() - _time2) * 1000 || 0,
change1 = gsap.utils.clamp(-progress, 1 - progress, _abs(velocity / 2) * velocity / 0.185),
naturalEnd = progress + (snap.inertia === false ? 0 : change1),
endValue,
endScroll,
_snap = snap,
onStart = _snap.onStart,
_onInterrupt = _snap.onInterrupt,
_onComplete = _snap.onComplete;
endValue = snapFunc(naturalEnd, self);
_isNumber(endValue) || (endValue = naturalEnd); // in case the function didn't return a number, fall back to using the naturalEnd
endScroll = Math.max(0, Math.round(start + endValue * change));
if (scroll <= end && scroll >= start && endScroll !== scroll) {
if (tween && !tween._initted && tween.data <= _abs(endScroll - scroll)) {
// there's an overlapping snap! So we must figure out which one is closer and let that tween live.
return;
}
if (snap.inertia === false) {
change1 = endValue - progress;
}
tweenTo(endScroll, {
duration: snapDurClamp(_abs(Math.max(_abs(naturalEnd - totalProgress), _abs(endValue - totalProgress)) * 0.185 / velocity / 0.05 || 0)),
ease: snap.ease || "power3",
data: _abs(endScroll - scroll),
// record the distance so that if another snap tween occurs (conflict) we can prioritize the closest snap.
onInterrupt: function onInterrupt() {
return snapDelayedCall.restart(true) && _onInterrupt && _onInterrupt(self);
},
onComplete: function onComplete() {
self.update();
lastSnap = scrollFunc();
if (animation && !isToggle) {
// the resolution of the scrollbar is limited, so we should correct the scrubbed animation's playhead at the end to match EXACTLY where it was supposed to snap
scrubTween ? scrubTween.resetTo("totalProgress", endValue, animation._tTime / animation._tDur) : animation.progress(endValue);
}
snap1 = snap2 = animation && !isToggle ? animation.totalProgress() : self.progress;
onSnapComplete && onSnapComplete(self);
_onComplete && _onComplete(self);
}
}, scroll, change1 * change, endScroll - scroll - change1 * change);
onStart && onStart(self, tweenTo.tween);
}
} else if (self.isActive && lastSnap !== scroll) {
snapDelayedCall.restart(true);
}
}).pause();
}
id && (_ids[id] = self);
trigger = self.trigger = _getTarget(trigger || pin !== true && pin); // if a trigger has some kind of scroll-related effect applied that could contaminate the "y" or "x" position (like a ScrollSmoother effect), we needed a way to temporarily revert it, so we use the stRevert property of the gsCache. It can return another function that we'll call at the end so it can return to its normal state.
customRevertReturn = trigger && trigger._gsap && trigger._gsap.stRevert;
customRevertReturn && (customRevertReturn = customRevertReturn(self));
pin = pin === true ? trigger : _getTarget(pin);
_isString(toggleClass) && (toggleClass = {
targets: trigger,
className: toggleClass
});
if (pin) {
pinSpacing === false || pinSpacing === _margin || (pinSpacing = !pinSpacing && pin.parentNode && pin.parentNode.style && _getComputedStyle(pin.parentNode).display === "flex" ? false : _padding); // if the parent is display: flex, don't apply pinSpacing by default. We should check that pin.parentNode is an element (not shadow dom window)
self.pin = pin;
pinCache = gsap.core.getCache(pin);
if (!pinCache.spacer) {
// record the spacer and pinOriginalState on the cache in case someone tries pinning the same element with MULTIPLE ScrollTriggers - we don't want to have multiple spacers or record the "original" pin state after it has already been affected by another ScrollTrigger.
if (pinSpacer) {
pinSpacer = _getTarget(pinSpacer);
pinSpacer && !pinSpacer.nodeType && (pinSpacer = pinSpacer.current || pinSpacer.nativeElement); // for React & Angular
pinCache.spacerIsNative = !!pinSpacer;
pinSpacer && (pinCache.spacerState = _getState(pinSpacer));
}
pinCache.spacer = spacer = pinSpacer || _doc.createElement("div");
spacer.classList.add("pin-spacer");
id && spacer.classList.add("pin-spacer-" + id);
pinCache.pinState = pinOriginalState = _getState(pin);
} else {
pinOriginalState = pinCache.pinState;
}
vars.force3D !== false && gsap.set(pin, {
force3D: true
});
self.spacer = spacer = pinCache.spacer;
cs = _getComputedStyle(pin);
spacingStart = cs[pinSpacing + direction.os2];
pinGetter = gsap.getProperty(pin);
pinSetter = gsap.quickSetter(pin, direction.a, _px); // pin.firstChild && !_maxScroll(pin, direction) && (pin.style.overflow = "hidden"); // protects from collapsing margins, but can have unintended consequences as demonstrated here: https://codepen.io/GreenSock/pen/1e42c7a73bfa409d2cf1e184e7a4248d so it was removed in favor of just telling people to set up their CSS to avoid the collapsing margins (overflow: hidden | auto is just one option. Another is border-top: 1px solid transparent).
_swapPinIn(pin, spacer, cs);
pinState = _getState(pin);
}
if (markers) {
markerVars = _isObject(markers) ? _setDefaults(markers, _markerDefaults) : _markerDefaults;
markerStartTrigger = _createMarker("scroller-start", id, scroller, direction, markerVars, 0);
markerEndTrigger = _createMarker("scroller-end", id, scroller, direction, markerVars, 0, markerStartTrigger);
offset = markerStartTrigger["offset" + direction.op.d2];
var content = _getTarget(_getProxyProp(scroller, "content") || scroller);
markerStart = this.markerStart = _createMarker("start", id, content, direction, markerVars, offset, 0, containerAnimation);
markerEnd = this.markerEnd = _createMarker("end", id, content, direction, markerVars, offset, 0, containerAnimation);
containerAnimation && (caMarkerSetter = gsap.quickSetter([markerStart, markerEnd], direction.a, _px));
if (!useFixedPosition && !(_proxies.length && _getProxyProp(scroller, "fixedMarkers") === true)) {
_makePositionable(isViewport ? _body : scroller);
gsap.set([markerStartTrigger, markerEndTrigger], {
force3D: true
});
markerStartSetter = gsap.quickSetter(markerStartTrigger, direction.a, _px);
markerEndSetter = gsap.quickSetter(markerEndTrigger, direction.a, _px);
}
}
if (containerAnimation) {
var oldOnUpdate = containerAnimation.vars.onUpdate,
oldParams = containerAnimation.vars.onUpdateParams;
containerAnimation.eventCallback("onUpdate", function () {
self.update(0, 0, 1);
oldOnUpdate && oldOnUpdate.apply(containerAnimation, oldParams || []);
});
}
self.previous = function () {
return _triggers[_triggers.indexOf(self) - 1];
};
self.next = function () {
return _triggers[_triggers.indexOf(self) + 1];
};
self.revert = function (revert, temp) {
if (!temp) {
return self.kill(true);
} // for compatibility with gsap.context() and gsap.matchMedia() whic