UNPKG

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,507 lines (1,312 loc) 115 kB
(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : typeof define === 'function' && define.amd ? define(['exports'], factory) : (global = global || self, factory(global.window = global.window || {})); }(this, (function (exports) { 'use strict'; function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } /*! * Observer 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 */ var gsap, _coreInitted, _clamp, _win, _doc, _docEl, _body, _isTouch, _pointerType, ScrollTrigger, _root, _normalizer, _eventTypes, _context, _getGSAP = function _getGSAP() { return gsap || typeof window !== "undefined" && (gsap = window.gsap) && gsap.registerPlugin && gsap; }, _startup = 1, _observers = [], _scrollers = [], _proxies = [], _getTime = Date.now, _bridge = function _bridge(name, value) { return value; }, _integrate = function _integrate() { var core = ScrollTrigger.core, data = core.bridge || {}, scrollers = core._scrollers, proxies = core._proxies; scrollers.push.apply(scrollers, _scrollers); proxies.push.apply(proxies, _proxies); _scrollers = scrollers; _proxies = proxies; _bridge = function _bridge(name, value) { return data[name](value); }; }, _getProxyProp = function _getProxyProp(element, property) { return ~_proxies.indexOf(element) && _proxies[_proxies.indexOf(element) + 1][property]; }, _isViewport = function _isViewport(el) { return !!~_root.indexOf(el); }, _addListener = function _addListener(element, type, func, passive, capture) { return element.addEventListener(type, func, { passive: passive !== false, capture: !!capture }); }, _removeListener = function _removeListener(element, type, func, capture) { return element.removeEventListener(type, func, !!capture); }, _scrollLeft = "scrollLeft", _scrollTop = "scrollTop", _onScroll = function _onScroll() { return _normalizer && _normalizer.isPressed || _scrollers.cache++; }, _scrollCacheFunc = function _scrollCacheFunc(f, doNotCache) { var cachingFunc = function cachingFunc(value) { if (value || value === 0) { _startup && (_win.history.scrollRestoration = "manual"); var isNormalizing = _normalizer && _normalizer.isPressed; value = cachingFunc.v = Math.round(value) || (_normalizer && _normalizer.iOS ? 1 : 0); f(value); cachingFunc.cacheID = _scrollers.cache; isNormalizing && _bridge("ss", value); } else if (doNotCache || _scrollers.cache !== cachingFunc.cacheID || _bridge("ref")) { cachingFunc.cacheID = _scrollers.cache; cachingFunc.v = f(); } return cachingFunc.v + cachingFunc.offset; }; cachingFunc.offset = 0; return f && cachingFunc; }, _horizontal = { s: _scrollLeft, p: "left", p2: "Left", os: "right", os2: "Right", d: "width", d2: "Width", a: "x", sc: _scrollCacheFunc(function (value) { return arguments.length ? _win.scrollTo(value, _vertical.sc()) : _win.pageXOffset || _doc[_scrollLeft] || _docEl[_scrollLeft] || _body[_scrollLeft] || 0; }) }, _vertical = { s: _scrollTop, p: "top", p2: "Top", os: "bottom", os2: "Bottom", d: "height", d2: "Height", a: "y", op: _horizontal, sc: _scrollCacheFunc(function (value) { return arguments.length ? _win.scrollTo(_horizontal.sc(), value) : _win.pageYOffset || _doc[_scrollTop] || _docEl[_scrollTop] || _body[_scrollTop] || 0; }) }, _getTarget = function _getTarget(t, self) { return (self && self._ctx && self._ctx.selector || gsap.utils.toArray)(t)[0] || (typeof t === "string" && gsap.config().nullTargetWarn !== false ? console.warn("Element not found:", t) : null); }, _isWithin = function _isWithin(element, list) { var i = list.length; while (i--) { if (list[i] === element || list[i].contains(element)) { return true; } } return false; }, _getScrollFunc = function _getScrollFunc(element, _ref) { var s = _ref.s, sc = _ref.sc; _isViewport(element) && (element = _doc.scrollingElement || _docEl); var i = _scrollers.indexOf(element), offset = sc === _vertical.sc ? 1 : 2; !~i && (i = _scrollers.push(element) - 1); _scrollers[i + offset] || _addListener(element, "scroll", _onScroll); var prev = _scrollers[i + offset], func = prev || (_scrollers[i + offset] = _scrollCacheFunc(_getProxyProp(element, s), true) || (_isViewport(element) ? sc : _scrollCacheFunc(function (value) { return arguments.length ? element[s] = value : element[s]; }))); func.target = element; prev || (func.smooth = gsap.getProperty(element, "scrollBehavior") === "smooth"); return func; }, _getVelocityProp = function _getVelocityProp(value, minTimeRefresh, useDelta) { var v1 = value, v2 = value, t1 = _getTime(), t2 = t1, min = minTimeRefresh || 50, dropToZeroTime = Math.max(500, min * 3), update = function update(value, force) { var t = _getTime(); if (force || t - t1 > min) { v2 = v1; v1 = value; t2 = t1; t1 = t; } else if (useDelta) { v1 += value; } else { v1 = v2 + (value - v2) / (t - t2) * (t1 - t2); } }, reset = function reset() { v2 = v1 = useDelta ? 0 : v1; t2 = t1 = 0; }, getVelocity = function getVelocity(latestValue) { var tOld = t2, vOld = v2, t = _getTime(); (latestValue || latestValue === 0) && latestValue !== v1 && update(latestValue); return t1 === t2 || t - t2 > dropToZeroTime ? 0 : (v1 + (useDelta ? vOld : -vOld)) / ((useDelta ? t : t1) - tOld) * 1000; }; return { update: update, reset: reset, getVelocity: getVelocity }; }, _getEvent = function _getEvent(e, preventDefault) { preventDefault && !e._gsapAllow && e.preventDefault(); return e.changedTouches ? e.changedTouches[0] : e; }, _getAbsoluteMax = function _getAbsoluteMax(a) { var max = Math.max.apply(Math, a), min = Math.min.apply(Math, a); return Math.abs(max) >= Math.abs(min) ? max : min; }, _setScrollTrigger = function _setScrollTrigger() { ScrollTrigger = gsap.core.globals().ScrollTrigger; ScrollTrigger && ScrollTrigger.core && _integrate(); }, _initCore = function _initCore(core) { gsap = core || _getGSAP(); if (!_coreInitted && gsap && typeof document !== "undefined" && document.body) { _win = window; _doc = document; _docEl = _doc.documentElement; _body = _doc.body; _root = [_win, _doc, _docEl, _body]; _clamp = gsap.utils.clamp; _context = gsap.core.context || function () {}; _pointerType = "onpointerenter" in _body ? "pointer" : "mouse"; _isTouch = Observer.isTouch = _win.matchMedia && _win.matchMedia("(hover: none), (pointer: coarse)").matches ? 1 : "ontouchstart" in _win || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0 ? 2 : 0; _eventTypes = Observer.eventTypes = ("ontouchstart" in _docEl ? "touchstart,touchmove,touchcancel,touchend" : !("onpointerdown" in _docEl) ? "mousedown,mousemove,mouseup,mouseup" : "pointerdown,pointermove,pointercancel,pointerup").split(","); setTimeout(function () { return _startup = 0; }, 500); _setScrollTrigger(); _coreInitted = 1; } return _coreInitted; }; _horizontal.op = _vertical; _scrollers.cache = 0; var Observer = function () { function Observer(vars) { this.init(vars); } var _proto = Observer.prototype; _proto.init = function init(vars) { _coreInitted || _initCore(gsap) || console.warn("Please gsap.registerPlugin(Observer)"); ScrollTrigger || _setScrollTrigger(); var tolerance = vars.tolerance, dragMinimum = vars.dragMinimum, type = vars.type, target = vars.target, lineHeight = vars.lineHeight, debounce = vars.debounce, preventDefault = vars.preventDefault, onStop = vars.onStop, onStopDelay = vars.onStopDelay, ignore = vars.ignore, wheelSpeed = vars.wheelSpeed, event = vars.event, onDragStart = vars.onDragStart, onDragEnd = vars.onDragEnd, onDrag = vars.onDrag, onPress = vars.onPress, onRelease = vars.onRelease, onRight = vars.onRight, onLeft = vars.onLeft, onUp = vars.onUp, onDown = vars.onDown, onChangeX = vars.onChangeX, onChangeY = vars.onChangeY, onChange = vars.onChange, onToggleX = vars.onToggleX, onToggleY = vars.onToggleY, onHover = vars.onHover, onHoverEnd = vars.onHoverEnd, onMove = vars.onMove, ignoreCheck = vars.ignoreCheck, isNormalizer = vars.isNormalizer, onGestureStart = vars.onGestureStart, onGestureEnd = vars.onGestureEnd, onWheel = vars.onWheel, onEnable = vars.onEnable, onDisable = vars.onDisable, onClick = vars.onClick, scrollSpeed = vars.scrollSpeed, capture = vars.capture, allowClicks = vars.allowClicks, lockAxis = vars.lockAxis, onLockAxis = vars.onLockAxis; this.target = target = _getTarget(target) || _docEl; this.vars = vars; ignore && (ignore = gsap.utils.toArray(ignore)); tolerance = tolerance || 1e-9; dragMinimum = dragMinimum || 0; wheelSpeed = wheelSpeed || 1; scrollSpeed = scrollSpeed || 1; type = type || "wheel,touch,pointer"; debounce = debounce !== false; lineHeight || (lineHeight = parseFloat(_win.getComputedStyle(_body).lineHeight) || 22); var id, onStopDelayedCall, dragged, moved, wheeled, locked, axis, self = this, prevDeltaX = 0, prevDeltaY = 0, passive = vars.passive || !preventDefault && vars.passive !== false, scrollFuncX = _getScrollFunc(target, _horizontal), scrollFuncY = _getScrollFunc(target, _vertical), scrollX = scrollFuncX(), scrollY = scrollFuncY(), limitToTouch = ~type.indexOf("touch") && !~type.indexOf("pointer") && _eventTypes[0] === "pointerdown", isViewport = _isViewport(target), ownerDoc = target.ownerDocument || _doc, deltaX = [0, 0, 0], deltaY = [0, 0, 0], onClickTime = 0, clickCapture = function clickCapture() { return onClickTime = _getTime(); }, _ignoreCheck = function _ignoreCheck(e, isPointerOrTouch) { return (self.event = e) && ignore && _isWithin(e.target, ignore) || isPointerOrTouch && limitToTouch && e.pointerType !== "touch" || ignoreCheck && ignoreCheck(e, isPointerOrTouch); }, onStopFunc = function onStopFunc() { self._vx.reset(); self._vy.reset(); onStopDelayedCall.pause(); onStop && onStop(self); }, update = function update() { var dx = self.deltaX = _getAbsoluteMax(deltaX), dy = self.deltaY = _getAbsoluteMax(deltaY), changedX = Math.abs(dx) >= tolerance, changedY = Math.abs(dy) >= tolerance; onChange && (changedX || changedY) && onChange(self, dx, dy, deltaX, deltaY); if (changedX) { onRight && self.deltaX > 0 && onRight(self); onLeft && self.deltaX < 0 && onLeft(self); onChangeX && onChangeX(self); onToggleX && self.deltaX < 0 !== prevDeltaX < 0 && onToggleX(self); prevDeltaX = self.deltaX; deltaX[0] = deltaX[1] = deltaX[2] = 0; } if (changedY) { onDown && self.deltaY > 0 && onDown(self); onUp && self.deltaY < 0 && onUp(self); onChangeY && onChangeY(self); onToggleY && self.deltaY < 0 !== prevDeltaY < 0 && onToggleY(self); prevDeltaY = self.deltaY; deltaY[0] = deltaY[1] = deltaY[2] = 0; } if (moved || dragged) { onMove && onMove(self); if (dragged) { onDragStart && dragged === 1 && onDragStart(self); onDrag && onDrag(self); dragged = 0; } moved = false; } locked && !(locked = false) && onLockAxis && onLockAxis(self); if (wheeled) { onWheel(self); wheeled = false; } id = 0; }, onDelta = function onDelta(x, y, index) { deltaX[index] += x; deltaY[index] += y; self._vx.update(x); self._vy.update(y); debounce ? id || (id = requestAnimationFrame(update)) : update(); }, onTouchOrPointerDelta = function onTouchOrPointerDelta(x, y) { if (lockAxis && !axis) { self.axis = axis = Math.abs(x) > Math.abs(y) ? "x" : "y"; locked = true; } if (axis !== "y") { deltaX[2] += x; self._vx.update(x, true); } if (axis !== "x") { deltaY[2] += y; self._vy.update(y, true); } debounce ? id || (id = requestAnimationFrame(update)) : update(); }, _onDrag = function _onDrag(e) { if (_ignoreCheck(e, 1)) { return; } e = _getEvent(e, preventDefault); var x = e.clientX, y = e.clientY, dx = x - self.x, dy = y - self.y, isDragging = self.isDragging; self.x = x; self.y = y; if (isDragging || (dx || dy) && (Math.abs(self.startX - x) >= dragMinimum || Math.abs(self.startY - y) >= dragMinimum)) { dragged = isDragging ? 2 : 1; isDragging || (self.isDragging = true); onTouchOrPointerDelta(dx, dy); } }, _onPress = self.onPress = function (e) { if (_ignoreCheck(e, 1) || e && e.button) { return; } self.axis = axis = null; onStopDelayedCall.pause(); self.isPressed = true; e = _getEvent(e); prevDeltaX = prevDeltaY = 0; self.startX = self.x = e.clientX; self.startY = self.y = e.clientY; self._vx.reset(); self._vy.reset(); _addListener(isNormalizer ? target : ownerDoc, _eventTypes[1], _onDrag, passive, true); self.deltaX = self.deltaY = 0; onPress && onPress(self); }, _onRelease = self.onRelease = function (e) { if (_ignoreCheck(e, 1)) { return; } _removeListener(isNormalizer ? target : ownerDoc, _eventTypes[1], _onDrag, true); var isTrackingDrag = !isNaN(self.y - self.startY), wasDragging = self.isDragging, isDragNotClick = wasDragging && (Math.abs(self.x - self.startX) > 3 || Math.abs(self.y - self.startY) > 3), eventData = _getEvent(e); if (!isDragNotClick && isTrackingDrag) { self._vx.reset(); self._vy.reset(); if (preventDefault && allowClicks) { gsap.delayedCall(0.08, function () { if (_getTime() - onClickTime > 300 && !e.defaultPrevented) { if (e.target.click) { e.target.click(); } else if (ownerDoc.createEvent) { var syntheticEvent = ownerDoc.createEvent("MouseEvents"); syntheticEvent.initMouseEvent("click", true, true, _win, 1, eventData.screenX, eventData.screenY, eventData.clientX, eventData.clientY, false, false, false, false, 0, null); e.target.dispatchEvent(syntheticEvent); } } }); } } self.isDragging = self.isGesturing = self.isPressed = false; onStop && wasDragging && !isNormalizer && onStopDelayedCall.restart(true); dragged && update(); onDragEnd && wasDragging && onDragEnd(self); onRelease && onRelease(self, isDragNotClick); }, _onGestureStart = function _onGestureStart(e) { return e.touches && e.touches.length > 1 && (self.isGesturing = true) && onGestureStart(e, self.isDragging); }, _onGestureEnd = function _onGestureEnd() { return (self.isGesturing = false) || onGestureEnd(self); }, onScroll = function onScroll(e) { if (_ignoreCheck(e)) { return; } var x = scrollFuncX(), y = scrollFuncY(); onDelta((x - scrollX) * scrollSpeed, (y - scrollY) * scrollSpeed, 1); scrollX = x; scrollY = y; onStop && onStopDelayedCall.restart(true); }, _onWheel = function _onWheel(e) { if (_ignoreCheck(e)) { return; } e = _getEvent(e, preventDefault); onWheel && (wheeled = true); var multiplier = (e.deltaMode === 1 ? lineHeight : e.deltaMode === 2 ? _win.innerHeight : 1) * wheelSpeed; onDelta(e.deltaX * multiplier, e.deltaY * multiplier, 0); onStop && !isNormalizer && onStopDelayedCall.restart(true); }, _onMove = function _onMove(e) { if (_ignoreCheck(e)) { return; } var x = e.clientX, y = e.clientY, dx = x - self.x, dy = y - self.y; self.x = x; self.y = y; moved = true; onStop && onStopDelayedCall.restart(true); (dx || dy) && onTouchOrPointerDelta(dx, dy); }, _onHover = function _onHover(e) { self.event = e; onHover(self); }, _onHoverEnd = function _onHoverEnd(e) { self.event = e; onHoverEnd(self); }, _onClick = function _onClick(e) { return _ignoreCheck(e) || _getEvent(e, preventDefault) && onClick(self); }; onStopDelayedCall = self._dc = gsap.delayedCall(onStopDelay || 0.25, onStopFunc).pause(); self.deltaX = self.deltaY = 0; self._vx = _getVelocityProp(0, 50, true); self._vy = _getVelocityProp(0, 50, true); self.scrollX = scrollFuncX; self.scrollY = scrollFuncY; self.isDragging = self.isGesturing = self.isPressed = false; _context(this); self.enable = function (e) { if (!self.isEnabled) { _addListener(isViewport ? ownerDoc : target, "scroll", _onScroll); type.indexOf("scroll") >= 0 && _addListener(isViewport ? ownerDoc : target, "scroll", onScroll, passive, capture); type.indexOf("wheel") >= 0 && _addListener(target, "wheel", _onWheel, passive, capture); if (type.indexOf("touch") >= 0 && _isTouch || type.indexOf("pointer") >= 0) { _addListener(target, _eventTypes[0], _onPress, passive, capture); _addListener(ownerDoc, _eventTypes[2], _onRelease); _addListener(ownerDoc, _eventTypes[3], _onRelease); allowClicks && _addListener(target, "click", clickCapture, true, true); onClick && _addListener(target, "click", _onClick); onGestureStart && _addListener(ownerDoc, "gesturestart", _onGestureStart); onGestureEnd && _addListener(ownerDoc, "gestureend", _onGestureEnd); onHover && _addListener(target, _pointerType + "enter", _onHover); onHoverEnd && _addListener(target, _pointerType + "leave", _onHoverEnd); onMove && _addListener(target, _pointerType + "move", _onMove); } self.isEnabled = true; self.isDragging = self.isGesturing = self.isPressed = moved = dragged = false; self._vx.reset(); self._vy.reset(); scrollX = scrollFuncX(); scrollY = scrollFuncY(); e && e.type && _onPress(e); onEnable && onEnable(self); } return self; }; self.disable = function () { if (self.isEnabled) { _observers.filter(function (o) { return o !== self && _isViewport(o.target); }).length || _removeListener(isViewport ? ownerDoc : target, "scroll", _onScroll); if (self.isPressed) { self._vx.reset(); self._vy.reset(); _removeListener(isNormalizer ? target : ownerDoc, _eventTypes[1], _onDrag, true); } _removeListener(isViewport ? ownerDoc : target, "scroll", onScroll, capture); _removeListener(target, "wheel", _onWheel, capture); _removeListener(target, _eventTypes[0], _onPress, capture); _removeListener(ownerDoc, _eventTypes[2], _onRelease); _removeListener(ownerDoc, _eventTypes[3], _onRelease); _removeListener(target, "click", clickCapture, true); _removeListener(target, "click", _onClick); _removeListener(ownerDoc, "gesturestart", _onGestureStart); _removeListener(ownerDoc, "gestureend", _onGestureEnd); _removeListener(target, _pointerType + "enter", _onHover); _removeListener(target, _pointerType + "leave", _onHoverEnd); _removeListener(target, _pointerType + "move", _onMove); self.isEnabled = self.isPressed = self.isDragging = false; onDisable && onDisable(self); } }; self.kill = self.revert = function () { self.disable(); var i = _observers.indexOf(self); i >= 0 && _observers.splice(i, 1); _normalizer === self && (_normalizer = 0); }; _observers.push(self); isNormalizer && _isViewport(target) && (_normalizer = self); self.enable(event); }; _createClass(Observer, [{ key: "velocityX", get: function get() { return this._vx.getVelocity(); } }, { key: "velocityY", get: function get() { return this._vy.getVelocity(); } }]); return Observer; }(); Observer.version = "3.13.0"; Observer.create = function (vars) { return new Observer(vars); }; Observer.register = _initCore; Observer.getAll = function () { return _observers.slice(); }; Observer.getById = function (id) { return _observers.filter(function (o) { return o.vars.id === id; })[0]; }; _getGSAP() && gsap.registerPlugin(Observer); /*! * 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 */ var gsap$1, _coreInitted$1, _win$1, _doc$1, _docEl$1, _body$1, _root$1, _resizeDelay, _toArray, _clamp$1, _time2, _syncInterval, _refreshing, _pointerIsDown, _transformProp, _i, _prevWidth, _prevHeight, _autoRefresh, _sort, _suppressOverwrites, _ignoreResize, _normalizer$1, _ignoreMobileResize, _baseScreenHeight, _baseScreenWidth, _fixIOSBug, _context$1, _scrollRestoration, _div100vh, _100vh, _isReverted, _clampingMax, _limitCallbacks, _startup$1 = 1, _getTime$1 = Date.now, _time1 = _getTime$1(), _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); }, _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$1 = function _getGSAP() { return gsap$1 || _windowExists() && (gsap$1 = window.gsap) && gsap$1.registerPlugin && gsap$1; }, _isViewport$1 = function _isViewport(e) { return !!~_root$1.indexOf(e); }, _getViewportDimension = function _getViewportDimension(dimensionProperty) { return (dimensionProperty === "Height" ? _100vh : _win$1["inner" + dimensionProperty]) || _docEl$1["client" + dimensionProperty] || _body$1["client" + dimensionProperty]; }, _getBoundsFunc = function _getBoundsFunc(element) { return _getProxyProp(element, "getBoundingClientRect") || (_isViewport$1(element) ? function () { _winOffsets.width = _win$1.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$1(element) ? (_docEl$1[s] || _body$1[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$1.getComputedStyle(element); }, _makePositionable = function _makePositionable(element) { 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$1.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$1.utils.snap(_getLabelRatioArray(animation), value); }; }, _snapDirectional = function _snapDirectional(snapIncrementOrArray) { var snap = gsap$1.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; 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$1 = function _addListener(element, type, func, nonPassive, capture) { return element.addEventListener(type, func, { passive: !nonPassive, capture: !!capture }); }, _removeListener$1 = 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$1.createElement("div"), useFixedPosition = _isViewport$1(container) || _getProxyProp(container, "pinType") === "fixed", isScroller = type.indexOf("scroller") !== -1, parent = useFixedPosition ? _body$1 : 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$1.set(marker, vars); }, _triggers = [], _ids = {}, _rafID, _sync = function _sync() { return _getTime$1() - _lastScrollTime > 34 && (_rafID || (_rafID = requestAnimationFrame(_updateAll))); }, _onScroll$1 = function _onScroll() { if (!_normalizer$1 || !_normalizer$1.isPressed || _normalizer$1.startX > _body$1.clientWidth) { _scrollers.cache++; if (_normalizer$1) { _rafID || (_rafID = requestAnimationFrame(_updateAll)); } else { _updateAll(); } _lastScrollTime || _dispatch("scrollStart"); _lastScrollTime = _getTime$1(); } }, _setBaseDimensions = function _setBaseDimensions() { _baseScreenWidth = _win$1.innerWidth; _baseScreenHeight = _win$1.innerHeight; }, _onResize = function _onResize(force) { _scrollers.cache++; (force === true || !_refreshing && !_ignoreResize && !_doc$1.fullscreenElement && !_doc$1.webkitFullscreenElement && (!_ignoreMobileResize || _baseScreenWidth !== _win$1.innerWidth || Math.abs(_win$1.innerHeight - _baseScreenHeight) > _win$1.innerHeight * 0.25)) && _resizeDelay.restart(true); }, _listeners = {}, _emptyArray = [], _softRefresh = function _softRefresh() { return _removeListener$1(ScrollTrigger$1, "scrollEnd", _softRefresh) || _refreshAll(true); }, _dispatch = function _dispatch(type) { return _listeners[type] && _listeners[type].map(function (f) { return f(); }) || _emptyArray; }, _savedStyles = [], _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) { _scrollers.cache++; (force || !_refreshingAll) && _scrollers.forEach(function (obj) { return _isFunction(obj) && obj.cacheID++ && (obj.rec = 0); }); _isString(scrollRestoration) && (_win$1.history.scrollRestoration = _scrollRestoration = scrollRestoration); }, _refreshingAll, _refreshID = 0, _queueRefreshID, _queueRefreshAll = function _queueRefreshAll() { if (_queueRefreshID !== _refreshID) { var id = _queueRefreshID = _refreshID; requestAnimationFrame(function () { return id === _refreshID && _refreshAll(true); }); } }, _refresh100vh = function _refresh100vh() { _body$1.appendChild(_div100vh); _100vh = !_normalizer$1 && _div100vh.offsetHeight || _win$1.innerHeight; _body$1.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$1 = _doc$1.documentElement; _body$1 = _doc$1.body; _root$1 = [_win$1, _doc$1, _docEl$1, _body$1]; if (_lastScrollTime && !force && !_isReverted) { _addListener$1(ScrollTrigger$1, "scrollEnd", _softRefresh); return; } _refresh100vh(); _refreshingAll = ScrollTrigger$1.isRefreshing = true; _scrollers.forEach(function (obj) { return _isFunction(obj) && ++obj.cacheID && (obj.rec = obj()); }); var refreshInits = _dispatch("refreshInit"); _sort && ScrollTrigger$1.sort(); skipRevert || _revertAll(); _scrollers.forEach(function (obj) { if (_isFunction(obj)) { obj.smooth && (obj.target.style.scrollBehavior = "auto"); obj(0); } }); _triggers.slice(0).forEach(function (t) { return t.refresh(); }); _isReverted = false; _triggers.forEach(function (t) { 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; _hideAllMarkers(true); _triggers.forEach(function (t) { 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); }); _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$1.isRefreshing = false; _dispatch("refresh"); }, _lastScroll = 0, _direction = 1, _primary, _updateAll = function _updateAll(force) { if (force === 2 || !_refreshingAll && !_isReverted) { ScrollTrigger$1.isUpdating = true; _primary && _primary.update(0); var l = _triggers.length, time = _getTime$1(), 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$1.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$1.core.getCache(state.t)).uncache = 1; 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) { 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, 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 }, _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); if (!_isNumber(value)) { _isFunction(trigger) && (trigger = trigger(self)); var offsets = (value || "0").split(" "), bounds, localOffset, globalOffset, display; element = _getTarget(trigger, self) || _body$1; bounds = _getBounds(element) || {}; if ((!bounds || !bounds.left && !bounds.top) && _getComputedStyle(element).display === "none") { 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; } else { containerAnimation && (value = gsap$1.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$1[p1], _docEl$1[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$1) { element._stOrig = style.cssText; cs = _getComputedStyle(element); for (p in cs) { 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$1.core.getCache(element).uncache = 1; parent.appendChild(element); } }, _interruptionTracker = function _interruptionTracker(getValueFunc, initialValue, onInterrupt) { var las