Codrops 원본
Recreating Palmer’s Draggable Product Grid with GSAP
섹션 · MIT
갤러리 안에서는 화면을 벗어나거나 움직임을 멈추면 예제도 닫힙니다. 다시 재생할 때는 처음부터 시작해요.
SOURCE FILES
원본 코드 읽기
수집한 원본 소스와 실행 안내를 함께 제공합니다.
css/base.css
@font-face {
font-family: 'TWK Lausanne';
src: url('../public/TWK-Lausanne.woff2') format('woff2');
}
*,
*::after,
*::before {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
font-size: 12px;
--color-text: #1a1a1a;
--color-bg: #fff;
--color-link: #1a1a1a;
--color-link-hover: #1a1a1a;
--page-padding: 1.5rem;
}
body {
margin: 0;
color: var(--color-text);
background-color: var(--color-bg);
font-family: ui-monospace, monospace;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html,
body {
max-width: 100vw;
overflow-x: hidden;
font-family: 'TWK Lausanne', sans-serif;
}
body {
margin: 0;
}
@media (scripting: enabled) {
.loading {
&::before,
&::after {
content: '';
position: fixed;
z-index: 10000;
}
&::before {
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--color-bg);
}
&::after {
top: 50%;
left: 50%;
width: 100px;
height: 1px;
margin: 0 0 0 -50px;
background: var(--color-link);
animation: loaderAnim 1.5s ease-in-out infinite alternate forwards;
}
}
}
@keyframes loaderAnim {
0% {
transform: scaleX(0);
transform-origin: 0% 50%;
}
50% {
transform: scaleX(1);
transform-origin: 0% 50%;
}
50.1% {
transform: scaleX(1);
transform-origin: 100% 50%;
}
100% {
transform: scaleX(0);
transform-origin: 100% 50%;
}
}
a {
text-decoration: none;
color: var(--color-link);
outline: none;
cursor: pointer;
&:hover {
text-decoration: underline;
color: var(--color-link-hover);
}
&:focus {
outline: none;
background: lightgrey;
&:not(:focus-visible) {
background: transparent;
}
&:focus-visible {
outline: 2px solid red;
background: transparent;
}
}
}
.frame {
display: grid;
z-index: 1000;
grid-row-gap: 1rem;
grid-column-gap: 2rem;
pointer-events: none;
justify-items: start;
align-content: start;
padding: var(--page-padding);
height: 100vh;
position: fixed;
top: 0;
left: 0;
width: 100%;
grid-template-columns: auto auto auto 1fr;
grid-template-rows: auto auto 1fr;
grid-template-areas:
'title title title title'
'back github archive ...'
'sponsor sponsor sponsor sponsor';
#cdawrap {
max-width: 260px;
align-self: end;
}
a,
button {
pointer-events: auto;
}
.frame__title {
grid-area: title;
font-size: inherit;
margin: 0;
}
.frame__back {
grid-area: back;
justify-self: start;
}
.frame__archive {
grid-area: archive;
justify-self: start;
}
.frame__github {
grid-area: github;
}
.frame__tags {
grid-area: tags;
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.frame__demos {
grid-area: demos;
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
}
.content {
padding: var(--page-padding);
display: flex;
flex-direction: column;
width: 100vw;
position: relative;
@media screen and (min-width: 53em) {
min-height: 100vh;
justify-content: center;
align-items: center;
}
}
css/style.css
.line,
.char {
transform: translate3d(0, 100%, 0);
}
.container {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
transform-origin: center center;
will-change: transform;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
z-index: 2;
pointer-events: none;
opacity: 0;
transition: opacity 0.45s ease-in-out;
}
}
.grid {
position: absolute;
width: max-content;
height: max-content;
display: flex;
gap: 5vw;
}
.--is-loaded {
overflow: hidden;
.grid {
transition: transform 0.45s cubic-bezier(0.33, 1, 0.68, 1);
cursor: grab;
}
}
.column {
display: flex;
flex-direction: column;
gap: 5vw;
}
.column:nth-child(even) {
margin-top: 10vw;
}
.product {
position: relative;
width: 18.5vw;
aspect-ratio: 1 / 1;
div {
width: 18.5vw;
aspect-ratio: 1 / 1;
}
img {
position: absolute;
width: 100%;
height: 100%;
object-fit: contain;
will-change: transform;
transition: transform 300ms ease-in-out;
}
:hover {
transform: scale(1.05);
}
}
.details {
position: fixed;
top: 0;
right: 0;
width: 50vw;
height: 100vh;
padding: 3vw 4vw;
background-color: #f1f1f1;
transform: translate3d(50vw, 0, 0);
z-index: 6;
@media (max-width: 600px) {
width: 90%;
height: 100vh;
padding: 8vw 7vw;
transform: translate3d(90%, 0, 0);
}
}
.details__title {
margin-bottom: 4vw;
position: relative;
display: grid;
@media (max-width: 600px) {
margin-bottom: 8vw;
}
p {
grid-area: 1 / -1;
overflow: hidden;
font-size: 3vw;
@media (max-width: 600px) {
font-size: 2rem;
}
}
}
.details__body {
display: flex;
flex-wrap: wrap;
align-items: end;
gap: 2vw;
}
.details__texts {
position: relative;
height: 100%;
line-height: 1.5;
display: grid;
max-width: 15rem;
span {
display: block;
font-size: 1.5rem;
margin-bottom: 1rem;
}
button {
appearance: none;
border: none;
display: block;
background-color: transparent;
margin-top: 1.5rem;
border: 1px solid;
border-radius: 1rem;
padding: 0.25rem 1rem;
@media (max-width: 600px) {
margin-top: 5vw;
}
}
[data-text] {
grid-area: 1 / -1;
/* position: absolute; */
bottom: 0;
left: 0;
}
}
.details__thumb {
position: relative;
width: 25vw;
aspect-ratio: 1 / 1;
z-index: 3;
will-change: transform;
@media (max-width: 600px) {
width: 100%;
}
div,
img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
}
p {
font-size: 0.85rem;
margin-bottom: 1vw;
}
.cross {
position: fixed;
width: 3vw;
height: 3vw;
transform: translate(-50%, -50%);
z-index: 5;
pointer-events: none;
transform: scale(0);
svg {
width: 3vw;
height: 3vw;
}
}
.--is-details-showing {
cursor: pointer;
.grid {
pointer-events: none;
}
/* &:before {
opacity: .35;
} */
}
.--is-showing {
opacity: 1;
}
함께 쓰는 파일 10개 보기
index.html
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Smooth, Draggable Product Grid | Codrops</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="https://tympanus.net/favicon/favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script>
document.documentElement.className = 'js';
</script>
<script src="//tympanus.net/codrops/adpacks/analytics.js"></script>
</head>
<body class="loading">
<main>
<header class="frame">
<h1 class="frame__title">
Smooth,
<a href="https://tympanus.net/codrops/demos/?tag=draggable">#draggable</a>
product grid with
<a href="https://tympanus.net/codrops/demos/?tag=gsap">#GSAP</a>
</h1>
<a class="frame__back" href="https://tympanus.net/codrops/?p=99444">Tutorial</a>
<a class="frame__archive" href="https://tympanus.net/codrops/demos/">All demos</a>
<a class="frame__github" href="https://github.com/joffreysp/draggable-grid">GitHub</a>
</header>
<div class="container">
<div class="grid">
<div class="column">
<div class="product">
<div data-id="3"><img src="./public/img-3.png" /></div>
</div>
<div class="product">
<div data-id="7"><img src="./public/img-7.png" /></div>
</div>
<div class="product">
<div data-id="1"><img src="./public/img-1.png" /></div>
</div>
<div class="product">
<div data-id="5"><img src="./public/img-5.png" /></div>
</div>
<div class="product">
<div data-id="2"><img src="./public/img-2.png" /></div>
</div>
</div>
<div class="column">
<div class="product">
<div data-id="4"><img src="./public/img-4.png" /></div>
</div>
<div class="product">
<div data-id="6"><img src="./public/img-6.png" /></div>
</div>
<div class="product">
<div data-id="3"><img src="./public/img-3.png" /></div>
</div>
<div class="product">
<div data-id="7"><img src="./public/img-7.png" /></div>
</div>
<div class="product">
<div data-id="1"><img src="./public/img-1.png" /></div>
</div>
</div>
<div class="column">
<div class="product">
<div data-id="5"><img src="./public/img-5.png" /></div>
</div>
<div class="product">
<div data-id="2"><img src="./public/img-2.png" /></div>
</div>
<div class="product">
<div data-id="4"><img src="./public/img-4.png" /></div>
</div>
<div class="product">
<div data-id="6"><img src="./public/img-6.png" /></div>
</div>
<div class="product">
<div data-id="1"><img src="./public/img-1.png" /></div>
</div>
</div>
<div class="column">
<div class="product">
<div data-id="3"><img src="./public/img-3.png" /></div>
</div>
<div class="product">
<div data-id="5"><img src="./public/img-5.png" /></div>
</div>
<div class="product">
<div data-id="1"><img src="./public/img-1.png" /></div>
</div>
<div class="product">
<div data-id="6"><img src="./public/img-6.png" /></div>
</div>
<div class="product">
<div data-id="2"><img src="./public/img-2.png" /></div>
</div>
</div>
<div class="column">
<div class="product">
<div data-id="4"><img src="./public/img-4.png" /></div>
</div>
<div class="product">
<div data-id="6"><img src="./public/img-6.png" /></div>
</div>
<div class="product">
<div data-id="3"><img src="./public/img-3.png" /></div>
</div>
<div class="product">
<div data-id="5"><img src="./public/img-5.png" /></div>
</div>
<div class="product">
<div data-id="1"><img src="./public/img-1.png" /></div>
</div>
</div>
<div class="column">
<div class="product">
<div data-id="5"><img src="./public/img-5.png" /></div>
</div>
<div class="product">
<div data-id="6"><img src="./public/img-6.png" /></div>
</div>
<div class="product">
<div data-id="2"><img src="./public/img-2.png" /></div>
</div>
<div class="product">
<div data-id="1"><img src="./public/img-1.png" /></div>
</div>
<div class="product">
<div data-id="4"><img src="./public/img-4.png" /></div>
</div>
</div>
<div class="column">
<div class="product">
<div data-id="3"><img src="./public/img-3.png" /></div>
</div>
<div class="product">
<div data-id="4"><img src="./public/img-4.png" /></div>
</div>
<div class="product">
<div data-id="1"><img src="./public/img-1.png" /></div>
</div>
<div class="product">
<div data-id="2"><img src="./public/img-2.png" /></div>
</div>
<div class="product">
<div data-id="6"><img src="./public/img-6.png" /></div>
</div>
</div>
<div class="column">
<div class="product">
<div data-id="5"><img src="./public/img-5.png" /></div>
</div>
<div class="product">
<div data-id="2"><img src="./public/img-2.png" /></div>
</div>
<div class="product">
<div data-id="4"><img src="./public/img-4.png" /></div>
</div>
<div class="product">
<div data-id="6"><img src="./public/img-6.png" /></div>
</div>
<div class="product">
<div data-id="1"><img src="./public/img-1.png" /></div>
</div>
</div>
<div class="column">
<div class="product">
<div data-id="3"><img src="./public/img-3.png" /></div>
</div>
<div class="product">
<div data-id="5"><img src="./public/img-5.png" /></div>
</div>
<div class="product">
<div data-id="1"><img src="./public/img-1.png" /></div>
</div>
<div class="product">
<div data-id="6"><img src="./public/img-6.png" /></div>
</div>
<div class="product">
<div data-id="2"><img src="./public/img-2.png" /></div>
</div>
</div>
<div class="column">
<div class="product">
<div data-id="4"><img src="./public/img-4.png" /></div>
</div>
<div class="product">
<div data-id="6"><img src="./public/img-6.png" /></div>
</div>
<div class="product">
<div data-id="3"><img src="./public/img-3.png" /></div>
</div>
<div class="product">
<div data-id="5"><img src="./public/img-5.png" /></div>
</div>
<div class="product">
<div data-id="1"><img src="./public/img-1.png" /></div>
</div>
</div>
</div>
</div>
<div class="details">
<div class="details__title">
<p data-title="1" data-text>Crimson Amphora</p>
<p data-title="2" data-text>Rustic Urn</p>
<p data-title="3" data-text>Golden Vessel</p>
<p data-title="4" data-text>Sunlit Amphora</p>
<p data-title="5" data-text>Midnight Reliquary</p>
<p data-title="6" data-text>Amber Ewer</p>
<p data-title="7" data-text>Sylvan Chalice</p>
</div>
<div class="details__body">
<div class="details__thumb"></div>
<div class="details__texts">
<p data-desc="1" data-text>
<span>$300,00</span>
This bold red vase stands out with its vibrant hue, a perfect centerpiece to add passion and energy to any
room. Its smooth surface and classic silhouette make it versatile, equally suited for modern interiors or
traditional spaces, bringing warmth and a touch of drama wherever it is placed.
<button>Add to cart</button>
</p>
<p data-desc="2" data-text>
<span>$220,00</span>
With its earthy tones and natural speckled finish, this rustic vase evokes the charm of handcrafted
pottery. Its organic look and timeless shape give a sense of authenticity, making it an ideal piece to
display dried flowers or simply as a decorative object that adds warmth and artisanal beauty to your home.
<button>Add to cart</button>
</p>
<p data-desc="3" data-text>
<span>$240,00</span>
Bright and cheerful, the yellow vase radiates positivity. Its glossy surface reflects light beautifully,
creating a lively focal point in any setting. Perfect for fresh blooms or displayed on its own, this vase
captures the essence of sunshine and joy, effortlessly transforming spaces with a vibrant, uplifting touch
of color.
<button>Add to cart</button>
</p>
<p data-desc="4" data-text>
<span>$300,00</span>
Generous in size and striking in presence, the large yellow vase makes a bold decorative statement. Its
smooth curves and sunny shade are perfect for standing on the floor or dressing up a wide console. Both
functional and eye-catching, it brings vitality and a contemporary edge to your interior design.
<button>Add to cart</button>
</p>
<p data-desc="5" data-text>
<span>$390,00</span>
Sleek and sophisticated, the black vase embodies timeless elegance. Its deep, rich tone makes it
versatile, pairing effortlessly with minimalist or luxurious décors. Whether holding fresh greenery or
standing alone as a sculptural accent, this piece exudes modern refinement and bold simplicity, creating
contrast and balance within any interior style.
<button>Add to cart</button>
</p>
<p data-desc="6" data-text>
<span>$340,00</span>
A playful mix of texture and color, the speckled yellow vase is both lively and unique. Its dotted surface
creates movement and character, while the bright golden base ensures it remains eye-catching. Perfect for
adding personality to your shelf or table, it combines artistic charm with a cheerful, inviting presence.
<button>Add to cart</button>
</p>
<p data-desc="7" data-text>
<span>$240,00</span>
Crafted from natural wood, this vase celebrates organic beauty and timeless simplicity. The warm tones and
smooth grain bring an earthy elegance to interiors. Perfect for dried arrangements or as a stand-alone
piece, it highlights craftsmanship and natural textures, making it a versatile addition to rustic, modern,
or eclectic décors.
<button>Add to cart</button>
</p>
</div>
</div>
</div>
<div class="cross">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 6L6 18" stroke="#313131" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M6 6L18 18" stroke="#313131" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<script src="./js/gsap.js"></script>
<script src="./js/Draggable.js"></script>
<script src="./js/Flip.js"></script>
<script src="./js/SplitText.js"></script>
<script src="./js/imagesloaded.pkgd.min.js"></script>
<script type="module" src="./js/app.js"></script>
<script src="https://tympanus.net/codrops/adpacks/cda_sponsor.js"></script>
</main>
</body>
</html>
js/Draggable.js
/*!
* Draggable 3.13.0
* https://gsap.com
*
* @license Copyright 2025, GreenSock. All rights reserved.
* Subject to the terms at https://gsap.com/standard-license.
* @author: Jack Doyle, jack@greensock.com
*/
!function (e, t) { "object" == typeof exports && "undefined" != typeof module ? t(exports) : "function" == typeof define && define.amd ? define(["exports"], t) : t((e = e || self).window = e.window || {}) }(this, function (e) { "use strict"; function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e } function w(e, t) { if (e.parentNode && (h || M(e))) { var n = P(e), o = n ? n.getAttribute("xmlns") || "http://www.w3.org/2000/svg" : "http://www.w3.org/1999/xhtml", r = n ? t ? "rect" : "g" : "div", i = 2 !== t ? 0 : 100, a = 3 === t ? 100 : 0, l = "position:absolute;display:block;pointer-events:none;margin:0;padding:0;", s = h.createElementNS ? h.createElementNS(o.replace(/^https/, "http"), r) : h.createElement(r); return t && (n ? (x = x || w(e), s.setAttribute("width", .01), s.setAttribute("height", .01), s.setAttribute("transform", "translate(" + i + "," + a + ")"), x.appendChild(s)) : (g || ((g = w(e)).style.cssText = l), s.style.cssText = l + "width:0.1px;height:0.1px;top:" + a + "px;left:" + i + "px", g.appendChild(s))), s } throw "Need document and parent." } function A(e, t, n, o, r, i, a) { return e.a = t, e.b = n, e.c = o, e.d = r, e.e = i, e.f = a, e } var h, f, i, a, g, x, m, v, y, t, b = "transform", T = b + "Origin", M = function _setDoc(e) { var t = e.ownerDocument || e; !(b in e.style) && "msTransform" in e.style && (T = (b = "msTransform") + "Origin"); for (; t.parentNode && (t = t.parentNode);); if (f = window, m = new ge, t) { i = (h = t).documentElement, a = t.body, (v = h.createElementNS("http://www.w3.org/2000/svg", "g")).style.transform = "none"; var n = t.createElement("div"), o = t.createElement("div"), r = t && (t.body || t.firstElementChild); r && r.appendChild && (r.appendChild(n), n.appendChild(o), n.setAttribute("style", "position:static;transform:translate3d(0,0,1px)"), y = o.offsetParent !== n, r.removeChild(n)) } return t }, E = function _forceNonZeroScale(e) { for (var t, n; e && e !== a;)(n = e._gsap) && n.uncache && n.get(e, "x"), n && !n.scaleX && !n.scaleY && n.renderTransform && (n.scaleX = n.scaleY = 1e-4, n.renderTransform(1, n), t ? t.push(n) : t = [n]), e = e.parentNode; return t }, D = [], S = [], L = function _getDocScrollTop() { return f.pageYOffset || h.scrollTop || i.scrollTop || a.scrollTop || 0 }, C = function _getDocScrollLeft() { return f.pageXOffset || h.scrollLeft || i.scrollLeft || a.scrollLeft || 0 }, P = function _svgOwner(e) { return e.ownerSVGElement || ("svg" === (e.tagName + "").toLowerCase() ? e : null) }, N = function _isFixed(e) { return "fixed" === f.getComputedStyle(e).position || ((e = e.parentNode) && 1 === e.nodeType ? _isFixed(e) : void 0) }, k = function _placeSiblings(e, t) { var n, o, r, i, a, l, s = P(e), c = e === s, d = s ? D : S, p = e.parentNode, u = p && !s && p.shadowRoot && p.shadowRoot.appendChild ? p.shadowRoot : p; if (e === f) return e; if (d.length || d.push(w(e, 1), w(e, 2), w(e, 3)), n = s ? x : g, s) c ? (i = -(r = function _getCTM(e) { var t, n = e.getCTM(); return n || (t = e.style[b], e.style[b] = "none", e.appendChild(v), n = v.getCTM(), e.removeChild(v), t ? e.style[b] = t : e.style.removeProperty(b.replace(/([A-Z])/g, "-$1").toLowerCase())), n || m.clone() }(e)).e / r.a, a = -r.f / r.d, o = m) : e.getBBox ? (r = e.getBBox(), i = (o = (o = e.transform ? e.transform.baseVal : {}).numberOfItems ? 1 < o.numberOfItems ? function _consolidate(e) { for (var t = new ge, n = 0; n < e.numberOfItems; n++)t.multiply(e.getItem(n).matrix); return t }(o) : o.getItem(0).matrix : m).a * r.x + o.c * r.y, a = o.b * r.x + o.d * r.y) : (o = new ge, i = a = 0), t && "g" === e.tagName.toLowerCase() && (i = a = 0), (c ? s : p).appendChild(n), n.setAttribute("transform", "matrix(" + o.a + "," + o.b + "," + o.c + "," + o.d + "," + (o.e + i) + "," + (o.f + a) + ")"); else { if (i = a = 0, y) for (o = e.offsetParent, r = e; (r = r && r.parentNode) && r !== o && r.parentNode;)4 < (f.getComputedStyle(r)[b] + "").length && (i = r.offsetLeft, a = r.offsetTop, r = 0); if ("absolute" !== (l = f.getComputedStyle(e)).position && "fixed" !== l.position) for (o = e.offsetParent; p && p !== o;)i += p.scrollLeft || 0, a += p.scrollTop || 0, p = p.parentNode; (r = n.style).top = e.offsetTop - a + "px", r.left = e.offsetLeft - i + "px", r[b] = l[b], r[T] = l[T], r.position = "fixed" === l.position ? "fixed" : "absolute", u.appendChild(n) } return n }, ge = ((t = Matrix2D.prototype).inverse = function inverse() { var e = this.a, t = this.b, n = this.c, o = this.d, r = this.e, i = this.f, a = e * o - t * n || 1e-10; return A(this, o / a, -t / a, -n / a, e / a, (n * i - o * r) / a, -(e * i - t * r) / a) }, t.multiply = function multiply(e) { var t = this.a, n = this.b, o = this.c, r = this.d, i = this.e, a = this.f, l = e.a, s = e.c, c = e.b, d = e.d, p = e.e, u = e.f; return A(this, l * t + c * o, l * n + c * r, s * t + d * o, s * n + d * r, i + p * t + u * o, a + p * n + u * r) }, t.clone = function clone() { return new Matrix2D(this.a, this.b, this.c, this.d, this.e, this.f) }, t.equals = function equals(e) { var t = this.a, n = this.b, o = this.c, r = this.d, i = this.e, a = this.f; return t === e.a && n === e.b && o === e.c && r === e.d && i === e.e && a === e.f }, t.apply = function apply(e, t) { void 0 === t && (t = {}); var n = e.x, o = e.y, r = this.a, i = this.b, a = this.c, l = this.d, s = this.e, c = this.f; return t.x = n * r + o * a + s || 0, t.y = n * i + o * l + c || 0, t }, Matrix2D); function Matrix2D(e, t, n, o, r, i) { void 0 === e && (e = 1), void 0 === t && (t = 0), void 0 === n && (n = 0), void 0 === o && (o = 1), void 0 === r && (r = 0), void 0 === i && (i = 0), A(this, e, t, n, o, r, i) } function getGlobalMatrix(e, t, n, o) { if (!e || !e.parentNode || (h || M(e)).documentElement === e) return new ge; var r = E(e), i = P(e) ? D : S, a = k(e, n), l = i[0].getBoundingClientRect(), s = i[1].getBoundingClientRect(), c = i[2].getBoundingClientRect(), d = a.parentNode, p = !o && N(e), u = new ge((s.left - l.left) / 100, (s.top - l.top) / 100, (c.left - l.left) / 100, (c.top - l.top) / 100, l.left + (p ? 0 : C()), l.top + (p ? 0 : L())); if (d.removeChild(a), r) for (l = r.length; l--;)(s = r[l]).scaleX = s.scaleY = 0, s.renderTransform(1, s); return t ? u.inverse() : u } function X() { return "undefined" != typeof window } function Y() { return xe || X() && (xe = window.gsap) && xe.registerPlugin && xe } function Z(e) { return "function" == typeof e } function $(e) { return "object" == typeof e } function _(e) { return void 0 === e } function aa() { return !1 } function da(e) { return Math.round(1e4 * e) / 1e4 } function fa(e, t) { var n = ve.createElementNS ? ve.createElementNS((t || "http://www.w3.org/1999/xhtml").replace(/^https/, "http"), e) : ve.createElement(e); return n.style ? n : ve.createElement(e) } function ra(e, t) { var n, o = {}; for (n in e) o[n] = t ? e[n] * t : e[n]; return o } function ta(e, t) { for (var n, o = e.length; o--;)t ? e[o].style.touchAction = t : e[o].style.removeProperty("touch-action"), (n = e[o].children) && n.length && ta(n, t) } function ua() { return Oe.forEach(function (e) { return e() }) } function wa() { return !Oe.length && xe.ticker.remove(ua) } function xa(e) { for (var t = Oe.length; t--;)Oe[t] === e && Oe.splice(t, 1); xe.to(wa, { overwrite: !0, delay: 15, duration: 0, onComplete: wa, data: "_draggable" }) } function za(e, t, n, o) { if (e.addEventListener) { var r = Ee[t]; o = o || (d ? { passive: !1 } : null), e.addEventListener(r || t, n, o), r && t !== r && e.addEventListener(t, n, o) } } function Aa(e, t, n, o) { if (e.removeEventListener) { var r = Ee[t]; e.removeEventListener(r || t, n, o), r && t !== r && e.removeEventListener(t, n, o) } } function Ba(e) { e.preventDefault && e.preventDefault(), e.preventManipulation && e.preventManipulation() } function Da(e) { De = e.touches && Pe < e.touches.length, Aa(e.target, "touchend", Da) } function Ea(e) { De = e.touches && Pe < e.touches.length, za(e.target, "touchend", Da) } function Fa(e) { return me.pageYOffset || e.scrollTop || e.documentElement.scrollTop || e.body.scrollTop || 0 } function Ga(e) { return me.pageXOffset || e.scrollLeft || e.documentElement.scrollLeft || e.body.scrollLeft || 0 } function Ha(e, t) { za(e, "scroll", t), Qe(e.parentNode) || Ha(e.parentNode, t) } function Ia(e, t) { Aa(e, "scroll", t), Qe(e.parentNode) || Ia(e.parentNode, t) } function Ka(e, t) { var n = "x" === t ? "Width" : "Height", o = "scroll" + n, r = "client" + n; return Math.max(0, Qe(e) ? Math.max(ye[o], l[o]) - (me["inner" + n] || ye[r] || l[r]) : e[o] - e[r]) } function La(e, t) { var n = Ka(e, "x"), o = Ka(e, "y"); Qe(e) ? e = We : La(e.parentNode, t), e._gsMaxScrollX = n, e._gsMaxScrollY = o, t || (e._gsScrollX = e.scrollLeft || 0, e._gsScrollY = e.scrollTop || 0) } function Ma(e, t, n) { var o = e.style; o && (_(o[t]) && (t = c(t, e) || t), null == n ? o.removeProperty && o.removeProperty(t.replace(/([A-Z])/g, "-$1").toLowerCase()) : o[t] = n) } function Na(e) { return me.getComputedStyle(e instanceof Element ? e : e.host || (e.parentNode || {}).host || e) } function Pa(e) { if (e === me) return p.left = p.top = 0, p.width = p.right = ye.clientWidth || e.innerWidth || l.clientWidth || 0, p.height = p.bottom = (e.innerHeight || 0) - 20 < ye.clientHeight ? ye.clientHeight : e.innerHeight || l.clientHeight || 0, p; var t = e.ownerDocument || ve, n = _(e.pageX) ? e.nodeType || _(e.left) || _(e.top) ? Te(e)[0].getBoundingClientRect() : e : { left: e.pageX - Ga(t), top: e.pageY - Fa(t), right: e.pageX - Ga(t) + 1, bottom: e.pageY - Fa(t) + 1 }; return _(n.right) && !_(n.width) ? (n.right = n.left + n.width, n.bottom = n.top + n.height) : _(n.width) && (n = { width: n.right - n.left, height: n.bottom - n.top, right: n.right, left: n.left, bottom: n.bottom, top: n.top }), n } function Qa(e, t, n) { var o, r = e.vars, i = r[n], a = e._listeners[t]; return Z(i) && (o = i.apply(r.callbackScope || e, r[n + "Params"] || [e.pointerEvent])), a && !1 === e.dispatchEvent(t) && (o = !1), o } function Ra(e, t) { var n, o, r, i = Te(e)[0]; return i.nodeType || i === me ? u(i, t) : _(e.left) ? { left: o = e.min || e.minX || e.minRotation || 0, top: n = e.min || e.minY || 0, width: (e.max || e.maxX || e.maxRotation || 0) - o, height: (e.max || e.maxY || 0) - n } : (r = { x: 0, y: 0 }, { left: e.left - r.x, top: e.top - r.y, width: e.width, height: e.height }) } function Ua(r, i, e, t, a, n) { var o, l, s, c = {}; if (i) if (1 !== a && i instanceof Array) { if (c.end = o = [], s = i.length, $(i[0])) for (l = 0; l < s; l++)o[l] = ra(i[l], a); else for (l = 0; l < s; l++)o[l] = i[l] * a; e += 1.1, t -= 1.1 } else Z(i) ? c.end = function (e) { var t, n, o = i.call(r, e); if (1 !== a) if ($(o)) { for (n in t = {}, o) t[n] = o[n] * a; o = t } else o *= a; return o } : c.end = i; return !e && 0 !== e || (c.max = e), !t && 0 !== t || (c.min = t), n && (c.velocity = 0), c } function Va(e) { var t; return !(!e || !e.getAttribute || e === l) && (!("true" !== (t = e.getAttribute("data-clickable")) && ("false" === t || !o.test(e.nodeName + "") && "true" !== e.getAttribute("contentEditable"))) || Va(e.parentNode)) } function Wa(e, t) { for (var n, o = e.length; o--;)(n = e[o]).ondragstart = n.onselectstart = t ? null : aa, xe.set(n, { lazy: !0, userSelect: t ? "text" : "none" }) } function $a(i, r) { i = xe.utils.toArray(i)[0], r = r || {}; var a, l, s, e, c, d, p = document.createElement("div"), u = p.style, t = i.firstChild, h = 0, f = 0, g = i.scrollTop, x = i.scrollLeft, m = i.scrollWidth, v = i.scrollHeight, y = 0, w = 0, b = 0; B && !1 !== r.force3D ? (c = "translate3d(", d = "px,0px)") : O && (c = "translate(", d = "px)"), this.scrollTop = function (e, t) { if (!arguments.length) return -this.top(); this.top(-e, t) }, this.scrollLeft = function (e, t) { if (!arguments.length) return -this.left(); this.left(-e, t) }, this.left = function (e, t) { if (!arguments.length) return -(i.scrollLeft + f); var n = i.scrollLeft - x, o = f; if ((2 < n || n < -2) && !t) return x = i.scrollLeft, xe.killTweensOf(this, { left: 1, scrollLeft: 1 }), this.left(-x), void (r.onKill && r.onKill()); (e = -e) < 0 ? (f = e - .5 | 0, e = 0) : w < e ? (f = e - w | 0, e = w) : f = 0, (f || o) && (this._skip || (u[O] = c + -f + "px," + -h + d), 0 <= f + y && (u.paddingRight = f + y + "px")), i.scrollLeft = 0 | e, x = i.scrollLeft }, this.top = function (e, t) { if (!arguments.length) return -(i.scrollTop + h); var n = i.scrollTop - g, o = h; if ((2 < n || n < -2) && !t) return g = i.scrollTop, xe.killTweensOf(this, { top: 1, scrollTop: 1 }), this.top(-g), void (r.onKill && r.onKill()); (e = -e) < 0 ? (h = e - .5 | 0, e = 0) : b < e ? (h = e - b | 0, e = b) : h = 0, (h || o) && (this._skip || (u[O] = c + -f + "px," + -h + d)), i.scrollTop = 0 | e, g = i.scrollTop }, this.maxScrollTop = function () { return b }, this.maxScrollLeft = function () { return w }, this.disable = function () { for (t = p.firstChild; t;)e = t.nextSibling, i.appendChild(t), t = e; i === p.parentNode && i.removeChild(p) }, this.enable = function () { if ((t = i.firstChild) !== p) { for (; t;)e = t.nextSibling, p.appendChild(t), t = e; i.appendChild(p), this.calibrate() } }, this.calibrate = function (e) { var t, n, o, r = i.clientWidth === a; g = i.scrollTop, x = i.scrollLeft, r && i.clientHeight === l && p.offsetHeight === s && m === i.scrollWidth && v === i.scrollHeight && !e || ((h || f) && (n = this.left(), o = this.top(), this.left(-i.scrollLeft), this.top(-i.scrollTop)), t = Na(i), r && !e || (u.display = "block", u.width = "auto", u.paddingRight = "0px", (y = Math.max(0, i.scrollWidth - i.clientWidth)) && (y += parseFloat(t.paddingLeft) + (R ? parseFloat(t.paddingRight) : 0))), u.display = "inline-block", u.position = "relative", u.overflow = "visible", u.verticalAlign = "top", u.boxSizing = "content-box", u.width = "100%", u.paddingRight = y + "px", R && (u.paddingBottom = t.paddingBottom), a = i.clientWidth, l = i.clientHeight, m = i.scrollWidth, v = i.scrollHeight, w = i.scrollWidth - a, b = i.scrollHeight - l, s = p.offsetHeight, u.display = "block", (n || o) && (this.left(n), this.top(o))) }, this.content = p, this.element = i, this._skip = !1, this.enable() } function _a(e) { if (X() && document.body) { var t = window && window.navigator; me = window, ve = document, ye = ve.documentElement, l = ve.body, s = fa("div"), Ae = !!window.PointerEvent, (we = fa("div")).style.cssText = "visibility:hidden;height:1px;top:-1px;pointer-events:none;position:relative;clear:both;cursor:grab", Xe = "grab" === we.style.cursor ? "grab" : "move", Se = t && -1 !== t.userAgent.toLowerCase().indexOf("android"), Me = "ontouchstart" in ye && "orientation" in me || t && (0 < t.MaxTouchPoints || 0 < t.msMaxTouchPoints), o = fa("div"), r = fa("div"), i = r.style, a = l, i.display = "inline-block", i.position = "relative", o.style.cssText = "width:90px;height:40px;padding:10px;overflow:auto;visibility:hidden", o.appendChild(r), a.appendChild(o), n = r.offsetHeight + 18 > o.scrollHeight, a.removeChild(o), R = n, Ee = function (e) { for (var t = e.split(","), n = (("onpointerdown" in s ? "pointerdown,pointermove,pointerup,pointercancel" : "onmspointerdown" in s ? "MSPointerDown,MSPointerMove,MSPointerUp,MSPointerCancel" : e).split(",")), o = {}, r = 4; -1 < --r;)o[t[r]] = n[r], o[n[r]] = t[r]; try { ye.addEventListener("test", null, Object.defineProperty({}, "passive", { get: function get() { d = 1 } })) } catch (e) { } return o }("touchstart,touchmove,touchend,touchcancel"), za(ve, "touchcancel", aa), za(me, "touchmove", aa), l && l.addEventListener("touchstart", aa), za(ve, "contextmenu", function () { for (var e in Ie) Ie[e].isPressed && Ie[e].endDrag() }), xe = be = Y() } var n, o, r, i, a; xe ? (_e = xe.plugins.inertia, Le = xe.core.context || function () { }, c = xe.utils.checkPrefix, O = c(O), Ye = c(Ye), Te = xe.utils.toArray, Ce = xe.core.getStyleSaver, B = !!c("perspective")) : e && console.warn("Please gsap.registerPlugin(Draggable)") } var xe, me, ve, ye, l, s, we, be, c, Te, d, Me, Ee, De, Se, _e, Xe, Ae, Le, Ce, B, R, n, Pe = 0, O = "transform", Ye = "transformOrigin", Ne = Array.isArray, ke = 180 / Math.PI, Be = 1e20, r = new ge, Re = Date.now || function () { return (new Date).getTime() }, Oe = [], Ie = {}, Fe = 0, o = /^(?:a|input|textarea|button|select)$/i, ze = 0, He = {}, We = {}, Qe = function _isRoot(e) { return !(e && e !== ye && 9 !== e.nodeType && e !== ve.body && e !== me && e.nodeType && e.parentNode) }, p = {}, Ge = {}, u = function _getElementBounds(e, t) { t = Te(t)[0]; var n, o, r, i, a, l, s, c, d, p, u, h, f, g = e.getBBox && e.ownerSVGElement, x = e.ownerDocument || ve; if (e === me) r = Fa(x), o = (n = Ga(x)) + (x.documentElement.clientWidth || e.innerWidth || x.body.clientWidth || 0), i = r + ((e.innerHeight || 0) - 20 < x.documentElement.clientHeight ? x.documentElement.clientHeight : e.innerHeight || x.body.clientHeight || 0); else { if (t === me || _(t)) return e.getBoundingClientRect(); n = r = 0, g ? (u = (p = e.getBBox()).width, h = p.height) : (e.viewBox && (p = e.viewBox.baseVal) && (n = p.x || 0, r = p.y || 0, u = p.width, h = p.height), u || (p = "border-box" === (f = Na(e)).boxSizing, u = (parseFloat(f.width) || e.clientWidth || 0) + (p ? 0 : parseFloat(f.borderLeftWidth) + parseFloat(f.borderRightWidth)), h = (parseFloat(f.height) || e.clientHeight || 0) + (p ? 0 : parseFloat(f.borderTopWidth) + parseFloat(f.borderBottomWidth)))), o = u, i = h } return e === t ? { left: n, top: r, width: o - n, height: i - r } : (l = (a = getGlobalMatrix(t, !0).multiply(getGlobalMatrix(e))).apply({ x: n, y: r }), s = a.apply({ x: o, y: r }), c = a.apply({ x: o, y: i }), d = a.apply({ x: n, y: i }), { left: n = Math.min(l.x, s.x, c.x, d.x), top: r = Math.min(l.y, s.y, c.y, d.y), width: Math.max(l.x, s.x, c.x, d.x) - n, height: Math.max(l.y, s.y, c.y, d.y) - r }) }, I = ((n = EventDispatcher.prototype).addEventListener = function addEventListener(e, t) { var n = this._listeners[e] || (this._listeners[e] = []); ~n.indexOf(t) || n.push(t) }, n.removeEventListener = function removeEventListener(e, t) { var n = this._listeners[e], o = n && n.indexOf(t); 0 <= o && n.splice(o, 1) }, n.dispatchEvent = function dispatchEvent(t) { var n, o = this; return (this._listeners[t] || []).forEach(function (e) { return !1 === e.call(o, { type: t, target: o.target }) && (n = !1) }), n }, EventDispatcher); function EventDispatcher(e) { this._listeners = {}, this.target = e || this } var Ve, F = (function _inheritsLoose(e, t) { e.prototype = Object.create(t.prototype), (e.prototype.constructor = e).__proto__ = t }(Draggable, Ve = I), Draggable.register = function register(e) { xe = e, _a() }, Draggable.create = function create(e, t) { return be || _a(!0), Te(e).map(function (e) { return new Draggable(e, t) }) }, Draggable.get = function get(e) { return Ie[(Te(e)[0] || {})._gsDragID] }, Draggable.timeSinceDrag = function timeSinceDrag() { return (Re() - ze) / 1e3 }, Draggable.hitTest = function hitTest(e, t, n) { if (e === t) return !1; var o, r, i, a = Pa(e), l = Pa(t), s = a.top, c = a.left, d = a.right, p = a.bottom, u = a.width, h = a.height, f = l.left > d || l.right < c || l.top > p || l.bottom < s; return f || !n ? !f : (i = -1 !== (n + "").indexOf("%"), n = parseFloat(n) || 0, (o = { left: Math.max(c, l.left), top: Math.max(s, l.top) }).width = Math.min(d, l.right) - o.left, o.height = Math.min(p, l.bottom) - o.top, !(o.width < 0 || o.height < 0) && (i ? u * h * (n *= .01) <= (r = o.width * o.height) || r >= l.width * l.height * n : o.width > n && o.height > n)) }, Draggable); function Draggable(h, p) { var e; e = Ve.call(this) || this, be || _a(1), h = Te(h)[0], e.styles = Ce && Ce(h, "transform,left,top"), _e = _e || xe.plugins.inertia, e.vars = p = ra(p || {}), e.target = h, e.x = e.y = e.rotation = 0, e.dragResistance = parseFloat(p.dragResistance) || 0, e.edgeResistance = isNaN(p.edgeResistance) ? 1 : parseFloat(p.edgeResistance) || 0, e.lockAxis = p.lockAxis, e.autoScroll = p.autoScroll || 0, e.lockedAxis = null, e.allowEventDefault = !!p.allowEventDefault, xe.getProperty(h, "x"); function Sg(e, t) { return parseFloat(se.get(h, e, t)) } function zh(e) { return Ba(e), e.stopImmediatePropagation && e.stopImmediatePropagation(), !1 } function Ah(e) { if (J.autoScroll && J.isDragging && (te || C)) { var t, n, o, r, i, a, l, s, c = h, d = 15 * J.autoScroll; for (te = !1, We.scrollTop = null != me.pageYOffset ? me.pageYOffset : null != de.documentElement.scrollTop ? de.documentElement.scrollTop : de.body.scrollTop, We.scrollLeft = null != me.pageXOffset ? me.pageXOffset : null != de.documentElement.scrollLeft ? de.documentElement.scrollLeft : de.body.scrollLeft, r = J.pointerX - We.scrollLeft, i = J.pointerY - We.scrollTop; c && !n;)t = (n = Qe(c.parentNode)) ? We : c.parentNode, o = n ? { bottom: Math.max(ye.clientHeight, me.innerHeight || 0), right: Math.max(ye.clientWidth, me.innerWidth || 0), left: 0, top: 0 } : t.getBoundingClientRect(), a = l = 0, U && ((s = t._gsMaxScrollY - t.scrollTop) < 0 ? l = s : i > o.bottom - re && s ? (te = !0, l = Math.min(s, d * (1 - Math.max(0, o.bottom - i) / re) | 0)) : i < o.top + ne && t.scrollTop && (te = !0, l = -Math.min(t.scrollTop, d * (1 - Math.max(0, i - o.top) / ne) | 0)), l && (t.scrollTop += l)), K && ((s = t._gsMaxScrollX - t.scrollLeft) < 0 ? a = s : r > o.right - oe && s ? (te = !0, a = Math.min(s, d * (1 - Math.max(0, o.right - r) / oe) | 0)) : r < o.left + ie && t.scrollLeft && (te = !0, a = -Math.min(t.scrollLeft, d * (1 - Math.max(0, r - o.left) / ie) | 0)), a && (t.scrollLeft += a)), n && (a || l) && (me.scrollTo(t.scrollLeft, t.scrollTop), he(J.pointerX + a, J.pointerY + l)), c = t } if (C) { var p = J.x, u = J.y; Q ? (J.deltaX = p - parseFloat(se.rotation), J.rotation = p, se.rotation = p + "deg", se.renderTransform(1, se)) : f ? (U && (J.deltaY = u - f.top(), f.top(u)), K && (J.deltaX = p - f.left(), f.left(p))) : W ? (U && (J.deltaY = u - parseFloat(se.y), se.y = u + "px"), K && (J.deltaX = p - parseFloat(se.x), se.x = p + "px"), se.renderTransform(1, se)) : (U && (J.deltaY = u - parseFloat(h.style.top || 0), h.style.top = u + "px"), K && (J.deltaX = p - parseFloat(h.style.left || 0), h.style.left = p + "px")), !g || e || I || (!(I = !0) === Qa(J, "drag", "onDrag") && (K && (J.x -= J.deltaX), U && (J.y -= J.deltaY), Ah(!0)), I = !1) } C = !1 } function Bh(e, t) { var n, o, r = J.x, i = J.y; h._gsap || (se = xe.core.getCache(h)), se.uncache && xe.getProperty(h, "x"), W ? (J.x = parseFloat(se.x), J.y = parseFloat(se.y)) : Q ? J.x = J.rotation = parseFloat(se.rotation) : f ? (J.y = f.top(), J.x = f.left()) : (J.y = parseFloat(h.style.top || (o = Na(h)) && o.top) || 0, J.x = parseFloat(h.style.left || (o || {}).left) || 0), (P || Y || N) && !t && (J.isDragging || J.isThrowing) && (N && (He.x = J.x, He.y = J.y, (n = N(He)).x !== J.x && (J.x = n.x, C = !0), n.y !== J.y && (J.y = n.y, C = !0)), P && (n = P(J.x)) !== J.x && (J.x = n, Q && (J.rotation = n), C = !0), Y && ((n = Y(J.y)) !== J.y && (J.y = n), C = !0)), C && Ah(!0), e || (J.deltaX = J.x - r, J.deltaY = J.y - i, Qa(J, "throwupdate", "onThrowUpdate")) } function Ch(a, l, s, n) { return null == l && (l = -Be), null == s && (s = Be), Z(a) ? function (e) { var t = J.isPressed ? 1 - J.edgeResistance : 1; return a.call(J, (s < e ? s + (e - s) * t : e < l ? l + (e - l) * t : e) * n) * n } : Ne(a) ? function (e) { for (var t, n, o = a.length, r = 0, i = Be; -1 < --o;)(n = (t = a[o]) - e) < 0 && (n = -n), n < i && l <= t && t <= s && (r = o, i = n); return a[r] } : isNaN(a) ? function (e) { return e } : function () { return a * n } } function Eh() { var e, t, n, o; E = !1, f ? (f.calibrate(), J.minX = S = -f.maxScrollLeft(), J.minY = A = -f.maxScrollTop(), J.maxX = D = J.maxY = X = 0, E = !0) : p.bounds && (e = Ra(p.bounds, h.parentNode), Q ? (J.minX = S = e.left, J.maxX = D = e.left + e.width, J.minY = A = J.maxY = X = 0) : _(p.bounds.maxX) && _(p.bounds.maxY) ? (t = Ra(h, h.parentNode), J.minX = S = Math.round(Sg(G, "px") + e.left - t.left), J.minY = A = Math.round(Sg(V, "px") + e.top - t.top), J.maxX = D = Math.round(S + (e.width - t.width)), J.maxY = X = Math.round(A + (e.height - t.height))) : (e = p.bounds, J.minX = S = e.minX, J.minY = A = e.minY, J.maxX = D = e.maxX, J.maxY = X = e.maxY), D < S && (J.minX = D, J.maxX = D = S, S = J.minX), X < A && (J.minY = X, J.maxY = X = A, A = J.minY), Q && (J.minRotation = S, J.maxRotation = D), E = !0), p.liveSnap && (n = !0 === p.liveSnap ? p.snap || {} : p.liveSnap, o = Ne(n) || Z(n), Q ? (P = Ch(o ? n : n.rotation, S, D, 1), Y = null) : n.points ? N = function buildPointSnapFunc(s, l, c, d, p, u, h) { return u = u && u < Be ? u * u : Be, Z(s) ? function (e) { var t, n, o, r = J.isPressed ? 1 - J.edgeResistance : 1, i = e.x, a = e.y; return e.x = i = c < i ? c + (i - c) * r : i < l ? l + (i - l) * r : i, e.y = a = p < a ? p + (a - p) * r : a < d ? d + (a - d) * r : a, (t = s.call(J, e)) !== e && (e.x = t.x, e.y = t.y), 1 !== h && (e.x *= h, e.y *= h), u < Be && (n = e.x - i, o = e.y - a, u < n * n + o * o && (e.x = i, e.y = a)), e } : Ne(s) ? function (e) { for (var t, n, o, r, i = s.length, a = 0, l = Be; -1 < --i;)(r = (t = (o = s[i]).x - e.x) * t + (n = o.y - e.y) * n) < l && (a = i, l = r); return l <= u ? s[a] : e } : function (e) { return e } }(o ? n : n.points, S, D, A, X, n.radius, f ? -1 : 1) : (K && (P = Ch(o ? n : n.x || n.left || n.scrollLeft, S, D, f ? -1 : 1)), U && (Y = Ch(o ? n : n.y || n.top || n.scrollTop, A, X, f ? -1 : 1)))) } function Fh() { J.isThrowing = !1, Qa(J, "throwcomplete", "onThrowComplete") } function Gh() { J.isThrowing = !1 } function Hh(e, t) { var n, o, r, i; e && _e ? (!0 === e && (n = p.snap || p.liveSnap || {}, o = Ne(n) || Z(n), e = { resistance: (p.throwResistance || p.resistance || 1e3) / (Q ? 10 : 1) }, Q ? e.rotation = Ua(J, o ? n : n.rotation, D, S, 1, t) : (K && (e[G] = Ua(J, o ? n : n.points || n.x || n.left, D, S, f ? -1 : 1, t || "x" === J.lockedAxis)), U && (e[V] = Ua(J, o ? n : n.points || n.y || n.top, X, A, f ? -1 : 1, t || "y" === J.lockedAxis)), (n.points || Ne(n) && $(n[0])) && (e.linkedProps = G + "," + V, e.radius = n.radius))), J.isThrowing = !0, i = isNaN(p.overshootTolerance) ? 1 === p.edgeResistance ? 0 : 1 - J.edgeResistance + .2 : p.overshootTolerance, e.duration || (e.duration = { max: Math.max(p.minDuration || 0, "maxDuration" in p ? p.maxDuration : 2), min: isNaN(p.minDuration) ? 0 === i || $(e) && 1e3 < e.resistance ? 0 : .5 : p.minDuration, overshoot: i }), J.tween = r = xe.to(f || h, { inertia: e, data: "_draggable", inherit: !1, onComplete: Fh, onInterrupt: Gh, onUpdate: p.fastMode ? Qa : Bh, onUpdateParams: p.fastMode ? [J, "onthrowupdate", "onThrowUpdate"] : n && n.radius ? [!1, !0] : [] }), p.fastMode || (f && (f._skip = !0), r.render(1e9, !0, !0), Bh(!0, !0), J.endX = J.x, J.endY = J.y, Q && (J.endRotation = J.x), r.play(0), Bh(!0, !0), f && (f._skip = !1))) : E && J.applyBounds() } function Ih(e) { var t, n = k; k = getGlobalMatrix(h.parentNode, !0), e && J.isPressed && !k.equals(n || new ge) && (t = n.inverse().apply({ x: w, y: b }), k.apply(t, t), w = t.x, b = t.y), k.equals(r) && (k = null) } function Jh() { var e, t, n, o = 1 - J.edgeResistance, r = ce ? Ga(de) : 0, i = ce ? Fa(de) : 0; W && (se.x = Sg(G, "px") + "px", se.y = Sg(V, "px") + "px", se.renderTransform()), Ih(!1), Ge.x = J.pointerX - r, Ge.y = J.pointerY - i, k && k.apply(Ge, Ge), w = Ge.x, b = Ge.y, C && (he(J.pointerX, J.pointerY), Ah(!0)), d = getGlobalMatrix(h), f ? (Eh(), M = f.top(), T = f.left()) : (pe() ? (Bh(!0, !0), Eh()) : J.applyBounds(), Q ? (e = h.ownerSVGElement ? [se.xOrigin - h.getBBox().x, se.yOrigin - h.getBBox().y] : (Na(h)[Ye] || "0 0").split(" "), L = J.rotationOrigin = getGlobalMatrix(h).apply({ x: parseFloat(e[0]) || 0, y: parseFloat(e[1]) || 0 }), Bh(!0, !0), t = J.pointerX - L.x - r, n = L.y - J.pointerY + i, T = J.x, M = J.y = Math.atan2(n, t) * ke) : (M = Sg(V, "px"), T = Sg(G, "px"))), E && o && (D < T ? T = D + (T - D) / o : T < S && (T = S - (S - T) / o), Q || (X < M ? M = X + (M - X) / o : M < A && (M = A - (A - M) / o))), J.startX = T = da(T), J.startY = M = da(M) } function Lh() { !we.parentNode || pe() || J.isDragging || we.parentNode.removeChild(we) } function Mh(e, t) { var n; if (!u || J.isPressed || !e || !("mousedown" !== e.type && "pointerdown" !== e.type || t) && Re() - le < 30 && Ee[J.pointerEvent.type]) z && e && u && Ba(e); else { if (B = pe(), H = !1, J.pointerEvent = e, Ee[e.type] ? (y = ~e.type.indexOf("touch") ? e.currentTarget || e.target : de, za(y, "touchend", fe), za(y, "touchmove", ue), za(y, "touchcancel", fe), za(de, "touchstart", Ea)) : (y = null, za(de, "mousemove", ue)), O = null, Ae && y || (za(de, "mouseup", fe), e && e.target && za(e.target, "mouseup", fe)), v = ae.call(J, e.target) && !1 === p.dragClickables && !t) return za(e.target, "change", fe), Qa(J, "pressInit", "onPressInit"), Qa(J, "press", "onPress"), Wa(q, !0), void (z = !1); if (R = !(!y || K == U || !1 === J.vars.allowNativeTouchScrolling || J.vars.allowContextMenu && e && (e.ctrlKey || 2 < e.which)) && (K ? "y" : "x"), (z = !R && !J.allowEventDefault) && (Ba(e), za(me, "touchforcechange", Ba)), e.changedTouches ? (e = x = e.changedTouches[0], m = e.identifier) : e.pointerId ? m = e.pointerId : x = m = null, Pe++, function _addToRenderQueue(e) { Oe.push(e), 1 === Oe.length && xe.ticker.add(ua) }(Ah), b = J.pointerY = e.pageY, w = J.pointerX = e.pageX, Qa(J, "pressInit", "onPressInit"), (R || J.autoScroll) && La(h.parentNode), !h.parentNode || !J.autoScroll || f || Q || !h.parentNode._gsMaxScrollX || we.parentNode || h.getBBox || (we.style.width = h.parentNode.scrollWidth + "px", h.parentNode.appendChild(we)), Jh(), J.tween && J.tween.kill(), J.isThrowing = !1, xe.killTweensOf(f || h, o, !0), f && xe.killTweensOf(h, { scrollTo: 1 }, !0), J.tween = J.lockedAxis = null, !p.zIndexBoost && (Q || f || !1 === p.zIndexBoost) || (h.style.zIndex = Draggable.zIndex++), J.isPressed = !0, g = !(!p.onDrag && !J._listeners.drag), s = !(!p.onMove && !J._listeners.move), !1 !== p.cursor || p.activeCursor) for (n = q.length; -1 < --n;)xe.set(q[n], { cursor: p.activeCursor || p.cursor || ("grab" === Xe ? "grabbing" : Xe) }); Qa(J, "press", "onPress") } } function Qh(e) { if (e && J.isDragging && !f) { var t = e.target || h.parentNode, n = t.scrollLeft - t._gsScrollX, o = t.scrollTop - t._gsScrollY; (n || o) && (k ? (w -= n * k.a + o * k.c, b -= o * k.d + n * k.b) : (w -= n, b -= o), t._gsScrollX += n, t._gsScrollY += o, he(J.pointerX, J.pointerY)) } } function Rh(e) { var t = Re(), n = t - le < 100, o = t - ee < 50, r = n && F === le, i = J.pointerEvent && J.pointerEvent.defaultPrevented, a = n && c === le, l = e.isTrusted || null == e.isTrusted && n && r; if ((r || o && !1 !== J.vars.suppressClickOnDrag) && e.stopImmediatePropagation && e.stopImmediatePropagation(), n && (!J.pointerEvent || !J.pointerEvent.defaultPrevented) && (!r || l && !a)) return l && r && (c = le), void (F = le); (J.isPressed || o || n) && (l && e.detail && n && !i || Ba(e)), n || o || H || (e && e.target && (J.pointerEvent = e), Qa(J, "click", "onClick")) } function Sh(e) { return k ? { x: e.x * k.a + e.y * k.c + k.e, y: e.x * k.b + e.y * k.d + k.f } : { x: e.x, y: e.y } } var u, f, w, b, T, M, E, g, s, D, S, X, A, x, m, L, C, t, P, Y, N, v, y, k, B, R, O, I, F, c, z, d, H, n = (p.type || "x,y").toLowerCase(), W = ~n.indexOf("x") || ~n.indexOf("y"), Q = -1 !== n.indexOf("rotation"), G = Q ? "rotation" : W ? "x" : "left", V = W ? "y" : "top", K = !(!~n.indexOf("x") && !~n.indexOf("left") && "scroll" !== n), U = !(!~n.indexOf("y") && !~n.indexOf("top") && "scroll" !== n), j = p.minimumMovement || 2, J = _assertThisInitialized(e), q = Te(p.trigger || p.handle || h), o = {}, ee = 0, te = !1, ne = p.autoScrollMarginTop || 40, oe = p.autoScrollMarginRight || 40, re = p.autoScrollMarginBottom || 40, ie = p.autoScrollMarginLeft || 40, ae = p.clickableTest || Va, le = 0, se = h._gsap || xe.core.getCache(h), ce = function _isFixed(e) { return "fixed" === Na(e).position || ((e = e.parentNode) && 1 === e.nodeType ? _isFixed(e) : void 0) }(h), de = h.ownerDocument || ve, pe = function isTweening() { return J.tween && J.tween.isActive() }, ue = function onMove(e) { var t, n, o, r, i, a, l = e; if (u && !De && J.isPressed && e) { if (t = (J.pointerEvent = e).changedTouches) { if ((e = t[0]) !== x && e.identifier !== m) { for (r = t.length; -1 < --r && (e = t[r]).identifier !== m && e.target !== h;); if (r < 0) return } } else if (e.pointerId && m && e.pointerId !== m) return; y && R && !O && (Ge.x = e.pageX - (ce ? Ga(de) : 0), Ge.y = e.pageY - (ce ? Fa(de) : 0), k && k.apply(Ge, Ge), n = Ge.x, o = Ge.y, ((i = Math.abs(n - w)) !== (a = Math.abs(o - b)) && (j < i || j < a) || Se && R === O) && (O = a < i && K ? "x" : "y", R && O !== R && za(me, "touchforcechange", Ba), !1 !== J.vars.lockAxisOnTouchScroll && K && U && (J.lockedAxis = "x" === O ? "y" : "x", Z(J.vars.onLockAxis) && J.vars.onLockAxis.call(J, l)), Se && R === O)) ? fe(l) : (z = J.allowEventDefault || R && (!O || R === O) || !1 === l.cancelable ? z && !1 : (Ba(l), !0), J.autoScroll && (te = !0), he(e.pageX, e.pageY, s)) } else z && e && u && Ba(e) }, he = function setPointerPosition(e, t, n) { var o, r, i, a, l, s, c = 1 - J.dragResistance, d = 1 - J.edgeResistance, p = J.pointerX, u = J.pointerY, h = M, f = J.x, g = J.y, x = J.endX, m = J.endY, v = J.endRotation, y = C; J.pointerX = e, J.pointerY = t, ce && (e -= Ga(de), t -= Fa(de)), Q ? (a = Math.atan2(L.y - t, e - L.x) * ke, 180 < (l = J.y - a) ? (M -= 360, J.y = a) : l < -180 && (M += 360, J.y = a), i = J.x !== T || Math.max(Math.abs(w - e), Math.abs(b - t)) > j ? (J.y = a, T + (M - a) * c) : T) : (k && (s = e * k.a + t * k.c + k.e, t = e * k.b + t * k.d + k.f, e = s), (r = t - b) < j && -j < r && (r = 0), (o = e - w) < j && -j < o && (o = 0), (J.lockAxis || J.lockedAxis) && (o || r) && ((s = J.lockedAxis) || (J.lockedAxis = s = K && Math.abs(o) > Math.abs(r) ? "y" : U ? "x" : null, s && Z(J.vars.onLockAxis) && J.vars.onLockAxis.call(J, J.pointerEvent)), "y" === s ? r = 0 : "x" === s && (o = 0)), i = da(T + o * c), a = da(M + r * c)), (P || Y || N) && (J.x !== i || J.y !== a && !Q) && (N && (He.x = i, He.y = a, s = N(He), i = da(s.x), a = da(s.y)), P && (i = da(P(i))), Y && (a = da(Y(a)))), E && (D < i ? i = D + Math.round((i - D) * d) : i < S && (i = S + Math.round((i - S) * d)), Q || (X < a ? a = Math.round(X + (a - X) * d) : a < A && (a = Math.round(A + (a - A) * d)))), J.x === i && (J.y === a || Q) || (Q ? (J.endRotation = J.x = J.endX = i, C = !0) : (U && (J.y = J.endY = a, C = !0), K && (J.x = J.endX = i, C = !0)), n && !1 === Qa(J, "move", "onMove") ? (J.pointerX = p, J.pointerY = u, M = h, J.x = f, J.y = g, J.endX = x, J.endY = m, J.endRotation = v, C = y) : !J.isDragging && J.isPressed && (J.isDragging = H = !0, Qa(J, "dragstart", "onDragStart"))) }, fe = function onRelease(e, t) { if (u && J.isPressed && (!e || null == m || t || !(e.pointerId && e.pointerId !== m && e.target !== h || e.changedTouches && !function _hasTouchID(e, t) { for (var n = e.length; n--;)if (e[n].identifier === t) return !0 }(e.changedTouches, m)))) { J.isPressed = !1; var n, o, r, i, a, l = e, s = J.isDragging, c = J.vars.allowContextMenu && e && (e.ctrlKey || 2 < e.which), d = xe.delayedCall(.001, Lh); if (y ? (Aa(y, "touchend", onRelease), Aa(y, "touchmove", ue), Aa(y, "touchcancel", onRelease), Aa(de, "touchstart", Ea)) : Aa(de, "mousemove", ue), Aa(me, "touchforcechange", Ba), Ae && y || (Aa(de, "mouseup", onRelease), e && e.target && Aa(e.target, "mouseup", onRelease)), C = !1, s && (ee = ze = Re(), J.isDragging = !1), xa(Ah), v && !c) return e && (Aa(e.target, "change", onRelease), J.pointerEvent = l), Wa(q, !1), Qa(J, "release", "onRelease"), Qa(J, "click", "onClick"), void (v = !1); for (o = q.length; -1 < --o;)Ma(q[o], "cursor", p.cursor || (!1 !== p.cursor ? Xe : null)); if (Pe--, e) { if ((n = e.changedTouches) && (e = n[0]) !== x && e.identifier !== m) { for (o = n.length; -1 < --o && (e = n[o]).identifier !== m && e.target !== h;); if (o < 0 && !t) return } J.pointerEvent = l, J.pointerX = e.pageX, J.pointerY = e.pageY } return c && l ? (Ba(l), z = !0, Qa(J, "release", "onRelease")) : l && !s ? (z = !1, B && (p.snap || p.bounds) && Hh(p.inertia || p.throwProps), Qa(J, "release", "onRelease"), Se && "touchmove" === l.type || -1 !== l.type.indexOf("cancel") || (Qa(J, "click", "onClick"), Re() - le < 300 && Qa(J, "doubleclick", "onDoubleClick"), i = l.target || h, le = Re(), a = function syntheticClick() { le === F || !J.enabled() || J.isPressed || l.defaultPrevented || (i.click ? i.click() : de.createEvent && ((r = de.createEvent("MouseEvents")).initMouseEvent("click", !0, !0, me, 1, J.pointerEvent.screenX, J.pointerEvent.screenY, J.pointerX, J.pointerY, !1, !1, !1, !1, 0, null), i.dispatchEvent(r))) }, Se || l.defaultPrevented || xe.delayedCall(.05, a))) : (Hh(p.inertia || p.throwProps), J.allowEventDefault || !l || !1 === p.dragClickables && ae.call(J, l.target) || !s || R && (!O || R !== O) || !1 === l.cancelable ? z = !1 : (z = !0, Ba(l)), Qa(J, "release", "onRelease")), pe() && d.duration(J.tween.duration()), s && Qa(J, "dragend", "onDragEnd"), !0 } z && e && u && Ba(e) }; return (t = Draggable.get(h)) && t.kill(), e.startDrag = function (e, t) { var n, o, r, i; Mh(e || J.pointerEvent, !0), t && !J.hitTest(e || J.pointerEvent) && (n = Pa(e || J.pointerEvent), o = Pa(h), r = Sh({ x: n.left + n.width / 2, y: n.top + n.height / 2 }), i = Sh({ x: o.left + o.width / 2, y: o.top + o.height / 2 }), w -= r.x - i.x, b -= r.y - i.y), J.isDragging || (J.isDragging = H = !0, Qa(J, "dragstart", "onDragStart")) }, e.drag = ue, e.endDrag = function (e) { return fe(e || J.pointerEvent, !0) }, e.timeSinceDrag = function () { return J.isDragging ? 0 : (Re() - ee) / 1e3 }, e.timeSinceClick = function () { return (Re() - le) / 1e3 }, e.hitTest = function (e, t) { return Draggable.hitTest(J.target, e, t) }, e.getDirection = function (e, t) { var n, o, r, i, a, l, s = "velocity" === e && _e ? e : $(e) && !Q ? "element" : "start"; return "element" === s && (a = Pa(J.target), l = Pa(e)), n = "start" === s ? J.x - T : "velocity" === s ? _e.getVelocity(h, G) : a.left + a.width / 2 - (l.left + l.width / 2), Q ? n < 0 ? "counter-clockwise" : "clockwise" : (t = t || 2, o = "start" === s ? J.y - M : "velocity" === s ? _e.getVelocity(h, V) : a.top + a.height / 2 - (l.top + l.height / 2), i = (r = Math.abs(n / o)) < 1 / t ? "" : n < 0 ? "left" : "right", r < t && ("" !== i && (i += "-"), i += o < 0 ? "up" : "down"), i) }, e.applyBounds = function (e, t) { var n, o, r, i, a, l; if (e && p.bounds !== e) return p.bounds = e, J.update(!0, t); if (Bh(!0), Eh(), E && !pe()) { if (n = J.x, o = J.y, D < n ? n = D : n < S && (n = S), X < o ? o = X : o < A && (o = A), (J.x !== n || J.y !== o) && (r = !0, J.x = J.endX = n, Q ? J.endRotation = n : J.y = J.endY = o, Ah(C = !0), J.autoScroll && !J.isDragging)) for (La(h.parentNode), i = h, We.scrollTop = null != me.pageYOffset ? me.pageYOffset : null != de.documentElement.scrollTop ? de.documentElement.scrollTop : de.body.scrollTop, We.scrollLeft = null != me.pageXOffset ? me.pageXOffset : null != de.documentElement.scrollLeft ? de.documentElement.scrollLeft : de.body.scrollLeft; i && !l;)a = (l = Qe(i.parentNode)) ? We : i.parentNode, U && a.scrollTop > a._gsMaxScrollY && (a.scrollTop = a._gsMaxScrollY), K && a.scrollLeft > a._gsMaxScrollX && (a.scrollLeft = a._gsMaxScrollX), i = a; J.isThrowing && (r || J.endX > D || J.endX < S || J.endY > X || J.endY < A) && Hh(p.inertia || p.throwProps, r) } return J }, e.update = function (e, t, n) { if (t && J.isPressed) { var o = getGlobalMatrix(h), r = d.apply({ x: J.x - T, y: J.y - M }), i = getGlobalMatrix(h.parentNode, !0); i.apply({ x: o.e - r.x, y: o.f - r.y }, r), J.x -= r.x - i.e, J.y -= r.y - i.f, Ah(!0), Jh() } var a = J.x, l = J.y; return Ih(!t), e ? J.applyBounds() : (C && n && Ah(!0), Bh(!0)), t && (he(J.pointerX, J.pointerY), C && Ah(!0)), J.isPressed && !t && (K && .01 < Math.abs(a - J.x) || U && .01 < Math.abs(l - J.y) && !Q) && Jh(), J.autoScroll && (La(h.parentNode, J.isDragging), te = J.isDragging, Ah(!0), Ia(h, Qh), Ha(h, Qh)), J }, e.enable = function (e) { var t, n, o, r = { lazy: !0 }; if (!1 !== p.cursor && (r.cursor = p.cursor || Xe), xe.utils.checkPrefix("touchCallout") && (r.touchCallout = "none"), "soft" !== e) { for (ta(q, K == U ? "none" : p.allowNativeTouchScrolling && h.scrollHeight === h.clientHeight == (h.scrollWidth === h.clientHeight) || p.allowEventDefault ? "manipulation" : K ? "pan-y" : "pan-x"), n = q.length; -1 < --n;)o = q[n], Ae || za(o, "mousedown", Mh), za(o, "touchstart", Mh), za(o, "click", Rh, !0), xe.set(o, r), o.getBBox && o.ownerSVGElement && K != U && xe.set(o.ownerSVGElement, { touchAction: p.allowNativeTouchScrolling || p.allowEventDefault ? "manipulation" : K ? "pan-y" : "pan-x" }), p.allowContextMenu || za(o, "contextmenu", zh); Wa(q, !1) } return Ha(h, Qh), u = !0, _e && "soft" !== e && _e.track(f || h, W ? "x,y" : Q ? "rotation" : "top,left"), h._gsDragID = t = h._gsDragID || "d" + Fe++, Ie[t] = J, f && (f.enable(), f.element._gsDragID = t), (p.bounds || Q) && Jh(), p.bounds && J.applyBounds(), J }, e.disable = function (e) { for (var t, n = J.isDragging, o = q.length; -1 < --o;)Ma(q[o], "cursor", null); if ("soft" !== e) { for (ta(q, null), o = q.length; -1 < --o;)t = q[o], Ma(t, "touchCallout", null), Aa(t, "mousedown", Mh), Aa(t, "touchstart", Mh), Aa(t, "click", Rh, !0), Aa(t, "contextmenu", zh); Wa(q, !0), y && (Aa(y, "touchcancel", fe), Aa(y, "touchend", fe), Aa(y, "touchmove", ue)), Aa(de, "mouseup", fe), Aa(de, "mousemove", ue) } return Ia(h, Qh), u = !1, _e && "soft" !== e && (_e.untrack(f || h, W ? "x,y" : Q ? "rotation" : "top,left"), J.tween && J.tween.kill()), f && f.disable(), xa(Ah), J.isDragging = J.isPressed = v = !1, n && Qa(J, "dragend", "onDragEnd"), J }, e.enabled = function (e, t) { return arguments.length ? e ? J.enable(t) : J.disable(t) : u }, e.kill = function () { return J.isThrowing = !1, J.tween && J.tween.kill(), J.disable(), xe.set(q, { clearProps: "userSelect" }), delete Ie[h._gsDragID], J }, e.revert = function () { this.kill(), this.styles && this.styles.revert() }, ~n.indexOf("scroll") && (f = e.scrollProxy = new $a(h, function _extend(e, t) { for (var n in t) n in e || (e[n] = t[n]); return e }({ onKill: function onKill() { J.isPressed && fe(null) } }, p)), h.style.overflowY = U && !Me ? "auto" : "hidden", h.style.overflowX = K && !Me ? "auto" : "hidden", h = f.content), Q ? o.rotation = 1 : (K && (o[G] = 1), U && (o[V] = 1)), se.force3D = !("force3D" in p) || p.force3D, Le(_assertThisInitialized(e)), e.enable(), e } !function _setDefaults(e, t) { for (var n in t) n in e || (e[n] = t[n]) }(F.prototype, { pointerX: 0, pointerY: 0, startX: 0, startY: 0, deltaX: 0, deltaY: 0, isDragging: !1, isPressed: !1 }), F.zIndex = 1e3, F.version = "3.13.0", Y() && xe.registerPlugin(F), e.Draggable = F, e.default = F; if (typeof (window) === "undefined" || window !== e) { Object.defineProperty(e, "__esModule", { value: !0 }) } else { delete e.default } });
js/Flip.js
/*!
* Flip 3.13.0
* https://gsap.com
*
* @license Copyright 2025, GreenSock. All rights reserved.
* Subject to the terms at https://gsap.com/standard-license.
* @author: Jack Doyle, jack@greensock.com
*/
!function (t, e) { "object" == typeof exports && "undefined" != typeof module ? e(exports) : "function" == typeof define && define.amd ? define(["exports"], e) : e((t = t || self).window = t.window || {}) }(this, function (e) { "use strict"; function p(t) { var e = t.ownerDocument || t; !(k in t.style) && "msTransform" in t.style && (C = (k = "msTransform") + "Origin"); for (; e.parentNode && (e = e.parentNode);); if (y = window, m = new F, e) { a = (g = e).documentElement, b = e.body, (s = g.createElementNS("http://www.w3.org/2000/svg", "g")).style.transform = "none"; var i = e.createElement("div"), n = e.createElement("div"), r = e && (e.body || e.firstElementChild); r && r.appendChild && (r.appendChild(i), i.appendChild(n), i.setAttribute("style", "position:static;transform:translate3d(0,0,1px)"), w = n.offsetParent !== i, r.removeChild(i)) } return e } function t() { return y.pageYOffset || g.scrollTop || a.scrollTop || b.scrollTop || 0 } function u() { return y.pageXOffset || g.scrollLeft || a.scrollLeft || b.scrollLeft || 0 } function v(t) { return t.ownerSVGElement || ("svg" === (t.tagName + "").toLowerCase() ? t : null) } function x(t, e) { if (t.parentNode && (g || p(t))) { var i = v(t), n = i ? i.getAttribute("xmlns") || "http://www.w3.org/2000/svg" : "http://www.w3.org/1999/xhtml", r = i ? e ? "rect" : "g" : "div", a = 2 !== e ? 0 : 100, s = 3 === e ? 100 : 0, o = "position:absolute;display:block;pointer-events:none;margin:0;padding:0;", l = g.createElementNS ? g.createElementNS(n.replace(/^https/, "http"), r) : g.createElement(r); return e && (i ? (d = d || x(t), l.setAttribute("width", .01), l.setAttribute("height", .01), l.setAttribute("transform", "translate(" + a + "," + s + ")"), d.appendChild(l)) : (f || ((f = x(t)).style.cssText = o), l.style.cssText = o + "width:0.1px;height:0.1px;top:" + s + "px;left:" + a + "px", f.appendChild(l))), l } throw "Need document and parent." } function z(t) { var e, i = t.getCTM(); return i || (e = t.style[k], t.style[k] = "none", t.appendChild(s), i = s.getCTM(), t.removeChild(s), e ? t.style[k] = e : t.style.removeProperty(k.replace(/([A-Z])/g, "-$1").toLowerCase())), i || m.clone() } function A(t, e) { var i, n, r, a, s, o, l = v(t), u = t === l, h = l ? E : M, p = t.parentNode, c = p && !l && p.shadowRoot && p.shadowRoot.appendChild ? p.shadowRoot : p; if (t === y) return t; if (h.length || h.push(x(t, 1), x(t, 2), x(t, 3)), i = l ? d : f, l) u ? (a = -(r = z(t)).e / r.a, s = -r.f / r.d, n = m) : t.getBBox ? (r = t.getBBox(), a = (n = (n = t.transform ? t.transform.baseVal : {}).numberOfItems ? 1 < n.numberOfItems ? function _consolidate(t) { for (var e = new F, i = 0; i < t.numberOfItems; i++)e.multiply(t.getItem(i).matrix); return e }(n) : n.getItem(0).matrix : m).a * r.x + n.c * r.y, s = n.b * r.x + n.d * r.y) : (n = new F, a = s = 0), e && "g" === t.tagName.toLowerCase() && (a = s = 0), (u ? l : p).appendChild(i), i.setAttribute("transform", "matrix(" + n.a + "," + n.b + "," + n.c + "," + n.d + "," + (n.e + a) + "," + (n.f + s) + ")"); else { if (a = s = 0, w) for (n = t.offsetParent, r = t; (r = r && r.parentNode) && r !== n && r.parentNode;)4 < (y.getComputedStyle(r)[k] + "").length && (a = r.offsetLeft, s = r.offsetTop, r = 0); if ("absolute" !== (o = y.getComputedStyle(t)).position && "fixed" !== o.position) for (n = t.offsetParent; p && p !== n;)a += p.scrollLeft || 0, s += p.scrollTop || 0, p = p.parentNode; (r = i.style).top = t.offsetTop - s + "px", r.left = t.offsetLeft - a + "px", r[k] = o[k], r[C] = o[C], r.position = "fixed" === o.position ? "fixed" : "absolute", c.appendChild(i) } return i } function B(t, e, i, n, r, a, s) { return t.a = e, t.b = i, t.c = n, t.d = r, t.e = a, t.f = s, t } var g, y, a, b, f, d, m, s, w, i, k = "transform", C = k + "Origin", E = [], M = [], F = ((i = Matrix2D.prototype).inverse = function inverse() { var t = this.a, e = this.b, i = this.c, n = this.d, r = this.e, a = this.f, s = t * n - e * i || 1e-10; return B(this, n / s, -e / s, -i / s, t / s, (i * a - n * r) / s, -(t * a - e * r) / s) }, i.multiply = function multiply(t) { var e = this.a, i = this.b, n = this.c, r = this.d, a = this.e, s = this.f, o = t.a, l = t.c, u = t.b, h = t.d, p = t.e, c = t.f; return B(this, o * e + u * n, o * i + u * r, l * e + h * n, l * i + h * r, a + p * e + c * n, s + p * i + c * r) }, i.clone = function clone() { return new Matrix2D(this.a, this.b, this.c, this.d, this.e, this.f) }, i.equals = function equals(t) { var e = this.a, i = this.b, n = this.c, r = this.d, a = this.e, s = this.f; return e === t.a && i === t.b && n === t.c && r === t.d && a === t.e && s === t.f }, i.apply = function apply(t, e) { void 0 === e && (e = {}); var i = t.x, n = t.y, r = this.a, a = this.b, s = this.c, o = this.d, l = this.e, u = this.f; return e.x = i * r + n * s + l || 0, e.y = i * a + n * o + u || 0, e }, Matrix2D); function Matrix2D(t, e, i, n, r, a) { void 0 === t && (t = 1), void 0 === e && (e = 0), void 0 === i && (i = 0), void 0 === n && (n = 1), void 0 === r && (r = 0), void 0 === a && (a = 0), B(this, t, e, i, n, r, a) } function getGlobalMatrix(e, i, n, r) { if (!e || !e.parentNode || (g || p(e)).documentElement === e) return new F; var a = function _forceNonZeroScale(t) { for (var e, i; t && t !== b;)(i = t._gsap) && i.uncache && i.get(t, "x"), i && !i.scaleX && !i.scaleY && i.renderTransform && (i.scaleX = i.scaleY = 1e-4, i.renderTransform(1, i), e ? e.push(i) : e = [i]), t = t.parentNode; return e }(e), s = v(e) ? E : M, o = A(e, n), l = s[0].getBoundingClientRect(), h = s[1].getBoundingClientRect(), c = s[2].getBoundingClientRect(), f = o.parentNode, d = !r && function _isFixed(t) { return "fixed" === y.getComputedStyle(t).position || ((t = t.parentNode) && 1 === t.nodeType ? _isFixed(t) : void 0) }(e), m = new F((h.left - l.left) / 100, (h.top - l.top) / 100, (c.left - l.left) / 100, (c.top - l.top) / 100, l.left + (d ? 0 : u()), l.top + (d ? 0 : t())); if (f.removeChild(o), a) for (l = a.length; l--;)(h = a[l]).scaleX = h.scaleY = 0, h.renderTransform(1, h); return i ? m.inverse() : m } function L(t, e) { return t.actions.forEach(function (t) { return t.vars[e] && t.vars[e](t) }) } function S(t) { return "string" == typeof t ? t.split(" ").join("").split(",") : t } function V(t) { return I(t)[0] || console.warn("Element not found:", t) } function W(t) { return Math.round(1e4 * t) / 1e4 || 0 } function X(t, e, i) { return t.forEach(function (t) { return t.classList[i](e) }) } function $(t) { return t.replace(/([A-Z])/g, "-$1").toLowerCase() } function _(t, e) { var i, n = {}; for (i in t) e[i] || (n[i] = t[i]); return n } function ba(t) { var e = st[t] = S(t); return et[t] = e.concat(nt), e } function ea(t, e, i) { return t.forEach(function (t) { return t.d = function _getDOMDepth(t, e, i) { void 0 === i && (i = 0); for (var n = t.parentNode, r = 1e3 * Math.pow(10, i) * (e ? -1 : 1), a = e ? 900 * -r : 0; t;)a += r, t = t.previousSibling; return n ? a + _getDOMDepth(n, e, i + 1) : a }(i ? t.element : t.t, e) }), t.sort(function (t, e) { return t.d - e.d }), t } function fa(t, e) { for (var i, n, r = t.element.style, a = t.css = t.css || [], s = e.length; s--;)n = r[i = e[s]] || r.getPropertyValue(i), a.push(n ? i : Y[i] || (Y[i] = $(i)), n); return r } function ga(t) { var e = t.css, i = t.element.style, n = 0; for (t.cache.uncache = 1; n < e.length; n += 2)e[n + 1] ? i[e[n]] = e[n + 1] : i.removeProperty(e[n]); !e[e.indexOf("transform") + 1] && i.translate && (i.removeProperty("translate"), i.removeProperty("scale"), i.removeProperty("rotate")) } function ha(t, e) { t.forEach(function (t) { return t.a.cache.uncache = 1 }), e || t.finalStates.forEach(ga) } function ja(e, i, n) { var r, a, s, o = e.element, l = e.width, h = e.height, p = e.uncache, c = e.getProp, f = o.style, d = 4; if ("object" != typeof i && (i = e), tt && 1 !== n) return tt._abs.push({ t: o, b: e, a: e, sd: 0 }), tt._final.push(function () { return (e.cache.uncache = 1) && ga(e) }), o; for (a = "none" === c("display"), e.isVisible && !a || (a && (fa(e, ["display"]).display = i.display), e.matrix = i.matrix, e.width = l = e.width || i.width, e.height = h = e.height || i.height), fa(e, R), s = window.getComputedStyle(o); d--;)f[R[d]] = s[R[d]]; if (f.gridArea = "1 / 1 / 1 / 1", f.transition = "none", f.position = "absolute", f.width = l + "px", f.height = h + "px", f.top || (f.top = "0px"), f.left || (f.left = "0px"), p) r = new ht(o); else if ((r = _(e, D)).position = "absolute", e.simple) { var m = o.getBoundingClientRect(); r.matrix = new F(1, 0, 0, 1, m.left + u(), m.top + t()) } else r.matrix = getGlobalMatrix(o, !1, !1, !0); return r = ot(r, e, !0), e.x = P(r.x, .01), e.y = P(r.y, .01), o } function ka(t, e) { return !0 !== e && (e = I(e), t = t.filter(function (t) { if (-1 !== e.indexOf((t.sd < 0 ? t.b : t.a).element)) return !0; t.t._gsap.renderTransform(1), t.b.isVisible && (t.t.style.width = t.b.width + "px", t.t.style.height = t.b.height + "px") })), t } function la(t) { return ea(t, !0).forEach(function (t) { return (t.a.isVisible || t.b.isVisible) && ja(t.sd < 0 ? t.b : t.a, t.b, 1) }) } function pa(t, e) { var i, n = t.style || t; for (i in e) n[i] = e[i] } function ra(t) { return t.map(function (t) { return t.element }) } function sa(t, e, i) { return t && e.length && i.add(t(ra(e), i, new ut(e, 0, !0)), 0) } function ua(t, e) { return t instanceof ut ? t : new ut(t, e) } function va(t, e, i) { var n = t.idLookup[i], r = t.alt[i]; return !r.isVisible || (e.getElementState(r.element) || r).isVisible && n.isVisible ? n : r } function za(t) { if (t !== l) { var e = o.style, i = o.clientWidth === window.outerWidth, n = o.clientHeight === window.outerHeight, r = 4; if (t && (i || n)) { for (; r--;)j[r] = e[H[r]]; i && (e.width = o.clientWidth + "px", e.overflowY = "hidden"), n && (e.height = o.clientHeight + "px", e.overflowX = "hidden"), l = t } else if (l) { for (; r--;)j[r] ? e[H[r]] = j[r] : e.removeProperty($(H[r])); l = t } } } function Aa(t, e, r, i) { t instanceof ut && e instanceof ut || console.warn("Not a valid state object."); var a, s, o, l, u, h, p, c, f, n, d, m, g, v, y, x = (r = r || {}).clearProps, b = r.onEnter, w = r.onLeave, S = r.absolute, k = r.absoluteOnLeave, C = r.custom, V = r.delay, E = r.paused, M = r.repeat, B = r.repeatDelay, F = r.yoyo, I = r.toggleClass, L = r.nested, P = r.zIndex, A = r.scale, T = r.fade, O = r.stagger, N = r.spin, D = r.prune, z = ("props" in r ? r : t).props, Y = _(r, rt), R = Q.timeline({ delay: V, paused: E, repeat: M, repeatDelay: B, yoyo: F, data: "isFlip" }), W = Y, G = [], j = [], H = [], q = [], $ = !0 === N ? 1 : N || 0, Z = "function" == typeof N ? N : function () { return $ }, J = t.interrupted || e.interrupted, U = R[1 !== i ? "to" : "from"]; for (s in e.idLookup) d = e.alt[s] ? va(e, t, s) : e.idLookup[s], u = d.element, n = t.idLookup[s], !t.alt[s] || u !== n.element || !t.alt[s].isVisible && d.isVisible || (n = t.alt[s]), n ? (h = { t: u, b: n, a: d, sd: n.element === u ? 0 : d.isVisible ? 1 : -1 }, H.push(h), h.sd && (h.sd < 0 && (h.b = d, h.a = n), J && fa(h.b, z ? et[z] : nt), T && H.push(h.swap = { t: n.element, b: h.b, a: h.a, sd: -h.sd, swap: h })), u._flip = n.element._flip = tt ? tt.timeline : R) : d.isVisible && (H.push({ t: u, b: _(d, { isVisible: 1 }), a: d, sd: 0, entering: 1 }), u._flip = tt ? tt.timeline : R); z && (st[z] || ba(z)).forEach(function (e) { return Y[e] = function (t) { return H[t].a.props[e] } }), H.finalStates = f = [], m = function run() { for (ea(H), za(!0), l = 0; l < H.length; l++)h = H[l], g = h.a, v = h.b, !D || g.isDifferent(v) || h.entering ? (u = h.t, !L || h.sd < 0 || !l || (g.matrix = getGlobalMatrix(u, !1, !1, !0)), v.isVisible && g.isVisible ? (h.sd < 0 ? (p = new ht(u, z, t.simple), ot(p, g, A, 0, 0, p), p.matrix = getGlobalMatrix(u, !1, !1, !0), p.css = h.b.css, h.a = g = p, T && (u.style.opacity = J ? v.opacity : g.opacity), O && q.push(u)) : 0 < h.sd && T && (u.style.opacity = J ? g.opacity - v.opacity : "0"), ot(g, v, A, z)) : v.isVisible !== g.isVisible && (v.isVisible ? g.isVisible || (v.css = g.css, j.push(v), H.splice(l--, 1), S && L && ot(g, v, A, z)) : (g.isVisible && G.push(g), H.splice(l--, 1))), A || (u.style.maxWidth = Math.max(g.width, v.width) + "px", u.style.maxHeight = Math.max(g.height, v.height) + "px", u.style.minWidth = Math.min(g.width, v.width) + "px", u.style.minHeight = Math.min(g.height, v.height) + "px"), L && I && u.classList.add(I)) : H.splice(l--, 1), f.push(g); var e; if (I && (e = f.map(function (t) { return t.element }), L && e.forEach(function (t) { return t.classList.remove(I) })), za(!1), A ? (Y.scaleX = function (t) { return H[t].a.scaleX }, Y.scaleY = function (t) { return H[t].a.scaleY }) : (Y.width = function (t) { return H[t].a.width + "px" }, Y.height = function (t) { return H[t].a.height + "px" }, Y.autoRound = r.autoRound || !1), Y.x = function (t) { return H[t].a.x + "px" }, Y.y = function (t) { return H[t].a.y + "px" }, Y.rotation = function (t) { return H[t].a.rotation + (N ? 360 * Z(t, c[t], c) : 0) }, Y.skewX = function (t) { return H[t].a.skewX }, c = H.map(function (t) { return t.t }), !P && 0 !== P || (Y.modifiers = { zIndex: function zIndex() { return P } }, Y.zIndex = P, Y.immediateRender = !1 !== r.immediateRender), T && (Y.opacity = function (t) { return H[t].sd < 0 ? 0 : 0 < H[t].sd ? H[t].a.opacity : "+=0" }), q.length) { O = Q.utils.distribute(O); var i = c.slice(q.length); Y.stagger = function (t, e) { return O(~q.indexOf(e) ? c.indexOf(H[t].swap.t) : t, e, i) } } if (it.forEach(function (t) { return r[t] && R.eventCallback(t, r[t], r[t + "Params"]) }), C && c.length) for (s in W = _(Y, rt), "scale" in C && (C.scaleX = C.scaleY = C.scale, delete C.scale), C) (a = _(C[s], at))[s] = Y[s], !("duration" in a) && "duration" in Y && (a.duration = Y.duration), a.stagger = Y.stagger, U.call(R, c, a, 0), delete W[s]; (c.length || j.length || G.length) && (I && R.add(function () { return X(e, I, R._zTime < 0 ? "remove" : "add") }, 0) && !E && X(e, I, "add"), c.length && U.call(R, c, W, 0)), sa(b, G, R), sa(w, j, R); var n = tt && tt.timeline; n && (n.add(R, 0), tt._final.push(function () { return ha(H, !x) })), o = R.duration(), R.call(function () { var t = R.time() >= o; t && !n && ha(H, !x), I && X(e, I, t ? "remove" : "add") }) }, k && (S = H.filter(function (t) { return !t.sd && !t.a.isVisible && t.b.isVisible }).map(function (t) { return t.a.element })), tt ? (S && (y = tt._abs).push.apply(y, ka(H, S)), tt._run.push(m)) : (S && la(ka(H, S)), m()); var K = tt ? tt.timeline : R; return K.revert = function () { return lt(K, 1, 1) }, K } function Da(t) { for (var e, i = t.idLookup = {}, n = t.alt = {}, r = t.elementStates, a = r.length; a--;)i[(e = r[a]).id] ? n[e.id] = e : i[e.id] = e } var I, Q, tt, r, o, P, T, l, n, c = 1, h = {}, O = 180 / Math.PI, N = Math.PI / 180, D = {}, Y = {}, et = {}, it = S("onStart,onUpdate,onComplete,onReverseComplete,onInterrupt"), nt = S("transform,transformOrigin,width,height,position,top,left,opacity,zIndex,maxWidth,maxHeight,minWidth,minHeight"), rt = { zIndex: 1, kill: 1, simple: 1, spin: 1, clearProps: 1, targets: 1, toggleClass: 1, onComplete: 1, onUpdate: 1, onInterrupt: 1, onStart: 1, delay: 1, repeat: 1, repeatDelay: 1, yoyo: 1, scale: 1, fade: 1, absolute: 1, props: 1, onEnter: 1, onLeave: 1, custom: 1, paused: 1, nested: 1, prune: 1, absoluteOnLeave: 1 }, at = { zIndex: 1, simple: 1, clearProps: 1, scale: 1, absolute: 1, fitChild: 1, getVars: 1, props: 1 }, st = {}, R = "paddingTop,paddingRight,paddingBottom,paddingLeft,gridArea,transition".split(","), G = function _parseElementState(t, e, i, n) { return t instanceof ht ? t : t instanceof ut ? function _findElStateInState(t, e) { return e && t.idLookup[G(e).id] || t.elementStates[0] }(t, n) : new ht("string" == typeof t ? V(t) || console.warn(t + " not found") : t, e, i) }, ot = function _fit(t, e, i, n, r, a) { var s, o, l, u, h, p, c, f = t.element, d = t.cache, m = t.parent, g = t.x, v = t.y, y = e.width, x = e.height, b = e.scaleX, w = e.scaleY, S = e.rotation, k = e.bounds, _ = a && T && T(f, "transform,width,height"), C = t, V = e.matrix, E = V.e, M = V.f, B = t.bounds.width !== k.width || t.bounds.height !== k.height || t.scaleX !== b || t.scaleY !== w || t.rotation !== S, F = !B && t.simple && e.simple && !r; return F || !m ? (b = w = 1, S = s = 0) : (p = (h = function _getInverseGlobalMatrix(t) { var e = t._gsap || Q.core.getCache(t); return e.gmCache === Q.ticker.frame ? e.gMatrix : (e.gmCache = Q.ticker.frame, e.gMatrix = getGlobalMatrix(t, !0, !1, !0)) }(m)).clone().multiply(e.ctm ? e.matrix.clone().multiply(e.ctm) : e.matrix), S = W(Math.atan2(p.b, p.a) * O), s = W(Math.atan2(p.c, p.d) * O + S) % 360, b = Math.sqrt(Math.pow(p.a, 2) + Math.pow(p.b, 2)), w = Math.sqrt(Math.pow(p.c, 2) + Math.pow(p.d, 2)) * Math.cos(s * N), r && (r = I(r)[0], u = Q.getProperty(r), c = r.getBBox && "function" == typeof r.getBBox && r.getBBox(), C = { scaleX: u("scaleX"), scaleY: u("scaleY"), width: c ? c.width : Math.ceil(parseFloat(u("width", "px"))), height: c ? c.height : parseFloat(u("height", "px")) }), d.rotation = S + "deg", d.skewX = s + "deg"), i ? (b *= y !== C.width && C.width ? y / C.width : 1, w *= x !== C.height && C.height ? x / C.height : 1, d.scaleX = b, d.scaleY = w) : (y = P(y * b / C.scaleX, 0), x = P(x * w / C.scaleY, 0), f.style.width = y + "px", f.style.height = x + "px"), n && pa(f, e.props), F || !m ? (g += E - t.matrix.e, v += M - t.matrix.f) : B || m !== e.parent ? (d.renderTransform(1, d), p = getGlobalMatrix(r || f, !1, !1, !0), o = h.apply({ x: p.e, y: p.f }), g += (l = h.apply({ x: E, y: M })).x - o.x, v += l.y - o.y) : (h.e = h.f = 0, g += (l = h.apply({ x: E - t.matrix.e, y: M - t.matrix.f })).x, v += l.y), g = P(g, .02), v = P(v, .02), !a || a instanceof ht ? (d.x = g + "px", d.y = v + "px", d.renderTransform(1, d)) : _ && _.revert(), a && (a.x = g, a.y = v, a.rotation = S, a.skewX = s, i ? (a.scaleX = b, a.scaleY = w) : (a.width = y, a.height = x)), a || d }, j = [], H = "width,height,overflowX,overflowY".split(","), lt = function _killFlip(t, e, i) { if (t && t.progress() < 1 && (!t.paused() || i)) return e && (function _interrupt(t) { t.vars.onInterrupt && t.vars.onInterrupt.apply(t, t.vars.onInterruptParams || []), t.getChildren(!0, !1, !0).forEach(_interrupt) }(t), e < 2 && t.progress(1), t.kill()), !0 }, ut = ((n = FlipState.prototype).update = function update(t) { var e = this; return this.elementStates = this.targets.map(function (t) { return new ht(t, e.props, e.simple) }), Da(this), this.interrupt(t), this.recordInlineStyles(), this }, n.clear = function clear() { return this.targets.length = this.elementStates.length = 0, Da(this), this }, n.fit = function fit(t, e, i) { for (var n, r, a = ea(this.elementStates.slice(0), !1, !0), s = (t || this).idLookup, o = 0; o < a.length; o++)n = a[o], i && (n.matrix = getGlobalMatrix(n.element, !1, !1, !0)), (r = s[n.id]) && ot(n, r, e, !0, 0, n), n.matrix = getGlobalMatrix(n.element, !1, !1, !0); return this }, n.getProperty = function getProperty(t, e) { var i = this.getElementState(t) || D; return (e in i ? i : i.props || D)[e] }, n.add = function add(t) { for (var e, i, n, r = t.targets.length, a = this.idLookup, s = this.alt; r--;)(n = a[(i = t.elementStates[r]).id]) && (i.element === n.element || s[i.id] && s[i.id].element === i.element) ? (e = this.elementStates.indexOf(i.element === n.element ? n : s[i.id]), this.targets.splice(e, 1, t.targets[r]), this.elementStates.splice(e, 1, i)) : (this.targets.push(t.targets[r]), this.elementStates.push(i)); return t.interrupted && (this.interrupted = !0), t.simple || (this.simple = !1), Da(this), this }, n.compare = function compare(t) { function lh(t, e, i) { return (t.isVisible !== e.isVisible ? t.isVisible ? f : d : t.isVisible ? c : p).push(i) && m.push(i) } function mh(t, e, i) { return m.indexOf(i) < 0 && lh(t, e, i) } var e, i, n, r, a, s, o, l, u = t.idLookup, h = this.idLookup, p = [], c = [], f = [], d = [], m = [], g = t.alt, v = this.alt; for (n in u) a = g[n], s = v[n], r = (e = a ? va(t, this, n) : u[n]).element, i = h[n], s ? (l = i.isVisible || !s.isVisible && r === i.element ? i : s, (o = !a || e.isVisible || a.isVisible || l.element !== a.element ? e : a).isVisible && l.isVisible && o.element !== l.element ? ((o.isDifferent(l) ? c : p).push(o.element, l.element), m.push(o.element, l.element)) : lh(o, l, o.element), a && o.element === a.element && (a = u[n]), mh(o.element !== i.element && a ? a : o, i, i.element), mh(a && a.element === s.element ? a : o, s, s.element), a && mh(a, s.element === a.element ? s : i, a.element)) : (i ? i.isDifferent(e) ? lh(e, i, r) : p.push(r) : f.push(r), a && mh(a, i, a.element)); for (n in h) u[n] || (d.push(h[n].element), v[n] && d.push(v[n].element)); return { changed: c, unchanged: p, enter: f, leave: d } }, n.recordInlineStyles = function recordInlineStyles() { for (var t = et[this.props] || nt, e = this.elementStates.length; e--;)fa(this.elementStates[e], t) }, n.interrupt = function interrupt(n) { var r = this, a = []; this.targets.forEach(function (t) { var e = t._flip, i = lt(e, n ? 0 : 1); n && i && a.indexOf(e) < 0 && e.add(function () { return r.updateVisibility() }), i && a.push(e) }), !n && a.length && this.updateVisibility(), this.interrupted || (this.interrupted = !!a.length) }, n.updateVisibility = function updateVisibility() { this.elementStates.forEach(function (t) { var e = t.element.getBoundingClientRect(); t.isVisible = !!(e.width || e.height || e.top || e.left), t.uncache = 1 }) }, n.getElementState = function getElementState(t) { return this.elementStates[this.targets.indexOf(V(t))] }, n.makeAbsolute = function makeAbsolute() { return ea(this.elementStates.slice(0), !0, !0).map(ja) }, FlipState); function FlipState(t, e, i) { if (this.props = e && e.props, this.simple = !(!e || !e.simple), i) this.targets = ra(t), this.elementStates = t, Da(this); else { this.targets = I(t); var n = e && (!1 === e.kill || e.batch && !e.kill); tt && !n && tt._kill.push(this), this.update(n || !!tt) } } var q, ht = ((q = ElementState.prototype).isDifferent = function isDifferent(t) { var e = this.bounds, i = t.bounds; return e.top !== i.top || e.left !== i.left || e.width !== i.width || e.height !== i.height || !this.matrix.equals(t.matrix) || this.opacity !== t.opacity || this.props && t.props && JSON.stringify(this.props) !== JSON.stringify(t.props) }, q.update = function update(e, i) { var n = this, r = n.element, a = Q.getProperty(r), s = Q.core.getCache(r), o = r.getBoundingClientRect(), l = r.getBBox && "function" == typeof r.getBBox && "svg" !== r.nodeName.toLowerCase() && r.getBBox(), h = i ? new F(1, 0, 0, 1, o.left + u(), o.top + t()) : getGlobalMatrix(r, !1, !1, !0); s.uncache = 1, n.getProp = a, n.element = r, n.id = function _getID(t) { var e = t.getAttribute("data-flip-id"); return e || t.setAttribute("data-flip-id", e = "auto-" + c++), e }(r), n.matrix = h, n.cache = s, n.bounds = o, n.isVisible = !!(o.width || o.height || o.left || o.top), n.display = a("display"), n.position = a("position"), n.parent = r.parentNode, n.x = a("x"), n.y = a("y"), n.scaleX = s.scaleX, n.scaleY = s.scaleY, n.rotation = a("rotation"), n.skewX = a("skewX"), n.opacity = a("opacity"), n.width = l ? l.width : P(a("width", "px"), .04), n.height = l ? l.height : P(a("height", "px"), .04), e && function _recordProps(t, e) { for (var i = Q.getProperty(t.element, null, "native"), n = t.props = {}, r = e.length; r--;)n[e[r]] = (i(e[r]) + "").trim(); n.zIndex && (n.zIndex = parseFloat(n.zIndex) || 0) }(n, st[e] || ba(e)), n.ctm = r.getCTM && "svg" === r.nodeName.toLowerCase() && z(r).inverse(), n.simple = i || 1 === W(h.a) && !W(h.b) && !W(h.c) && 1 === W(h.d), n.uncache = 0 }, ElementState); function ElementState(t, e, i) { this.element = t, this.update(e, i) } var Z, J = ((Z = FlipAction.prototype).getStateById = function getStateById(t) { for (var e = this.states.length; e--;)if (this.states[e].idLookup[t]) return this.states[e] }, Z.kill = function kill() { this.batch.remove(this) }, FlipAction); function FlipAction(t, e) { this.vars = t, this.batch = e, this.states = [], this.timeline = e.timeline } var U, K = ((U = FlipBatch.prototype).add = function add(e) { var t = this.actions.filter(function (t) { return t.vars === e }); return t.length ? t[0] : (t = new J("function" == typeof e ? { animate: e } : e, this), this.actions.push(t), t) }, U.remove = function remove(t) { var e = this.actions.indexOf(t); return 0 <= e && this.actions.splice(e, 1), this }, U.getState = function getState(e) { var i = this, t = tt, n = r; return (tt = this).state.clear(), this._kill.length = 0, this.actions.forEach(function (t) { t.vars.getState && (t.states.length = 0, (r = t).state = t.vars.getState(t)), e && t.states.forEach(function (t) { return i.state.add(t) }) }), r = n, tt = t, this.killConflicts(), this }, U.animate = function animate() { var t, e, i = this, n = tt, r = this.timeline, a = this.actions.length; for (tt = this, r.clear(), this._abs.length = this._final.length = this._run.length = 0, this.actions.forEach(function (t) { t.vars.animate && t.vars.animate(t); var e, i, n = t.vars.onEnter, r = t.vars.onLeave, a = t.targets; a && a.length && (n || r) && (e = new ut, t.states.forEach(function (t) { return e.add(t) }), (i = e.compare(pt.getState(a))).enter.length && n && n(i.enter), i.leave.length && r && r(i.leave)) }), la(this._abs), this._run.forEach(function (t) { return t() }), e = r.duration(), t = this._final.slice(0), r.add(function () { e <= r.time() && (t.forEach(function (t) { return t() }), L(i, "onComplete")) }), tt = n; a--;)this.actions[a].vars.once && this.actions[a].kill(); return L(this, "onStart"), r.restart(), this }, U.loadState = function loadState(n) { n = n || function done() { return 0 }; var r = []; return this.actions.forEach(function (e) { if (e.vars.loadState) { var i, t = function f(t) { t && (e.targets = t), ~(i = r.indexOf(f)) && (r.splice(i, 1), r.length || n()) }; r.push(t), e.vars.loadState(t) } }), r.length || n(), this }, U.setState = function setState() { return this.actions.forEach(function (t) { return t.targets = t.vars.setState && t.vars.setState(t) }), this }, U.killConflicts = function killConflicts(e) { return this.state.interrupt(e), this._kill.forEach(function (t) { return t.interrupt(e) }), this }, U.run = function run(t, e) { var i = this; return this !== tt && (t || this.getState(e), this.loadState(function () { i._killed || (i.setState(), i.animate()) })), this }, U.clear = function clear(t) { this.state.clear(), t || (this.actions.length = 0) }, U.getStateById = function getStateById(t) { for (var e, i = this.actions.length; i--;)if (e = this.actions[i].getStateById(t)) return e; return this.state.idLookup[t] && this.state }, U.kill = function kill() { this._killed = 1, this.clear(), delete h[this.id] }, FlipBatch); function FlipBatch(t) { this.id = t, this.actions = [], this._kill = [], this._final = [], this._abs = [], this._run = [], this.data = {}, this.state = new ut, this.timeline = Q.timeline() } var pt = (Flip.getState = function getState(t, e) { var i = ua(t, e); return r && r.states.push(i), e && e.batch && Flip.batch(e.batch).state.add(i), i }, Flip.from = function from(t, e) { return "clearProps" in (e = e || {}) || (e.clearProps = !0), Aa(t, ua(e.targets || t.targets, { props: e.props || t.props, simple: e.simple, kill: !!e.kill }), e, -1) }, Flip.to = function to(t, e) { return Aa(t, ua(e.targets || t.targets, { props: e.props || t.props, simple: e.simple, kill: !!e.kill }), e, 1) }, Flip.fromTo = function fromTo(t, e, i) { return Aa(t, e, i) }, Flip.fit = function fit(t, e, i) { var n = i ? _(i, at) : {}, r = i || n, a = r.absolute, s = r.scale, o = r.getVars, l = r.props, u = r.runBackwards, h = r.onComplete, p = r.simple, c = i && i.fitChild && V(i.fitChild), f = G(e, l, p, t), d = G(t, 0, p, f), m = l ? et[l] : nt, g = Q.context(); return l && pa(n, f.props), fa(d, m), u && ("immediateRender" in n || (n.immediateRender = !0), n.onComplete = function () { ga(d), h && h.apply(this, arguments) }), a && ja(d, f), n = ot(d, f, s || c, !n.duration && l, c, n.duration || o ? n : 0), "object" == typeof i && "zIndex" in i && (n.zIndex = i.zIndex), g && !o && g.add(function () { return function () { return ga(d) } }), o ? n : n.duration ? Q.to(d.element, n) : null }, Flip.makeAbsolute = function makeAbsolute(t, e) { return (t instanceof ut ? t : new ut(t, e)).makeAbsolute() }, Flip.batch = function batch(t) { return h[t = t || "default"] || (h[t] = new K(t)) }, Flip.killFlipsOf = function killFlipsOf(t, e) { (t instanceof ut ? t.targets : I(t)).forEach(function (t) { return t && lt(t._flip, !1 !== e ? 1 : 2) }) }, Flip.isFlipping = function isFlipping(t) { var e = Flip.getByTarget(t); return !!e && e.isActive() }, Flip.getByTarget = function getByTarget(t) { return (V(t) || D)._flip }, Flip.getElementState = function getElementState(t, e) { return new ht(V(t), e) }, Flip.convertCoordinates = function convertCoordinates(t, e, i) { var n = getGlobalMatrix(e, !0, !0).multiply(getGlobalMatrix(t)); return i ? n.apply(i) : n }, Flip.register = function register(t) { if (o = "undefined" != typeof document && document.body) { Q = t, p(o), I = Q.utils.toArray, T = Q.core.getStyleSaver; var i = Q.utils.snap(.1); P = function _closestTenth(t, e) { return i(parseFloat(t) + e) } } }, Flip); function Flip() { } pt.version = "3.13.0", "undefined" != typeof window && window.gsap && window.gsap.registerPlugin(pt), e.Flip = pt, e.default = pt; if (typeof (window) === "undefined" || window !== e) { Object.defineProperty(e, "__esModule", { value: !0 }) } else { delete e.default } });
js/SplitText.js
/*!
* SplitText 3.13.0
* https://gsap.com
*
* @license Copyright 2025, GreenSock. All rights reserved. Subject to the terms at https://gsap.com/standard-license.
* @author: Jack Doyle
*/
(function (B, A) { typeof exports == "object" && typeof module != "undefined" ? A(exports) : typeof define == "function" && define.amd ? define(["exports"], A) : (B = typeof globalThis != "undefined" ? globalThis : B || self, A(B.window = B.window || {})) })(this, function (B) {
"use strict"; let A, _, G, re = () => G || U.register(window.gsap), V = typeof Intl != "undefined" ? new Intl.Segmenter : 0, P = e => typeof e == "string" ? P(document.querySelectorAll(e)) : "length" in e ? Array.from(e) : [e], X = e => P(e).filter(t => t instanceof HTMLElement), J = [], K = function () { }, oe = /\s+/g, Y = new RegExp("\\p{RI}\\p{RI}|\\p{Emoji}(\\p{EMod}|\\u{FE0F}\\u{20E3}?|[\\u{E0020}-\\u{E007E}]+\\u{E007F})?(\\u{200D}\\p{Emoji}(\\p{EMod}|\\u{FE0F}\\u{20E3}?|[\\u{E0020}-\\u{E007E}]+\\u{E007F})?)*|.", "gu"), Z = { left: 0, top: 0, width: 0, height: 0 }, ee = (e, t) => { if (t) { let s = new Set(e.join("").match(t) || J), i = e.length, o, c, n, a; if (s.size) for (; --i > -1;) { c = e[i]; for (n of s) if (n.startsWith(c) && n.length > c.length) { for (o = 0, a = c; n.startsWith(a += e[i + ++o]) && a.length < n.length;); if (o && a.length === n.length) { e[i] = n, e.splice(i + 1, o); break } } } } return e }, te = e => window.getComputedStyle(e).display === "inline" && (e.style.display = "inline-block"), z = (e, t, s) => t.insertBefore(typeof e == "string" ? document.createTextNode(e) : e, s), Q = (e, t, s) => { let i = t[e + "sClass"] || "", { tag: o = "div", aria: c = "auto", propIndex: n = !1 } = t, a = e === "line" ? "block" : "inline-block", h = i.indexOf("++") > -1, b = x => { let g = document.createElement(o), C = s.length + 1; return i && (g.className = i + (h ? " " + i + C : "")), n && g.style.setProperty("--" + e, C + ""), c !== "none" && g.setAttribute("aria-hidden", "true"), o !== "span" && (g.style.position = "relative", g.style.display = a), g.textContent = x, s.push(g), g }; return h && (i = i.replace("++", "")), b.collection = s, b }, ae = (e, t, s, i) => { let o = Q("line", s, i), c = window.getComputedStyle(e).textAlign || "left"; return (n, a) => { let h = o(""); for (h.style.textAlign = c, e.insertBefore(h, t[n]); n < a; n++)h.appendChild(t[n]); h.normalize() } }, ie = (e, t, s, i, o, c, n, a, h, b) => {
var x; let g = Array.from(e.childNodes), C = 0, { wordDelimiter: R, reduceWhiteSpace: L = !0, prepareText: $ } = t, q = e.getBoundingClientRect(), j = q, D = !L && window.getComputedStyle(e).whiteSpace.substring(0, 3) === "pre", E = 0, v = s.collection, r, f, H, l, m, y, I, d, u, W, S, O, T, F, w, p, k, N; for (typeof R == "object" ? (H = R.delimiter || R, f = R.replaceWith || "") : f = R === "" ? "" : R || " ", r = f !== " "; C < g.length; C++)if (l = g[C], l.nodeType === 3) {
for (w = l.textContent || "", L ? w = w.replace(oe, " ") : D && (w = w.replace(/\n/g, f + `
`)), $ && (w = $(w, e)), l.textContent = w, m = f || H ? w.split(H || f) : w.match(a) || J, k = m[m.length - 1], d = r ? k.slice(-1) === " " : !k, k || m.pop(), j = q, I = r ? m[0].charAt(0) === " " : !m[0], I && z(" ", e, l), m[0] || m.shift(), ee(m, h), c && b || (l.textContent = ""), u = 1; u <= m.length; u++)if (p = m[u - 1], !L && D && p.charAt(0) === `
`&& ((x = l.previousSibling) == null || x.remove(), z(document.createElement("br"), e, l), p = p.slice(1)), !L && p === "") z(f, e, l); else if (p === " ") e.insertBefore(document.createTextNode(" "), l); else { if (r && p.charAt(0) === " " && z(" ", e, l), E && u === 1 && !I && v.indexOf(E.parentNode) > -1 ? (y = v[v.length - 1], y.appendChild(document.createTextNode(i ? "" : p))) : (y = s(i ? "" : p), z(y, e, l), E && u === 1 && !I && y.insertBefore(E, y.firstChild)), i) for (S = V ? ee([...V.segment(p)].map(M => M.segment), h) : p.match(a) || J, N = 0; N < S.length; N++)y.appendChild(S[N] === " " ? document.createTextNode(" ") : i(S[N])); if (c && b) { if (w = l.textContent = w.substring(p.length + 1, w.length), W = y.getBoundingClientRect(), W.top > j.top && W.left <= j.left) { for (O = e.cloneNode(), T = e.childNodes[0]; T && T !== y;)F = T, T = T.nextSibling, O.appendChild(F); e.parentNode.insertBefore(O, e), o && te(O) } j = W } (u < m.length || d) && z(u >= m.length ? " " : r && p.slice(-1) === " " ? " " + f : f, e, l) } e.removeChild(l), E = 0
} else l.nodeType === 1 && (n && n.indexOf(l) > -1 ? (v.indexOf(l.previousSibling) > -1 && v[v.length - 1].appendChild(l), E = l) : (ie(l, t, s, i, o, c, n, a, h, !0), E = 0), o && te(l))
}; const ne = class se { constructor(t, s) { this.isSplit = !1, re(), this.elements = X(t), this.chars = [], this.words = [], this.lines = [], this.masks = [], this.vars = s, this._split = () => this.isSplit && this.split(this.vars); let i = [], o, c = () => { let n = i.length, a; for (; n--;) { a = i[n]; let h = a.element.offsetWidth; if (h !== a.width) { a.width = h, this._split(); return } } }; this._data = { orig: i, obs: typeof ResizeObserver != "undefined" && new ResizeObserver(() => { clearTimeout(o), o = setTimeout(c, 200) }) }, K(this), this.split(s) } split(t) { this.isSplit && this.revert(), this.vars = t = t || this.vars || {}; let { type: s = "chars,words,lines", aria: i = "auto", deepSlice: o = !0, smartWrap: c, onSplit: n, autoSplit: a = !1, specialChars: h, mask: b } = this.vars, x = s.indexOf("lines") > -1, g = s.indexOf("chars") > -1, C = s.indexOf("words") > -1, R = g && !C && !x, L = h && ("push" in h ? new RegExp("(?:" + h.join("|") + ")", "gu") : h), $ = L ? new RegExp(L.source + "|" + Y.source, "gu") : Y, q = !!t.ignore && X(t.ignore), { orig: j, animTime: D, obs: E } = this._data, v; return (g || C || x) && (this.elements.forEach((r, f) => { j[f] = { element: r, html: r.innerHTML, ariaL: r.getAttribute("aria-label"), ariaH: r.getAttribute("aria-hidden") }, i === "auto" ? r.setAttribute("aria-label", (r.textContent || "").trim()) : i === "hidden" && r.setAttribute("aria-hidden", "true"); let H = [], l = [], m = [], y = g ? Q("char", t, H) : null, I = Q("word", t, l), d, u, W, S; if (ie(r, t, I, y, R, o && (x || R), q, $, L, !1), x) { let O = P(r.childNodes), T = ae(r, O, t, m), F, w = [], p = 0, k = O.map(M => M.nodeType === 1 ? M.getBoundingClientRect() : Z), N = Z; for (d = 0; d < O.length; d++)F = O[d], F.nodeType === 1 && (F.nodeName === "BR" ? (w.push(F), T(p, d + 1), p = d + 1, N = k[p]) : (d && k[d].top > N.top && k[d].left <= N.left && (T(p, d), p = d), N = k[d])); p < d && T(p, d), w.forEach(M => { var le; return (le = M.parentNode) == null ? void 0 : le.removeChild(M) }) } if (!C) { for (d = 0; d < l.length; d++)if (u = l[d], g || !u.nextSibling || u.nextSibling.nodeType !== 3) if (c && !x) { for (W = document.createElement("span"), W.style.whiteSpace = "nowrap"; u.firstChild;)W.appendChild(u.firstChild); u.replaceWith(W) } else u.replaceWith(...u.childNodes); else S = u.nextSibling, S && S.nodeType === 3 && (S.textContent = (u.textContent || "") + (S.textContent || ""), u.remove()); l.length = 0, r.normalize() } this.lines.push(...m), this.words.push(...l), this.chars.push(...H) }), b && this[b] && this.masks.push(...this[b].map(r => { let f = r.cloneNode(); return r.replaceWith(f), f.appendChild(r), r.className && (f.className = r.className.replace(/(\b\w+\b)/g, "$1-mask")), f.style.overflow = "clip", f }))), this.isSplit = !0, _ && (a ? _.addEventListener("loadingdone", this._split) : _.status === "loading" && console.warn("SplitText called before fonts loaded")), (v = n && n(this)) && v.totalTime && (this._data.anim = D ? v.totalTime(D) : v), x && a && this.elements.forEach((r, f) => { j[f].width = r.offsetWidth, E && E.observe(r) }), this } revert() { var t, s; let { orig: i, anim: o, obs: c } = this._data; return c && c.disconnect(), i.forEach(({ element: n, html: a, ariaL: h, ariaH: b }) => { n.innerHTML = a, h ? n.setAttribute("aria-label", h) : n.removeAttribute("aria-label"), b ? n.setAttribute("aria-hidden", b) : n.removeAttribute("aria-hidden") }), this.chars.length = this.words.length = this.lines.length = i.length = this.masks.length = 0, this.isSplit = !1, _ == null || _.removeEventListener("loadingdone", this._split), o && (this._data.animTime = o.totalTime(), o.revert()), (s = (t = this.vars).onRevert) == null || s.call(t, this), this } static create(t, s) { return new se(t, s) } static register(t) { A = A || t || window.gsap, A && (P = A.utils.toArray, K = A.core.context || K), !G && window.innerWidth > 0 && (_ = document.fonts, G = !0) } }; ne.version = "3.13.0"; let U = ne; B.SplitText = U, B.default = U, Object.defineProperty(B, "__esModule", { value: !0 })
});
js/app.js
import { preloadImages } from './utils.js'
gsap.registerPlugin(Draggable, Flip, SplitText)
class Grid {
constructor() {
this.dom = document.querySelector(".container")
this.grid = document.querySelector(".grid")
this.products = [...document.querySelectorAll(".product div")]
this.details = document.querySelector(".details")
this.detailsThumb = this.details.querySelector(".details__thumb")
this.cross = document.querySelector(".cross")
this.isDragging = false
}
init() {
this.intro()
}
intro() {
this.centerGrid()
const timeline = gsap.timeline()
timeline.set(this.dom, { scale: .5 })
timeline.set(this.products, {
scale: 0.5,
opacity: 0,
})
timeline.to(this.products, {
scale: 1,
opacity: 1,
duration: 0.6,
ease: "power3.out",
stagger: {
amount: 1.2,
from: "random"
}
})
timeline.to(this.dom, {
scale: 1,
duration: 1.2,
ease: "power3.inOut",
onComplete: () => {
this.setupDraggable()
this.addEvents()
this.observeProducts()
this.handleDetails()
}
})
}
centerGrid() {
const gridWidth = this.grid.offsetWidth
const gridHeight = this.grid.offsetHeight
const windowWidth = window.innerWidth
const windowHeight = window.innerHeight
const centerX = (windowWidth - gridWidth) / 2
const centerY = (windowHeight - gridHeight) / 2
gsap.set(this.grid, {
x: centerX,
y: centerY
})
}
setupDraggable() {
this.dom.classList.add("--is-loaded")
this.draggable = Draggable.create(this.grid, {
type: "x,y",
bounds: {
minX: -(this.grid.offsetWidth - window.innerWidth) - 200,
maxX: 200,
minY: -(this.grid.offsetHeight - window.innerHeight) - 100,
maxY: 100
},
inertia: true,
allowEventDefault: true,
edgeResistance: 0.9,
onDragStart: () => {
this.isDragging = true
this.grid.classList.add("--is-dragging")
},
onDragEnd: () => {
this.isDragging = false
this.grid.classList.remove("--is-dragging")
}
})[0]
}
addEvents() {
window.addEventListener("wheel", (e) => {
e.preventDefault()
const deltaX = -e.deltaX * 7
const deltaY = -e.deltaY * 7
const currentX = gsap.getProperty(this.grid, "x")
const currentY = gsap.getProperty(this.grid, "y")
const newX = currentX + deltaX
const newY = currentY + deltaY
const bounds = this.draggable.vars.bounds
const clampedX = Math.max(bounds.minX, Math.min(bounds.maxX, newX))
const clampedY = Math.max(bounds.minY, Math.min(bounds.maxY, newY))
gsap.to(this.grid, {
x: clampedX,
y: clampedY,
duration: 0.3,
ease: "power3.out"
})
}, { passive: false })
window.addEventListener("resize", () => {
this.updateBounds()
})
window.addEventListener("mousemove", (e) => {
if (this.SHOW_DETAILS) {
this.handleCursor(e)
}
})
}
updateBounds() {
if (this.draggable) {
this.draggable.vars.bounds = {
minX: -(this.grid.offsetWidth - window.innerWidth) - 50,
maxX: 50,
minY: -(this.grid.offsetHeight - window.innerHeight) - 50,
maxY: 50
}
}
}
observeProducts() {
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.target === this.currentProduct) return
if (entry.isIntersecting) {
gsap.to(entry.target, {
scale: 1,
opacity: 1,
duration: 0.5,
ease: "power2.out"
})
} else {
gsap.to(entry.target, {
opacity: 0,
scale: 0.5,
duration: 0.5,
ease: "power2.in"
})
}
})
}, {
root: null,
threshold: 0.1
})
this.products.forEach(product => {
observer.observe(product)
})
}
handleDetails() {
this.SHOW_DETAILS = false
this.titles = this.details.querySelectorAll(".details__title p")
this.texts = this.details.querySelectorAll(".details__body [data-text]")
const splitTitles = new SplitText(this.titles, {
type: "lines, chars",
mask: "lines",
charsClass: "char"
})
const splitTexts = new SplitText(this.texts, {
type: "lines",
mask: "lines",
linesClass: "line"
})
this.products.forEach(product => {
product.addEventListener("click", (e) => {
e.stopPropagation()
this.showDetails(product)
})
})
this.dom.addEventListener("click", (e) => {
if (this.SHOW_DETAILS) this.hideDetails()
})
}
showDetails(product) {
if (this.SHOW_DETAILS) return
this.SHOW_DETAILS = true
this.details.classList.add("--is-showing")
this.dom.classList.add("--is-details-showing")
gsap.to(this.dom, {
x: "-50vw",
duration: 1.2,
ease: "power3.inOut",
})
gsap.to(this.details, {
x: 0,
duration: 1.2,
ease: "power3.inOut",
})
this.flipProduct(product)
const title = this.details.querySelector(`[data-title="${product.dataset.id}"]`)
const text = this.details.querySelector(`[data-desc="${product.dataset.id}"]`)
if (title) {
gsap.to(title.querySelectorAll(".char"), {
y: 0,
duration: 1.1,
delay: .4,
ease: "power3.inOut",
stagger: 0.025
})
}
if (text) {
gsap.to(text.querySelectorAll(".line"), {
y: 0,
duration: 1.1,
delay: .4,
ease: "power3.inOut",
stagger: .05,
})
}
}
hideDetails() {
this.SHOW_DETAILS = false
this.dom.classList.remove("--is-details-showing")
gsap.to(this.dom, {
x: 0,
duration: 1.2,
delay: .3,
ease: "power3.inOut",
onComplete: () => {
this.details.classList.remove("--is-showing")
}
})
gsap.to(this.details, {
x: "50vw",
duration: 1.2,
delay: .3,
ease: "power3.inOut"
})
this.unFlipProduct()
this.titles.forEach(title => {
gsap.to(title.querySelectorAll(".char"), {
y: "100%",
duration: 0.6,
ease: "power3.inOut",
stagger: {
amount: 0.025,
from: "end"
}
})
})
this.texts.forEach(text => {
gsap.to(text.querySelectorAll(".line"), {
y: "100%",
duration: 0.6,
ease: "power3.inOut",
stagger: 0.05,
})
})
}
flipProduct(product) {
this.currentProduct = product
this.originalParent = product.parentNode
if (this.observer) {
this.observer.unobserve(product)
}
const state = Flip.getState(product)
this.detailsThumb.appendChild(product)
Flip.from(state, {
absolute: true,
duration: 1.2,
ease: "power3.inOut",
})
gsap.to(this.cross, {
scale: 1,
duration: 0.4,
delay: .5,
ease: "power2.out"
})
}
unFlipProduct() {
if (!this.currentProduct || !this.originalParent) return
gsap.to(this.cross, {
scale: 0,
duration: 0.4,
ease: "power2.out"
})
const state = Flip.getState(this.currentProduct)
const finalRect = this.originalParent.getBoundingClientRect()
const currentRect = this.currentProduct.getBoundingClientRect()
gsap.set(this.currentProduct, {
position: "absolute",
top: currentRect.top - this.detailsThumb.getBoundingClientRect().top + "px",
left: currentRect.left - this.detailsThumb.getBoundingClientRect().left + "px",
width: currentRect.width + "px",
height: currentRect.height + "px",
zIndex: 10000,
})
gsap.to(this.currentProduct, {
top: finalRect.top - this.detailsThumb.getBoundingClientRect().top + "px",
left: finalRect.left - this.detailsThumb.getBoundingClientRect().left + "px",
width: finalRect.width + "px",
height: finalRect.height + "px",
duration: 1.2,
delay: .3,
ease: "power3.inOut",
onComplete: () => {
this.originalParent.appendChild(this.currentProduct)
gsap.set(this.currentProduct, {
position: "",
top: "",
left: "",
width: "",
height: "",
zIndex: "",
})
this.currentProduct = null
this.originalParent = null
},
})
}
handleCursor(e) {
const x = e.clientX
const y = e.clientY
gsap.to(this.cross, {
x: x - this.cross.offsetWidth / 2,
y: y - this.cross.offsetHeight / 2,
duration: 0.4,
ease: "power2.out"
})
}
}
const grid = new Grid()
preloadImages('.grid img').then(() => {
grid.init()
document.body.classList.remove('loading')
})
js/gsap.js
/*!
* GSAP 3.13.0
* https://gsap.com
*
* @license Copyright 2025, GreenSock. All rights reserved.
* Subject to the terms at https://gsap.com/standard-license.
* @author: Jack Doyle, jack@greensock.com
*/
!function (t, e) { "object" == typeof exports && "undefined" != typeof module ? e(exports) : "function" == typeof define && define.amd ? define(["exports"], e) : e((t = t || self).window = t.window || {}) }(this, function (e) { "use strict"; function _inheritsLoose(t, e) { t.prototype = Object.create(e.prototype), (t.prototype.constructor = t).__proto__ = e } function _assertThisInitialized(t) { if (void 0 === t) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return t } function r(t) { return "string" == typeof t } function s(t) { return "function" == typeof t } function t(t) { return "number" == typeof t } function u(t) { return void 0 === t } function v(t) { return "object" == typeof t } function w(t) { return !1 !== t } function x() { return "undefined" != typeof window } function y(t) { return s(t) || r(t) } function P(t) { return (i = yt(t, ot)) && ze } function Q(t, e) { return console.warn("Invalid property", t, "set to", e, "Missing plugin? gsap.registerPlugin()") } function R(t, e) { return !e && console.warn(t) } function S(t, e) { return t && (ot[t] = e) && i && (i[t] = e) || ot } function T() { return 0 } function ea(t) { var e, r, i = t[0]; if (v(i) || s(i) || (t = [t]), !(e = (i._gsap || {}).harness)) { for (r = gt.length; r-- && !gt[r].targetTest(i);); e = gt[r] } for (r = t.length; r--;)t[r] && (t[r]._gsap || (t[r]._gsap = new Zt(t[r], e))) || t.splice(r, 1); return t } function fa(t) { return t._gsap || ea(Ot(t))[0]._gsap } function ga(t, e, r) { return (r = t[e]) && s(r) ? t[e]() : u(r) && t.getAttribute && t.getAttribute(e) || r } function ha(t, e) { return (t = t.split(",")).forEach(e) || t } function ia(t) { return Math.round(1e5 * t) / 1e5 || 0 } function ja(t) { return Math.round(1e7 * t) / 1e7 || 0 } function ka(t, e) { var r = e.charAt(0), i = parseFloat(e.substr(2)); return t = parseFloat(t), "+" === r ? t + i : "-" === r ? t - i : "*" === r ? t * i : t / i } function la(t, e) { for (var r = e.length, i = 0; t.indexOf(e[i]) < 0 && ++i < r;); return i < r } function ma() { var t, e, r = dt.length, i = dt.slice(0); for (ct = {}, t = dt.length = 0; t < r; t++)(e = i[t]) && e._lazy && (e.render(e._lazy[0], e._lazy[1], !0)._lazy = 0) } function na(t) { return !!(t._initted || t._startAt || t.add) } function oa(t, e, r, i) { dt.length && !L && ma(), t.render(e, r, i || !!(L && e < 0 && na(t))), dt.length && !L && ma() } function pa(t) { var e = parseFloat(t); return (e || 0 === e) && (t + "").match(at).length < 2 ? e : r(t) ? t.trim() : t } function qa(t) { return t } function ra(t, e) { for (var r in e) r in t || (t[r] = e[r]); return t } function ua(t, e) { for (var r in e) "__proto__" !== r && "constructor" !== r && "prototype" !== r && (t[r] = v(e[r]) ? ua(t[r] || (t[r] = {}), e[r]) : e[r]); return t } function va(t, e) { var r, i = {}; for (r in t) r in e || (i[r] = t[r]); return i } function wa(t) { var e = t.parent || I, r = t.keyframes ? function _setKeyframeDefaults(i) { return function (t, e) { for (var r in e) r in t || "duration" === r && i || "ease" === r || (t[r] = e[r]) } }($(t.keyframes)) : ra; if (w(t.inherit)) for (; e;)r(t, e.vars.defaults), e = e.parent || e._dp; return t } function ya(t, e, r, i, n) { void 0 === r && (r = "_first"), void 0 === i && (i = "_last"); var a, s = t[i]; if (n) for (a = e[n]; s && s[n] > a;)s = s._prev; return s ? (e._next = s._next, s._next = e) : (e._next = t[r], t[r] = e), e._next ? e._next._prev = e : t[i] = e, e._prev = s, e.parent = e._dp = t, e } function za(t, e, r, i) { void 0 === r && (r = "_first"), void 0 === i && (i = "_last"); var n = e._prev, a = e._next; n ? n._next = a : t[r] === e && (t[r] = a), a ? a._prev = n : t[i] === e && (t[i] = n), e._next = e._prev = e.parent = null } function Aa(t, e) { t.parent && (!e || t.parent.autoRemoveChildren) && t.parent.remove && t.parent.remove(t), t._act = 0 } function Ba(t, e) { if (t && (!e || e._end > t._dur || e._start < 0)) for (var r = t; r;)r._dirty = 1, r = r.parent; return t } function Da(t, e, r, i) { return t._startAt && (L ? t._startAt.revert(ht) : t.vars.immediateRender && !t.vars.autoRevert || t._startAt.render(e, !0, i)) } function Fa(t) { return t._repeat ? Tt(t._tTime, t = t.duration() + t._rDelay) * t : 0 } function Ha(t, e) { return (t - e._start) * e._ts + (0 <= e._ts ? 0 : e._dirty ? e.totalDuration() : e._tDur) } function Ia(t) { return t._end = ja(t._start + (t._tDur / Math.abs(t._ts || t._rts || U) || 0)) } function Ja(t, e) { var r = t._dp; return r && r.smoothChildTiming && t._ts && (t._start = ja(r._time - (0 < t._ts ? e / t._ts : ((t._dirty ? t.totalDuration() : t._tDur) - e) / -t._ts)), Ia(t), r._dirty || Ba(r, t)), t } function Ka(t, e) { var r; if ((e._time || !e._dur && e._initted || e._start < t._time && (e._dur || !e.add)) && (r = Ha(t.rawTime(), e), (!e._dur || Mt(0, e.totalDuration(), r) - e._tTime > U) && e.render(r, !0)), Ba(t, e)._dp && t._initted && t._time >= t._dur && t._ts) { if (t._dur < t.duration()) for (r = t; r._dp;)0 <= r.rawTime() && r.totalTime(r._tTime), r = r._dp; t._zTime = -U } } function La(e, r, i, n) { return r.parent && Aa(r), r._start = ja((t(i) ? i : i || e !== I ? xt(e, i, r) : e._time) + r._delay), r._end = ja(r._start + (r.totalDuration() / Math.abs(r.timeScale()) || 0)), ya(e, r, "_first", "_last", e._sort ? "_start" : 0), bt(r) || (e._recent = r), n || Ka(e, r), e._ts < 0 && Ja(e, e._tTime), e } function Ma(t, e) { return (ot.ScrollTrigger || Q("scrollTrigger", e)) && ot.ScrollTrigger.create(e, t) } function Na(t, e, r, i, n) { return Wt(t, e, n), t._initted ? !r && t._pt && !L && (t._dur && !1 !== t.vars.lazy || !t._dur && t.vars.lazy) && f !== Rt.frame ? (dt.push(t), t._lazy = [n, i], 1) : void 0 : 1 } function Sa(t, e, r, i) { var n = t._repeat, a = ja(e) || 0, s = t._tTime / t._tDur; return s && !i && (t._time *= a / t._dur), t._dur = a, t._tDur = n ? n < 0 ? 1e10 : ja(a * (n + 1) + t._rDelay * n) : a, 0 < s && !i && Ja(t, t._tTime = t._tDur * s), t.parent && Ia(t), r || Ba(t.parent, t), t } function Ta(t) { return t instanceof Qt ? Ba(t) : Sa(t, t._dur) } function Wa(e, r, i) { var n, a, s = t(r[1]), o = (s ? 2 : 1) + (e < 2 ? 0 : 1), u = r[o]; if (s && (u.duration = r[1]), u.parent = i, e) { for (n = u, a = i; a && !("immediateRender" in n);)n = a.vars.defaults || {}, a = w(a.vars.inherit) && a.parent; u.immediateRender = w(n.immediateRender), e < 2 ? u.runBackwards = 1 : u.startAt = r[o - 1] } return new Jt(r[0], u, r[1 + o]) } function Xa(t, e) { return t || 0 === t ? e(t) : e } function Za(t, e) { return r(t) && (e = st.exec(t)) ? e[1] : "" } function ab(t, e) { return t && v(t) && "length" in t && (!e && !t.length || t.length - 1 in t && v(t[0])) && !t.nodeType && t !== h } function db(r) { return r = Ot(r)[0] || R("Invalid scope") || {}, function (t) { var e = r.current || r.nativeElement || r; return Ot(t, e.querySelectorAll ? e : e === r ? R("Invalid scope") || a.createElement("div") : r) } } function eb(t) { return t.sort(function () { return .5 - Math.random() }) } function fb(t) { if (s(t)) return t; var p = v(t) ? t : { each: t }, _ = Yt(p.ease), m = p.from || 0, g = parseFloat(p.base) || 0, y = {}, e = 0 < m && m < 1, T = isNaN(m) || e, b = p.axis, w = m, x = m; return r(m) ? w = x = { center: .5, edges: .5, end: 1 }[m] || 0 : !e && T && (w = m[0], x = m[1]), function (t, e, r) { var i, n, a, s, o, u, h, l, f, d = (r || p).length, c = y[d]; if (!c) { if (!(f = "auto" === p.grid ? 0 : (p.grid || [1, N])[1])) { for (h = -N; h < (h = r[f++].getBoundingClientRect().left) && f < d;); f < d && f-- } for (c = y[d] = [], i = T ? Math.min(f, d) * w - .5 : m % f, n = f === N ? 0 : T ? d * x / f - .5 : m / f | 0, l = N, u = h = 0; u < d; u++)a = u % f - i, s = n - (u / f | 0), c[u] = o = b ? Math.abs("y" === b ? s : a) : G(a * a + s * s), h < o && (h = o), o < l && (l = o); "random" === m && eb(c), c.max = h - l, c.min = l, c.v = d = (parseFloat(p.amount) || parseFloat(p.each) * (d < f ? d - 1 : b ? "y" === b ? d / f : f : Math.max(f, d / f)) || 0) * ("edges" === m ? -1 : 1), c.b = d < 0 ? g - d : g, c.u = Za(p.amount || p.each) || 0, _ = _ && d < 0 ? jt(_) : _ } return d = (c[t] - c.min) / c.max || 0, ja(c.b + (_ ? _(d) : d) * c.v) + c.u } } function gb(i) { var n = Math.pow(10, ((i + "").split(".")[1] || "").length); return function (e) { var r = ja(Math.round(parseFloat(e) / i) * i * n); return (r - r % 1) / n + (t(e) ? 0 : Za(e)) } } function hb(h, e) { var l, f, r = $(h); return !r && v(h) && (l = r = h.radius || N, h.values ? (h = Ot(h.values), (f = !t(h[0])) && (l *= l)) : h = gb(h.increment)), Xa(e, r ? s(h) ? function (t) { return f = h(t), Math.abs(f - t) <= l ? f : t } : function (e) { for (var r, i, n = parseFloat(f ? e.x : e), a = parseFloat(f ? e.y : 0), s = N, o = 0, u = h.length; u--;)(r = f ? (r = h[u].x - n) * r + (i = h[u].y - a) * i : Math.abs(h[u] - n)) < s && (s = r, o = u); return o = !l || s <= l ? h[o] : e, f || o === e || t(e) ? o : o + Za(e) } : gb(h)) } function ib(t, e, r, i) { return Xa($(t) ? !e : !0 === r ? !!(r = 0) : !i, function () { return $(t) ? t[~~(Math.random() * t.length)] : (r = r || 1e-5) && (i = r < 1 ? Math.pow(10, (r + "").length - 2) : 1) && Math.floor(Math.round((t - r / 2 + Math.random() * (e - t + .99 * r)) / r) * r * i) / i }) } function mb(e, r, t) { return Xa(t, function (t) { return e[~~r(t)] }) } function pb(t) { for (var e, r, i, n, a = 0, s = ""; ~(e = t.indexOf("random(", a));)i = t.indexOf(")", e), n = "[" === t.charAt(e + 7), r = t.substr(e + 7, i - e - 7).match(n ? at : tt), s += t.substr(a, e - a) + ib(n ? r : +r[0], n ? 0 : +r[1], +r[2] || 1e-5), a = i + 1; return s + t.substr(a, t.length - a) } function sb(t, e, r) { var i, n, a, s = t.labels, o = N; for (i in s) (n = s[i] - e) < 0 == !!r && n && o > (n = Math.abs(n)) && (a = i, o = n); return a } function ub(t) { return Aa(t), t.scrollTrigger && t.scrollTrigger.kill(!!L), t.progress() < 1 && Pt(t, "onInterrupt"), t } function xb(t) { if (t) if (t = !t.name && t.default || t, x() || t.headless) { var e = t.name, r = s(t), i = e && !r && t.init ? function () { this._props = [] } : t, n = { init: T, render: ue, add: Vt, kill: de, modifier: he, rawVars: 0 }, a = { targetTest: 0, get: 0, getSetter: ie, aliases: {}, register: 0 }; if (Ft(), t !== i) { if (pt[e]) return; ra(i, ra(va(t, n), a)), yt(i.prototype, yt(n, va(t, a))), pt[i.prop = e] = i, t.targetTest && (gt.push(i), ft[e] = 1), e = ("css" === e ? "CSS" : e.charAt(0).toUpperCase() + e.substr(1)) + "Plugin" } S(e, i), t.register && t.register(ze, i, ge) } else Ct.push(t) } function Ab(t, e, r) { return (6 * (t += t < 0 ? 1 : 1 < t ? -1 : 0) < 1 ? e + (r - e) * t * 6 : t < .5 ? r : 3 * t < 2 ? e + (r - e) * (2 / 3 - t) * 6 : e) * St + .5 | 0 } function Bb(e, r, i) { var n, a, s, o, u, h, l, f, d, c, p = e ? t(e) ? [e >> 16, e >> 8 & St, e & St] : 0 : Dt.black; if (!p) { if ("," === e.substr(-1) && (e = e.substr(0, e.length - 1)), Dt[e]) p = Dt[e]; else if ("#" === e.charAt(0)) { if (e.length < 6 && (e = "#" + (n = e.charAt(1)) + n + (a = e.charAt(2)) + a + (s = e.charAt(3)) + s + (5 === e.length ? e.charAt(4) + e.charAt(4) : "")), 9 === e.length) return [(p = parseInt(e.substr(1, 6), 16)) >> 16, p >> 8 & St, p & St, parseInt(e.substr(7), 16) / 255]; p = [(e = parseInt(e.substr(1), 16)) >> 16, e >> 8 & St, e & St] } else if ("hsl" === e.substr(0, 3)) if (p = c = e.match(tt), r) { if (~e.indexOf("=")) return p = e.match(et), i && p.length < 4 && (p[3] = 1), p } else o = +p[0] % 360 / 360, u = p[1] / 100, n = 2 * (h = p[2] / 100) - (a = h <= .5 ? h * (u + 1) : h + u - h * u), 3 < p.length && (p[3] *= 1), p[0] = Ab(o + 1 / 3, n, a), p[1] = Ab(o, n, a), p[2] = Ab(o - 1 / 3, n, a); else p = e.match(tt) || Dt.transparent; p = p.map(Number) } return r && !c && (n = p[0] / St, a = p[1] / St, s = p[2] / St, h = ((l = Math.max(n, a, s)) + (f = Math.min(n, a, s))) / 2, l === f ? o = u = 0 : (d = l - f, u = .5 < h ? d / (2 - l - f) : d / (l + f), o = l === n ? (a - s) / d + (a < s ? 6 : 0) : l === a ? (s - n) / d + 2 : (n - a) / d + 4, o *= 60), p[0] = ~~(o + .5), p[1] = ~~(100 * u + .5), p[2] = ~~(100 * h + .5)), i && p.length < 4 && (p[3] = 1), p } function Cb(t) { var r = [], i = [], n = -1; return t.split(zt).forEach(function (t) { var e = t.match(rt) || []; r.push.apply(r, e), i.push(n += e.length + 1) }), r.c = i, r } function Db(t, e, r) { var i, n, a, s, o = "", u = (t + o).match(zt), h = e ? "hsla(" : "rgba(", l = 0; if (!u) return t; if (u = u.map(function (t) { return (t = Bb(t, e, 1)) && h + (e ? t[0] + "," + t[1] + "%," + t[2] + "%," + t[3] : t.join(",")) + ")" }), r && (a = Cb(t), (i = r.c).join(o) !== a.c.join(o))) for (s = (n = t.replace(zt, "1").split(rt)).length - 1; l < s; l++)o += n[l] + (~i.indexOf(l) ? u.shift() || h + "0,0,0,0)" : (a.length ? a : u.length ? u : r).shift()); if (!n) for (s = (n = t.split(zt)).length - 1; l < s; l++)o += n[l] + u[l]; return o + n[s] } function Gb(t) { var e, r = t.join(" "); if (zt.lastIndex = 0, zt.test(r)) return e = Et.test(r), t[1] = Db(t[1], e), t[0] = Db(t[0], e, Cb(t[1])), !0 } function Pb(t) { var e = (t + "").split("("), r = Lt[e[0]]; return r && 1 < e.length && r.config ? r.config.apply(null, ~t.indexOf("{") ? [function _parseObjectInString(t) { for (var e, r, i, n = {}, a = t.substr(1, t.length - 3).split(":"), s = a[0], o = 1, u = a.length; o < u; o++)r = a[o], e = o !== u - 1 ? r.lastIndexOf(",") : r.length, i = r.substr(0, e), n[s] = isNaN(i) ? i.replace(Bt, "").trim() : +i, s = r.substr(e + 1).trim(); return n }(e[1])] : function _valueInParentheses(t) { var e = t.indexOf("(") + 1, r = t.indexOf(")"), i = t.indexOf("(", e); return t.substring(e, ~i && i < r ? t.indexOf(")", r + 1) : r) }(t).split(",").map(pa)) : Lt._CE && It.test(t) ? Lt._CE("", t) : r } function Rb(t, e) { for (var r, i = t._first; i;)i instanceof Qt ? Rb(i, e) : !i.vars.yoyoEase || i._yoyo && i._repeat || i._yoyo === e || (i.timeline ? Rb(i.timeline, e) : (r = i._ease, i._ease = i._yEase, i._yEase = r, i._yoyo = e)), i = i._next } function Tb(t, e, r, i) { void 0 === r && (r = function easeOut(t) { return 1 - e(1 - t) }), void 0 === i && (i = function easeInOut(t) { return t < .5 ? e(2 * t) / 2 : 1 - e(2 * (1 - t)) / 2 }); var n, a = { easeIn: e, easeOut: r, easeInOut: i }; return ha(t, function (t) { for (var e in Lt[t] = ot[t] = a, Lt[n = t.toLowerCase()] = r, a) Lt[n + ("easeIn" === e ? ".in" : "easeOut" === e ? ".out" : ".inOut")] = Lt[t + "." + e] = a[e] }), a } function Ub(e) { return function (t) { return t < .5 ? (1 - e(1 - 2 * t)) / 2 : .5 + e(2 * (t - .5)) / 2 } } function Vb(r, t, e) { function Lm(t) { return 1 === t ? 1 : i * Math.pow(2, -10 * t) * K((t - a) * n) + 1 } var i = 1 <= t ? t : 1, n = (e || (r ? .3 : .45)) / (t < 1 ? t : 1), a = n / q * (Math.asin(1 / i) || 0), s = "out" === r ? Lm : "in" === r ? function (t) { return 1 - Lm(1 - t) } : Ub(Lm); return n = q / n, s.config = function (t, e) { return Vb(r, t, e) }, s } function Wb(e, r) { function Tm(t) { return t ? --t * t * ((r + 1) * t + r) + 1 : 0 } void 0 === r && (r = 1.70158); var t = "out" === e ? Tm : "in" === e ? function (t) { return 1 - Tm(1 - t) } : Ub(Tm); return t.config = function (t) { return Wb(e, t) }, t } var F, L, l, I, h, n, a, i, o, f, d, c, p, _, m, g, b, M, k, O, A, C, D, z, E, B, j, Y, X = { autoSleep: 120, force3D: "auto", nullTargetWarn: 1, units: { lineHeight: "" } }, Z = { duration: .5, overwrite: !1, delay: 0 }, N = 1e8, U = 1 / N, q = 2 * Math.PI, V = q / 4, W = 0, G = Math.sqrt, H = Math.cos, K = Math.sin, J = "function" == typeof ArrayBuffer && ArrayBuffer.isView || function () { }, $ = Array.isArray, tt = /(?:-?\.?\d|\.)+/gi, et = /[-+=.]*\d+[.e\-+]*\d*[e\-+]*\d*/g, rt = /[-+=.]*\d+[.e-]*\d*[a-z%]*/g, it = /[-+=.]*\d+\.?\d*(?:e-|e\+)?\d*/gi, nt = /[+-]=-?[.\d]+/, at = /[^,'"\[\]\s]+/gi, st = /^[+\-=e\s\d]*\d+[.\d]*([a-z]*|%)\s*$/i, ot = {}, ut = { suppressEvents: !0, isStart: !0, kill: !1 }, ht = { suppressEvents: !0, kill: !1 }, lt = { suppressEvents: !0 }, ft = {}, dt = [], ct = {}, pt = {}, _t = {}, mt = 30, gt = [], vt = "", yt = function _merge(t, e) { for (var r in e) t[r] = e[r]; return t }, Tt = function _animationCycle(t, e) { var r = Math.floor(t = ja(t / e)); return t && r === t ? r - 1 : r }, bt = function _isFromOrFromStart(t) { var e = t.data; return "isFromStart" === e || "isStart" === e }, wt = { _start: 0, endTime: T, totalDuration: T }, xt = function _parsePosition(t, e, i) { var n, a, s, o = t.labels, u = t._recent || wt, h = t.duration() >= N ? u.endTime(!1) : t._dur; return r(e) && (isNaN(e) || e in o) ? (a = e.charAt(0), s = "%" === e.substr(-1), n = e.indexOf("="), "<" === a || ">" === a ? (0 <= n && (e = e.replace(/=/, "")), ("<" === a ? u._start : u.endTime(0 <= u._repeat)) + (parseFloat(e.substr(1)) || 0) * (s ? (n < 0 ? u : i).totalDuration() / 100 : 1)) : n < 0 ? (e in o || (o[e] = h), o[e]) : (a = parseFloat(e.charAt(n - 1) + e.substr(n + 1)), s && i && (a = a / 100 * ($(i) ? i[0] : i).totalDuration()), 1 < n ? _parsePosition(t, e.substr(0, n - 1), i) + a : h + a)) : null == e ? h : +e }, Mt = function _clamp(t, e, r) { return r < t ? t : e < r ? e : r }, kt = [].slice, Ot = function toArray(t, e, i) { return l && !e && l.selector ? l.selector(t) : !r(t) || i || !n && Ft() ? $(t) ? function _flatten(t, e, i) { return void 0 === i && (i = []), t.forEach(function (t) { return r(t) && !e || ab(t, 1) ? i.push.apply(i, Ot(t)) : i.push(t) }) || i }(t, i) : ab(t) ? kt.call(t, 0) : t ? [t] : [] : kt.call((e || a).querySelectorAll(t), 0) }, At = function mapRange(e, t, r, i, n) { var a = t - e, s = i - r; return Xa(n, function (t) { return r + ((t - e) / a * s || 0) }) }, Pt = function _callback(t, e, r) { var i, n, a, s = t.vars, o = s[e], u = l, h = t._ctx; if (o) return i = s[e + "Params"], n = s.callbackScope || t, r && dt.length && ma(), h && (l = h), a = i ? o.apply(n, i) : o.call(n), l = u, a }, Ct = [], St = 255, Dt = { aqua: [0, St, St], lime: [0, St, 0], silver: [192, 192, 192], black: [0, 0, 0], maroon: [128, 0, 0], teal: [0, 128, 128], blue: [0, 0, St], navy: [0, 0, 128], white: [St, St, St], olive: [128, 128, 0], yellow: [St, St, 0], orange: [St, 165, 0], gray: [128, 128, 128], purple: [128, 0, 128], green: [0, 128, 0], red: [St, 0, 0], pink: [St, 192, 203], cyan: [0, St, St], transparent: [St, St, St, 0] }, zt = function () { var t, e = "(?:\\b(?:(?:rgb|rgba|hsl|hsla)\\(.+?\\))|\\B#(?:[0-9a-f]{3,4}){1,2}\\b"; for (t in Dt) e += "|" + t + "\\b"; return new RegExp(e + ")", "gi") }(), Et = /hsl[a]?\(/, Rt = (k = Date.now, O = 500, A = 33, C = k(), D = C, E = z = 1e3 / 240, g = { time: 0, frame: 0, tick: function tick() { Al(!0) }, deltaRatio: function deltaRatio(t) { return b / (1e3 / (t || 60)) }, wake: function wake() { o && (!n && x() && (h = n = window, a = h.document || {}, ot.gsap = ze, (h.gsapVersions || (h.gsapVersions = [])).push(ze.version), P(i || h.GreenSockGlobals || !h.gsap && h || {}), Ct.forEach(xb)), m = "undefined" != typeof requestAnimationFrame && requestAnimationFrame, p && g.sleep(), _ = m || function (t) { return setTimeout(t, E - 1e3 * g.time + 1 | 0) }, c = 1, Al(2)) }, sleep: function sleep() { (m ? cancelAnimationFrame : clearTimeout)(p), c = 0, _ = T }, lagSmoothing: function lagSmoothing(t, e) { O = t || 1 / 0, A = Math.min(e || 33, O) }, fps: function fps(t) { z = 1e3 / (t || 240), E = 1e3 * g.time + z }, add: function add(n, t, e) { var a = t ? function (t, e, r, i) { n(t, e, r, i), g.remove(a) } : n; return g.remove(n), B[e ? "unshift" : "push"](a), Ft(), a }, remove: function remove(t, e) { ~(e = B.indexOf(t)) && B.splice(e, 1) && e <= M && M-- }, _listeners: B = [] }), Ft = function _wake() { return !c && Rt.wake() }, Lt = {}, It = /^[\d.\-M][\d.\-,\s]/, Bt = /["']/g, jt = function _invertEase(e) { return function (t) { return 1 - e(1 - t) } }, Yt = function _parseEase(t, e) { return t && (s(t) ? t : Lt[t] || Pb(t)) || e }; function Al(t) { var e, r, i, n, a = k() - D, s = !0 === t; if ((O < a || a < 0) && (C += a - A), (0 < (e = (i = (D += a) - C) - E) || s) && (n = ++g.frame, b = i - 1e3 * g.time, g.time = i /= 1e3, E += e + (z <= e ? 4 : z - e), r = 1), s || (p = _(Al)), r) for (M = 0; M < B.length; M++)B[M](i, b, n, t) } function jn(t) { return t < Y ? j * t * t : t < .7272727272727273 ? j * Math.pow(t - 1.5 / 2.75, 2) + .75 : t < .9090909090909092 ? j * (t -= 2.25 / 2.75) * t + .9375 : j * Math.pow(t - 2.625 / 2.75, 2) + .984375 } ha("Linear,Quad,Cubic,Quart,Quint,Strong", function (t, e) { var r = e < 5 ? e + 1 : e; Tb(t + ",Power" + (r - 1), e ? function (t) { return Math.pow(t, r) } : function (t) { return t }, function (t) { return 1 - Math.pow(1 - t, r) }, function (t) { return t < .5 ? Math.pow(2 * t, r) / 2 : 1 - Math.pow(2 * (1 - t), r) / 2 }) }), Lt.Linear.easeNone = Lt.none = Lt.Linear.easeIn, Tb("Elastic", Vb("in"), Vb("out"), Vb()), j = 7.5625, Y = 1 / 2.75, Tb("Bounce", function (t) { return 1 - jn(1 - t) }, jn), Tb("Expo", function (t) { return Math.pow(2, 10 * (t - 1)) * t + t * t * t * t * t * t * (1 - t) }), Tb("Circ", function (t) { return -(G(1 - t * t) - 1) }), Tb("Sine", function (t) { return 1 === t ? 1 : 1 - H(t * V) }), Tb("Back", Wb("in"), Wb("out"), Wb()), Lt.SteppedEase = Lt.steps = ot.SteppedEase = { config: function config(t, e) { void 0 === t && (t = 1); var r = 1 / t, i = t + (e ? 0 : 1), n = e ? 1 : 0; return function (t) { return ((i * Mt(0, .99999999, t) | 0) + n) * r } } }, Z.ease = Lt["quad.out"], ha("onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt", function (t) { return vt += t + "," + t + "Params," }); var Xt, Zt = function GSCache(t, e) { this.id = W++, (t._gsap = this).target = t, this.harness = e, this.get = e ? e.get : ga, this.set = e ? e.getSetter : ie }, Nt = ((Xt = Animation.prototype).delay = function delay(t) { return t || 0 === t ? (this.parent && this.parent.smoothChildTiming && this.startTime(this._start + t - this._delay), this._delay = t, this) : this._delay }, Xt.duration = function duration(t) { return arguments.length ? this.totalDuration(0 < this._repeat ? t + (t + this._rDelay) * this._repeat : t) : this.totalDuration() && this._dur }, Xt.totalDuration = function totalDuration(t) { return arguments.length ? (this._dirty = 0, Sa(this, this._repeat < 0 ? t : (t - this._repeat * this._rDelay) / (this._repeat + 1))) : this._tDur }, Xt.totalTime = function totalTime(t, e) { if (Ft(), !arguments.length) return this._tTime; var r = this._dp; if (r && r.smoothChildTiming && this._ts) { for (Ja(this, t), !r._dp || r.parent || Ka(r, this); r && r.parent;)r.parent._time !== r._start + (0 <= r._ts ? r._tTime / r._ts : (r.totalDuration() - r._tTime) / -r._ts) && r.totalTime(r._tTime, !0), r = r.parent; !this.parent && this._dp.autoRemoveChildren && (0 < this._ts && t < this._tDur || this._ts < 0 && 0 < t || !this._tDur && !t) && La(this._dp, this, this._start - this._delay) } return (this._tTime !== t || !this._dur && !e || this._initted && Math.abs(this._zTime) === U || !t && !this._initted && (this.add || this._ptLookup)) && (this._ts || (this._pTime = t), oa(this, t, e)), this }, Xt.time = function time(t, e) { return arguments.length ? this.totalTime(Math.min(this.totalDuration(), t + Fa(this)) % (this._dur + this._rDelay) || (t ? this._dur : 0), e) : this._time }, Xt.totalProgress = function totalProgress(t, e) { return arguments.length ? this.totalTime(this.totalDuration() * t, e) : this.totalDuration() ? Math.min(1, this._tTime / this._tDur) : 0 <= this.rawTime() && this._initted ? 1 : 0 }, Xt.progress = function progress(t, e) { return arguments.length ? this.totalTime(this.duration() * (!this._yoyo || 1 & this.iteration() ? t : 1 - t) + Fa(this), e) : this.duration() ? Math.min(1, this._time / this._dur) : 0 < this.rawTime() ? 1 : 0 }, Xt.iteration = function iteration(t, e) { var r = this.duration() + this._rDelay; return arguments.length ? this.totalTime(this._time + (t - 1) * r, e) : this._repeat ? Tt(this._tTime, r) + 1 : 1 }, Xt.timeScale = function timeScale(t, e) { if (!arguments.length) return this._rts === -U ? 0 : this._rts; if (this._rts === t) return this; var r = this.parent && this._ts ? Ha(this.parent._time, this) : this._tTime; return this._rts = +t || 0, this._ts = this._ps || t === -U ? 0 : this._rts, this.totalTime(Mt(-Math.abs(this._delay), this.totalDuration(), r), !1 !== e), Ia(this), function _recacheAncestors(t) { for (var e = t.parent; e && e.parent;)e._dirty = 1, e.totalDuration(), e = e.parent; return t }(this) }, Xt.paused = function paused(t) { return arguments.length ? (this._ps !== t && ((this._ps = t) ? (this._pTime = this._tTime || Math.max(-this._delay, this.rawTime()), this._ts = this._act = 0) : (Ft(), this._ts = this._rts, this.totalTime(this.parent && !this.parent.smoothChildTiming ? this.rawTime() : this._tTime || this._pTime, 1 === this.progress() && Math.abs(this._zTime) !== U && (this._tTime -= U)))), this) : this._ps }, Xt.startTime = function startTime(t) { if (arguments.length) { this._start = t; var e = this.parent || this._dp; return !e || !e._sort && this.parent || La(e, this, t - this._delay), this } return this._start }, Xt.endTime = function endTime(t) { return this._start + (w(t) ? this.totalDuration() : this.duration()) / Math.abs(this._ts || 1) }, Xt.rawTime = function rawTime(t) { var e = this.parent || this._dp; return e ? t && (!this._ts || this._repeat && this._time && this.totalProgress() < 1) ? this._tTime % (this._dur + this._rDelay) : this._ts ? Ha(e.rawTime(t), this) : this._tTime : this._tTime }, Xt.revert = function revert(t) { void 0 === t && (t = lt); var e = L; return L = t, na(this) && (this.timeline && this.timeline.revert(t), this.totalTime(-.01, t.suppressEvents)), "nested" !== this.data && !1 !== t.kill && this.kill(), L = e, this }, Xt.globalTime = function globalTime(t) { for (var e = this, r = arguments.length ? t : e.rawTime(); e;)r = e._start + r / (Math.abs(e._ts) || 1), e = e._dp; return !this.parent && this._sat ? this._sat.globalTime(t) : r }, Xt.repeat = function repeat(t) { return arguments.length ? (this._repeat = t === 1 / 0 ? -2 : t, Ta(this)) : -2 === this._repeat ? 1 / 0 : this._repeat }, Xt.repeatDelay = function repeatDelay(t) { if (arguments.length) { var e = this._time; return this._rDelay = t, Ta(this), e ? this.time(e) : this } return this._rDelay }, Xt.yoyo = function yoyo(t) { return arguments.length ? (this._yoyo = t, this) : this._yoyo }, Xt.seek = function seek(t, e) { return this.totalTime(xt(this, t), w(e)) }, Xt.restart = function restart(t, e) { return this.play().totalTime(t ? -this._delay : 0, w(e)), this._dur || (this._zTime = -U), this }, Xt.play = function play(t, e) { return null != t && this.seek(t, e), this.reversed(!1).paused(!1) }, Xt.reverse = function reverse(t, e) { return null != t && this.seek(t || this.totalDuration(), e), this.reversed(!0).paused(!1) }, Xt.pause = function pause(t, e) { return null != t && this.seek(t, e), this.paused(!0) }, Xt.resume = function resume() { return this.paused(!1) }, Xt.reversed = function reversed(t) { return arguments.length ? (!!t !== this.reversed() && this.timeScale(-this._rts || (t ? -U : 0)), this) : this._rts < 0 }, Xt.invalidate = function invalidate() { return this._initted = this._act = 0, this._zTime = -U, this }, Xt.isActive = function isActive() { var t, e = this.parent || this._dp, r = this._start; return !(e && !(this._ts && this._initted && e.isActive() && (t = e.rawTime(!0)) >= r && t < this.endTime(!0) - U)) }, Xt.eventCallback = function eventCallback(t, e, r) { var i = this.vars; return 1 < arguments.length ? (e ? (i[t] = e, r && (i[t + "Params"] = r), "onUpdate" === t && (this._onUpdate = e)) : delete i[t], this) : i[t] }, Xt.then = function then(t) { var i = this; return new Promise(function (e) { function Eo() { var t = i.then; i.then = null, s(r) && (r = r(i)) && (r.then || r === i) && (i.then = t), e(r), i.then = t } var r = s(t) ? t : qa; i._initted && 1 === i.totalProgress() && 0 <= i._ts || !i._tTime && i._ts < 0 ? Eo() : i._prom = Eo }) }, Xt.kill = function kill() { ub(this) }, Animation); function Animation(t) { this.vars = t, this._delay = +t.delay || 0, (this._repeat = t.repeat === 1 / 0 ? -2 : t.repeat || 0) && (this._rDelay = t.repeatDelay || 0, this._yoyo = !!t.yoyo || !!t.yoyoEase), this._ts = 1, Sa(this, +t.duration, 1, 1), this.data = t.data, l && (this._ctx = l).data.push(this), c || Rt.wake() } ra(Nt.prototype, { _time: 0, _start: 0, _end: 0, _tTime: 0, _tDur: 0, _dirty: 0, _repeat: 0, _yoyo: !1, parent: null, _initted: !1, _rDelay: 0, _ts: 1, _dp: 0, ratio: 0, _zTime: -U, _prom: 0, _ps: !1, _rts: 1 }); var Qt = function (i) { function Timeline(t, e) { var r; return void 0 === t && (t = {}), (r = i.call(this, t) || this).labels = {}, r.smoothChildTiming = !!t.smoothChildTiming, r.autoRemoveChildren = !!t.autoRemoveChildren, r._sort = w(t.sortChildren), I && La(t.parent || I, _assertThisInitialized(r), e), t.reversed && r.reverse(), t.paused && r.paused(!0), t.scrollTrigger && Ma(_assertThisInitialized(r), t.scrollTrigger), r } _inheritsLoose(Timeline, i); var e = Timeline.prototype; return e.to = function to(t, e, r) { return Wa(0, arguments, this), this }, e.from = function from(t, e, r) { return Wa(1, arguments, this), this }, e.fromTo = function fromTo(t, e, r, i) { return Wa(2, arguments, this), this }, e.set = function set(t, e, r) { return e.duration = 0, e.parent = this, wa(e).repeatDelay || (e.repeat = 0), e.immediateRender = !!e.immediateRender, new Jt(t, e, xt(this, r), 1), this }, e.call = function call(t, e, r) { return La(this, Jt.delayedCall(0, t, e), r) }, e.staggerTo = function staggerTo(t, e, r, i, n, a, s) { return r.duration = e, r.stagger = r.stagger || i, r.onComplete = a, r.onCompleteParams = s, r.parent = this, new Jt(t, r, xt(this, n)), this }, e.staggerFrom = function staggerFrom(t, e, r, i, n, a, s) { return r.runBackwards = 1, wa(r).immediateRender = w(r.immediateRender), this.staggerTo(t, e, r, i, n, a, s) }, e.staggerFromTo = function staggerFromTo(t, e, r, i, n, a, s, o) { return i.startAt = r, wa(i).immediateRender = w(i.immediateRender), this.staggerTo(t, e, i, n, a, s, o) }, e.render = function render(t, e, r) { var i, n, a, s, o, u, h, l, f, d, c, p, _ = this._time, m = this._dirty ? this.totalDuration() : this._tDur, g = this._dur, v = t <= 0 ? 0 : ja(t), y = this._zTime < 0 != t < 0 && (this._initted || !g); if (this !== I && m < v && 0 <= t && (v = m), v !== this._tTime || r || y) { if (_ !== this._time && g && (v += this._time - _, t += this._time - _), i = v, f = this._start, u = !(l = this._ts), y && (g || (_ = this._zTime), !t && e || (this._zTime = t)), this._repeat) { if (c = this._yoyo, o = g + this._rDelay, this._repeat < -1 && t < 0) return this.totalTime(100 * o + t, e, r); if (i = ja(v % o), v === m ? (s = this._repeat, i = g) : ((s = ~~(d = ja(v / o))) && s === d && (i = g, s--), g < i && (i = g)), d = Tt(this._tTime, o), !_ && this._tTime && d !== s && this._tTime - d * o - this._dur <= 0 && (d = s), c && 1 & s && (i = g - i, p = 1), s !== d && !this._lock) { var T = c && 1 & d, b = T === (c && 1 & s); if (s < d && (T = !T), _ = T ? 0 : v % g ? g : v, this._lock = 1, this.render(_ || (p ? 0 : ja(s * o)), e, !g)._lock = 0, this._tTime = v, !e && this.parent && Pt(this, "onRepeat"), this.vars.repeatRefresh && !p && (this.invalidate()._lock = 1), _ && _ !== this._time || u != !this._ts || this.vars.onRepeat && !this.parent && !this._act) return this; if (g = this._dur, m = this._tDur, b && (this._lock = 2, _ = T ? g : -1e-4, this.render(_, !0), this.vars.repeatRefresh && !p && this.invalidate()), this._lock = 0, !this._ts && !u) return this; Rb(this, p) } } if (this._hasPause && !this._forcing && this._lock < 2 && (h = function _findNextPauseTween(t, e, r) { var i; if (e < r) for (i = t._first; i && i._start <= r;) { if ("isPause" === i.data && i._start > e) return i; i = i._next } else for (i = t._last; i && i._start >= r;) { if ("isPause" === i.data && i._start < e) return i; i = i._prev } }(this, ja(_), ja(i))) && (v -= i - (i = h._start)), this._tTime = v, this._time = i, this._act = !l, this._initted || (this._onUpdate = this.vars.onUpdate, this._initted = 1, this._zTime = t, _ = 0), !_ && v && !e && !d && (Pt(this, "onStart"), this._tTime !== v)) return this; if (_ <= i && 0 <= t) for (n = this._first; n;) { if (a = n._next, (n._act || i >= n._start) && n._ts && h !== n) { if (n.parent !== this) return this.render(t, e, r); if (n.render(0 < n._ts ? (i - n._start) * n._ts : (n._dirty ? n.totalDuration() : n._tDur) + (i - n._start) * n._ts, e, r), i !== this._time || !this._ts && !u) { h = 0, a && (v += this._zTime = -U); break } } n = a } else { n = this._last; for (var w = t < 0 ? t : i; n;) { if (a = n._prev, (n._act || w <= n._end) && n._ts && h !== n) { if (n.parent !== this) return this.render(t, e, r); if (n.render(0 < n._ts ? (w - n._start) * n._ts : (n._dirty ? n.totalDuration() : n._tDur) + (w - n._start) * n._ts, e, r || L && na(n)), i !== this._time || !this._ts && !u) { h = 0, a && (v += this._zTime = w ? -U : U); break } } n = a } } if (h && !e && (this.pause(), h.render(_ <= i ? 0 : -U)._zTime = _ <= i ? 1 : -1, this._ts)) return this._start = f, Ia(this), this.render(t, e, r); this._onUpdate && !e && Pt(this, "onUpdate", !0), (v === m && this._tTime >= this.totalDuration() || !v && _) && (f !== this._start && Math.abs(l) === Math.abs(this._ts) || this._lock || (!t && g || !(v === m && 0 < this._ts || !v && this._ts < 0) || Aa(this, 1), e || t < 0 && !_ || !v && !_ && m || (Pt(this, v === m && 0 <= t ? "onComplete" : "onReverseComplete", !0), !this._prom || v < m && 0 < this.timeScale() || this._prom()))) } return this }, e.add = function add(e, i) { var n = this; if (t(i) || (i = xt(this, i, e)), !(e instanceof Nt)) { if ($(e)) return e.forEach(function (t) { return n.add(t, i) }), this; if (r(e)) return this.addLabel(e, i); if (!s(e)) return this; e = Jt.delayedCall(0, e) } return this !== e ? La(this, e, i) : this }, e.getChildren = function getChildren(t, e, r, i) { void 0 === t && (t = !0), void 0 === e && (e = !0), void 0 === r && (r = !0), void 0 === i && (i = -N); for (var n = [], a = this._first; a;)a._start >= i && (a instanceof Jt ? e && n.push(a) : (r && n.push(a), t && n.push.apply(n, a.getChildren(!0, e, r)))), a = a._next; return n }, e.getById = function getById(t) { for (var e = this.getChildren(1, 1, 1), r = e.length; r--;)if (e[r].vars.id === t) return e[r] }, e.remove = function remove(t) { return r(t) ? this.removeLabel(t) : s(t) ? this.killTweensOf(t) : (t.parent === this && za(this, t), t === this._recent && (this._recent = this._last), Ba(this)) }, e.totalTime = function totalTime(t, e) { return arguments.length ? (this._forcing = 1, !this._dp && this._ts && (this._start = ja(Rt.time - (0 < this._ts ? t / this._ts : (this.totalDuration() - t) / -this._ts))), i.prototype.totalTime.call(this, t, e), this._forcing = 0, this) : this._tTime }, e.addLabel = function addLabel(t, e) { return this.labels[t] = xt(this, e), this }, e.removeLabel = function removeLabel(t) { return delete this.labels[t], this }, e.addPause = function addPause(t, e, r) { var i = Jt.delayedCall(0, e || T, r); return i.data = "isPause", this._hasPause = 1, La(this, i, xt(this, t)) }, e.removePause = function removePause(t) { var e = this._first; for (t = xt(this, t); e;)e._start === t && "isPause" === e.data && Aa(e), e = e._next }, e.killTweensOf = function killTweensOf(t, e, r) { for (var i = this.getTweensOf(t, r), n = i.length; n--;)Ut !== i[n] && i[n].kill(t, e); return this }, e.getTweensOf = function getTweensOf(e, r) { for (var i, n = [], a = Ot(e), s = this._first, o = t(r); s;)s instanceof Jt ? la(s._targets, a) && (o ? (!Ut || s._initted && s._ts) && s.globalTime(0) <= r && s.globalTime(s.totalDuration()) > r : !r || s.isActive()) && n.push(s) : (i = s.getTweensOf(a, r)).length && n.push.apply(n, i), s = s._next; return n }, e.tweenTo = function tweenTo(t, e) { e = e || {}; var r, i = this, n = xt(i, t), a = e.startAt, s = e.onStart, o = e.onStartParams, u = e.immediateRender, h = Jt.to(i, ra({ ease: e.ease || "none", lazy: !1, immediateRender: !1, time: n, overwrite: "auto", duration: e.duration || Math.abs((n - (a && "time" in a ? a.time : i._time)) / i.timeScale()) || U, onStart: function onStart() { if (i.pause(), !r) { var t = e.duration || Math.abs((n - (a && "time" in a ? a.time : i._time)) / i.timeScale()); h._dur !== t && Sa(h, t, 0, 1).render(h._time, !0, !0), r = 1 } s && s.apply(h, o || []) } }, e)); return u ? h.render(0) : h }, e.tweenFromTo = function tweenFromTo(t, e, r) { return this.tweenTo(e, ra({ startAt: { time: xt(this, t) } }, r)) }, e.recent = function recent() { return this._recent }, e.nextLabel = function nextLabel(t) { return void 0 === t && (t = this._time), sb(this, xt(this, t)) }, e.previousLabel = function previousLabel(t) { return void 0 === t && (t = this._time), sb(this, xt(this, t), 1) }, e.currentLabel = function currentLabel(t) { return arguments.length ? this.seek(t, !0) : this.previousLabel(this._time + U) }, e.shiftChildren = function shiftChildren(t, e, r) { void 0 === r && (r = 0); for (var i, n = this._first, a = this.labels; n;)n._start >= r && (n._start += t, n._end += t), n = n._next; if (e) for (i in a) a[i] >= r && (a[i] += t); return Ba(this) }, e.invalidate = function invalidate(t) { var e = this._first; for (this._lock = 0; e;)e.invalidate(t), e = e._next; return i.prototype.invalidate.call(this, t) }, e.clear = function clear(t) { void 0 === t && (t = !0); for (var e, r = this._first; r;)e = r._next, this.remove(r), r = e; return this._dp && (this._time = this._tTime = this._pTime = 0), t && (this.labels = {}), Ba(this) }, e.totalDuration = function totalDuration(t) { var e, r, i, n = 0, a = this, s = a._last, o = N; if (arguments.length) return a.timeScale((a._repeat < 0 ? a.duration() : a.totalDuration()) / (a.reversed() ? -t : t)); if (a._dirty) { for (i = a.parent; s;)e = s._prev, s._dirty && s.totalDuration(), o < (r = s._start) && a._sort && s._ts && !a._lock ? (a._lock = 1, La(a, s, r - s._delay, 1)._lock = 0) : o = r, r < 0 && s._ts && (n -= r, (!i && !a._dp || i && i.smoothChildTiming) && (a._start += r / a._ts, a._time -= r, a._tTime -= r), a.shiftChildren(-r, !1, -Infinity), o = 0), s._end > n && s._ts && (n = s._end), s = e; Sa(a, a === I && a._time > n ? a._time : n, 1, 1), a._dirty = 0 } return a._tDur }, Timeline.updateRoot = function updateRoot(t) { if (I._ts && (oa(I, Ha(t, I)), f = Rt.frame), Rt.frame >= mt) { mt += X.autoSleep || 120; var e = I._first; if ((!e || !e._ts) && X.autoSleep && Rt._listeners.length < 2) { for (; e && !e._ts;)e = e._next; e || Rt.sleep() } } }, Timeline }(Nt); ra(Qt.prototype, { _lock: 0, _hasPause: 0, _forcing: 0 }); function bc(t, e, i, n, a, o) { var u, h, l, f; if (pt[t] && !1 !== (u = new pt[t]).init(a, u.rawVars ? e[t] : function _processVars(t, e, i, n, a) { if (s(t) && (t = Gt(t, a, e, i, n)), !v(t) || t.style && t.nodeType || $(t) || J(t)) return r(t) ? Gt(t, a, e, i, n) : t; var o, u = {}; for (o in t) u[o] = Gt(t[o], a, e, i, n); return u }(e[t], n, a, o, i), i, n, o) && (i._pt = h = new ge(i._pt, a, t, 0, 1, u.render, u, 0, u.priority), i !== d)) for (l = i._ptLookup[i._targets.indexOf(a)], f = u._props.length; f--;)l[u._props[f]] = h; return u } function hc(t, r, e, i) { var n, a, s = r.ease || i || "power1.inOut"; if ($(r)) a = e[t] || (e[t] = []), r.forEach(function (t, e) { return a.push({ t: e / (r.length - 1) * 100, v: t, e: s }) }); else for (n in r) a = e[n] || (e[n] = []), "ease" === n || a.push({ t: parseFloat(t), v: r[n], e: s }) } var Ut, qt, Vt = function _addPropTween(t, e, i, n, a, o, u, h, l, f) { s(n) && (n = n(a || 0, t, o)); var d, c = t[e], p = "get" !== i ? i : s(c) ? l ? t[e.indexOf("set") || !s(t["get" + e.substr(3)]) ? e : "get" + e.substr(3)](l) : t[e]() : c, _ = s(c) ? l ? re : te : $t; if (r(n) && (~n.indexOf("random(") && (n = pb(n)), "=" === n.charAt(1) && (!(d = ka(p, n) + (Za(p) || 0)) && 0 !== d || (n = d))), !f || p !== n || qt) return isNaN(p * n) || "" === n ? (c || e in t || Q(e, n), function _addComplexStringPropTween(t, e, r, i, n, a, s) { var o, u, h, l, f, d, c, p, _ = new ge(this._pt, t, e, 0, 1, oe, null, n), m = 0, g = 0; for (_.b = r, _.e = i, r += "", (c = ~(i += "").indexOf("random(")) && (i = pb(i)), a && (a(p = [r, i], t, e), r = p[0], i = p[1]), u = r.match(it) || []; o = it.exec(i);)l = o[0], f = i.substring(m, o.index), h ? h = (h + 1) % 5 : "rgba(" === f.substr(-5) && (h = 1), l !== u[g++] && (d = parseFloat(u[g - 1]) || 0, _._pt = { _next: _._pt, p: f || 1 === g ? f : ",", s: d, c: "=" === l.charAt(1) ? ka(d, l) - d : parseFloat(l) - d, m: h && h < 4 ? Math.round : 0 }, m = it.lastIndex); return _.c = m < i.length ? i.substring(m, i.length) : "", _.fp = s, (nt.test(i) || c) && (_.e = 0), this._pt = _ }.call(this, t, e, p, n, _, h || X.stringFilter, l)) : (d = new ge(this._pt, t, e, +p || 0, n - (p || 0), "boolean" == typeof c ? se : ne, 0, _), l && (d.fp = l), u && d.modifier(u, this, t), this._pt = d) }, Wt = function _initTween(t, e, r) { var i, n, a, s, o, u, h, l, f, d, c, p, _, m = t.vars, g = m.ease, v = m.startAt, y = m.immediateRender, T = m.lazy, b = m.onUpdate, x = m.runBackwards, M = m.yoyoEase, k = m.keyframes, O = m.autoRevert, A = t._dur, P = t._startAt, C = t._targets, S = t.parent, D = S && "nested" === S.data ? S.vars.targets : C, z = "auto" === t._overwrite && !F, E = t.timeline; if (!E || k && g || (g = "none"), t._ease = Yt(g, Z.ease), t._yEase = M ? jt(Yt(!0 === M ? g : M, Z.ease)) : 0, M && t._yoyo && !t._repeat && (M = t._yEase, t._yEase = t._ease, t._ease = M), t._from = !E && !!m.runBackwards, !E || k && !m.stagger) { if (p = (l = C[0] ? fa(C[0]).harness : 0) && m[l.prop], i = va(m, ft), P && (P._zTime < 0 && P.progress(1), e < 0 && x && y && !O ? P.render(-1, !0) : P.revert(x && A ? ht : ut), P._lazy = 0), v) { if (Aa(t._startAt = Jt.set(C, ra({ data: "isStart", overwrite: !1, parent: S, immediateRender: !0, lazy: !P && w(T), startAt: null, delay: 0, onUpdate: b && function () { return Pt(t, "onUpdate") }, stagger: 0 }, v))), t._startAt._dp = 0, t._startAt._sat = t, e < 0 && (L || !y && !O) && t._startAt.revert(ht), y && A && e <= 0 && r <= 0) return void (e && (t._zTime = e)) } else if (x && A && !P) if (e && (y = !1), a = ra({ overwrite: !1, data: "isFromStart", lazy: y && !P && w(T), immediateRender: y, stagger: 0, parent: S }, i), p && (a[l.prop] = p), Aa(t._startAt = Jt.set(C, a)), t._startAt._dp = 0, t._startAt._sat = t, e < 0 && (L ? t._startAt.revert(ht) : t._startAt.render(-1, !0)), t._zTime = e, y) { if (!e) return } else _initTween(t._startAt, U, U); for (t._pt = t._ptCache = 0, T = A && w(T) || T && !A, n = 0; n < C.length; n++) { if (h = (o = C[n])._gsap || ea(C)[n]._gsap, t._ptLookup[n] = d = {}, ct[h.id] && dt.length && ma(), c = D === C ? n : D.indexOf(o), l && !1 !== (f = new l).init(o, p || i, t, c, D) && (t._pt = s = new ge(t._pt, o, f.name, 0, 1, f.render, f, 0, f.priority), f._props.forEach(function (t) { d[t] = s }), f.priority && (u = 1)), !l || p) for (a in i) pt[a] && (f = bc(a, i, t, c, o, D)) ? f.priority && (u = 1) : d[a] = s = Vt.call(t, o, a, "get", i[a], c, D, 0, m.stringFilter); t._op && t._op[n] && t.kill(o, t._op[n]), z && t._pt && (Ut = t, I.killTweensOf(o, d, t.globalTime(e)), _ = !t.parent, Ut = 0), t._pt && T && (ct[h.id] = 1) } u && _e(t), t._onInit && t._onInit(t) } t._onUpdate = b, t._initted = (!t._op || t._pt) && !_, k && e <= 0 && E.render(N, !0, !0) }, Gt = function _parseFuncOrString(t, e, i, n, a) { return s(t) ? t.call(e, i, n, a) : r(t) && ~t.indexOf("random(") ? pb(t) : t }, Ht = vt + "repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase,autoRevert", Kt = {}; ha(Ht + ",id,stagger,delay,duration,paused,scrollTrigger", function (t) { return Kt[t] = 1 }); var Jt = function (E) { function Tween(e, r, i, n) { var a; "number" == typeof r && (i.duration = r, r = i, i = null); var s, o, u, h, l, f, d, c, p = (a = E.call(this, n ? r : wa(r)) || this).vars, _ = p.duration, m = p.delay, g = p.immediateRender, T = p.stagger, b = p.overwrite, x = p.keyframes, M = p.defaults, k = p.scrollTrigger, O = p.yoyoEase, A = r.parent || I, P = ($(e) || J(e) ? t(e[0]) : "length" in r) ? [e] : Ot(e); if (a._targets = P.length ? ea(P) : R("GSAP target " + e + " not found. https://gsap.com", !X.nullTargetWarn) || [], a._ptLookup = [], a._overwrite = b, x || T || y(_) || y(m)) { if (r = a.vars, (s = a.timeline = new Qt({ data: "nested", defaults: M || {}, targets: A && "nested" === A.data ? A.vars.targets : P })).kill(), s.parent = s._dp = _assertThisInitialized(a), s._start = 0, T || y(_) || y(m)) { if (h = P.length, d = T && fb(T), v(T)) for (l in T) ~Ht.indexOf(l) && ((c = c || {})[l] = T[l]); for (o = 0; o < h; o++)(u = va(r, Kt)).stagger = 0, O && (u.yoyoEase = O), c && yt(u, c), f = P[o], u.duration = +Gt(_, _assertThisInitialized(a), o, f, P), u.delay = (+Gt(m, _assertThisInitialized(a), o, f, P) || 0) - a._delay, !T && 1 === h && u.delay && (a._delay = m = u.delay, a._start += m, u.delay = 0), s.to(f, u, d ? d(o, f, P) : 0), s._ease = Lt.none; s.duration() ? _ = m = 0 : a.timeline = 0 } else if (x) { wa(ra(s.vars.defaults, { ease: "none" })), s._ease = Yt(x.ease || r.ease || "none"); var C, S, D, z = 0; if ($(x)) x.forEach(function (t) { return s.to(P, t, ">") }), s.duration(); else { for (l in u = {}, x) "ease" === l || "easeEach" === l || hc(l, x[l], u, x.easeEach); for (l in u) for (C = u[l].sort(function (t, e) { return t.t - e.t }), o = z = 0; o < C.length; o++)(D = { ease: (S = C[o]).e, duration: (S.t - (o ? C[o - 1].t : 0)) / 100 * _ })[l] = S.v, s.to(P, D, z), z += D.duration; s.duration() < _ && s.to({}, { duration: _ - s.duration() }) } } _ || a.duration(_ = s.duration()) } else a.timeline = 0; return !0 !== b || F || (Ut = _assertThisInitialized(a), I.killTweensOf(P), Ut = 0), La(A, _assertThisInitialized(a), i), r.reversed && a.reverse(), r.paused && a.paused(!0), (g || !_ && !x && a._start === ja(A._time) && w(g) && function _hasNoPausedAncestors(t) { return !t || t._ts && _hasNoPausedAncestors(t.parent) }(_assertThisInitialized(a)) && "nested" !== A.data) && (a._tTime = -U, a.render(Math.max(0, -m) || 0)), k && Ma(_assertThisInitialized(a), k), a } _inheritsLoose(Tween, E); var e = Tween.prototype; return e.render = function render(t, e, r) { var i, n, a, s, o, u, h, l, f, d = this._time, c = this._tDur, p = this._dur, _ = t < 0, m = c - U < t && !_ ? c : t < U ? 0 : t; if (p) { if (m !== this._tTime || !t || r || !this._initted && this._tTime || this._startAt && this._zTime < 0 != _ || this._lazy) { if (i = m, l = this.timeline, this._repeat) { if (s = p + this._rDelay, this._repeat < -1 && _) return this.totalTime(100 * s + t, e, r); if (i = ja(m % s), m === c ? (a = this._repeat, i = p) : (a = ~~(o = ja(m / s))) && a === o ? (i = p, a--) : p < i && (i = p), (u = this._yoyo && 1 & a) && (f = this._yEase, i = p - i), o = Tt(this._tTime, s), i === d && !r && this._initted && a === o) return this._tTime = m, this; a !== o && (l && this._yEase && Rb(l, u), this.vars.repeatRefresh && !u && !this._lock && i !== s && this._initted && (this._lock = r = 1, this.render(ja(s * a), !0).invalidate()._lock = 0)) } if (!this._initted) { if (Na(this, _ ? t : i, r, e, m)) return this._tTime = 0, this; if (!(d === this._time || r && this.vars.repeatRefresh && a !== o)) return this; if (p !== this._dur) return this.render(t, e, r) } if (this._tTime = m, this._time = i, !this._act && this._ts && (this._act = 1, this._lazy = 0), this.ratio = h = (f || this._ease)(i / p), this._from && (this.ratio = h = 1 - h), !d && m && !e && !o && (Pt(this, "onStart"), this._tTime !== m)) return this; for (n = this._pt; n;)n.r(h, n.d), n = n._next; l && l.render(t < 0 ? t : l._dur * l._ease(i / this._dur), e, r) || this._startAt && (this._zTime = t), this._onUpdate && !e && (_ && Da(this, t, 0, r), Pt(this, "onUpdate")), this._repeat && a !== o && this.vars.onRepeat && !e && this.parent && Pt(this, "onRepeat"), m !== this._tDur && m || this._tTime !== m || (_ && !this._onUpdate && Da(this, t, 0, !0), !t && p || !(m === this._tDur && 0 < this._ts || !m && this._ts < 0) || Aa(this, 1), e || _ && !d || !(m || d || u) || (Pt(this, m === c ? "onComplete" : "onReverseComplete", !0), !this._prom || m < c && 0 < this.timeScale() || this._prom())) } } else !function _renderZeroDurationTween(t, e, r, i) { var n, a, s, o = t.ratio, u = e < 0 || !e && (!t._start && function _parentPlayheadIsBeforeStart(t) { var e = t.parent; return e && e._ts && e._initted && !e._lock && (e.rawTime() < 0 || _parentPlayheadIsBeforeStart(e)) }(t) && (t._initted || !bt(t)) || (t._ts < 0 || t._dp._ts < 0) && !bt(t)) ? 0 : 1, h = t._rDelay, l = 0; if (h && t._repeat && (l = Mt(0, t._tDur, e), a = Tt(l, h), t._yoyo && 1 & a && (u = 1 - u), a !== Tt(t._tTime, h) && (o = 1 - u, t.vars.repeatRefresh && t._initted && t.invalidate())), u !== o || L || i || t._zTime === U || !e && t._zTime) { if (!t._initted && Na(t, e, i, r, l)) return; for (s = t._zTime, t._zTime = e || (r ? U : 0), r = r || e && !s, t.ratio = u, t._from && (u = 1 - u), t._time = 0, t._tTime = l, n = t._pt; n;)n.r(u, n.d), n = n._next; e < 0 && Da(t, e, 0, !0), t._onUpdate && !r && Pt(t, "onUpdate"), l && t._repeat && !r && t.parent && Pt(t, "onRepeat"), (e >= t._tDur || e < 0) && t.ratio === u && (u && Aa(t, 1), r || L || (Pt(t, u ? "onComplete" : "onReverseComplete", !0), t._prom && t._prom())) } else t._zTime || (t._zTime = e) }(this, t, e, r); return this }, e.targets = function targets() { return this._targets }, e.invalidate = function invalidate(t) { return t && this.vars.runBackwards || (this._startAt = 0), this._pt = this._op = this._onUpdate = this._lazy = this.ratio = 0, this._ptLookup = [], this.timeline && this.timeline.invalidate(t), E.prototype.invalidate.call(this, t) }, e.resetTo = function resetTo(t, e, r, i, n) { c || Rt.wake(), this._ts || this.play(); var a, s = Math.min(this._dur, (this._dp._time - this._start) * this._ts); return this._initted || Wt(this, s), a = this._ease(s / this._dur), function _updatePropTweens(t, e, r, i, n, a, s, o) { var u, h, l, f, d = (t._pt && t._ptCache || (t._ptCache = {}))[e]; if (!d) for (d = t._ptCache[e] = [], l = t._ptLookup, f = t._targets.length; f--;) { if ((u = l[f][e]) && u.d && u.d._pt) for (u = u.d._pt; u && u.p !== e && u.fp !== e;)u = u._next; if (!u) return qt = 1, t.vars[e] = "+=0", Wt(t, s), qt = 0, o ? R(e + " not eligible for reset") : 1; d.push(u) } for (f = d.length; f--;)(u = (h = d[f])._pt || h).s = !i && 0 !== i || n ? u.s + (i || 0) + a * u.c : i, u.c = r - u.s, h.e && (h.e = ia(r) + Za(h.e)), h.b && (h.b = u.s + Za(h.b)) }(this, t, e, r, i, a, s, n) ? this.resetTo(t, e, r, i, 1) : (Ja(this, 0), this.parent || ya(this._dp, this, "_first", "_last", this._dp._sort ? "_start" : 0), this.render(0)) }, e.kill = function kill(t, e) { if (void 0 === e && (e = "all"), !(t || e && "all" !== e)) return this._lazy = this._pt = 0, this.parent ? ub(this) : this.scrollTrigger && this.scrollTrigger.kill(!!L), this; if (this.timeline) { var i = this.timeline.totalDuration(); return this.timeline.killTweensOf(t, e, Ut && !0 !== Ut.vars.overwrite)._first || ub(this), this.parent && i !== this.timeline.totalDuration() && Sa(this, this._dur * this.timeline._tDur / i, 0, 1), this } var n, a, s, o, u, h, l, f = this._targets, d = t ? Ot(t) : f, c = this._ptLookup, p = this._pt; if ((!e || "all" === e) && function _arraysMatch(t, e) { for (var r = t.length, i = r === e.length; i && r-- && t[r] === e[r];); return r < 0 }(f, d)) return "all" === e && (this._pt = 0), ub(this); for (n = this._op = this._op || [], "all" !== e && (r(e) && (u = {}, ha(e, function (t) { return u[t] = 1 }), e = u), e = function _addAliasesToVars(t, e) { var r, i, n, a, s = t[0] ? fa(t[0]).harness : 0, o = s && s.aliases; if (!o) return e; for (i in r = yt({}, e), o) if (i in r) for (n = (a = o[i].split(",")).length; n--;)r[a[n]] = r[i]; return r }(f, e)), l = f.length; l--;)if (~d.indexOf(f[l])) for (u in a = c[l], "all" === e ? (n[l] = e, o = a, s = {}) : (s = n[l] = n[l] || {}, o = e), o) (h = a && a[u]) && ("kill" in h.d && !0 !== h.d.kill(u) || za(this, h, "_pt"), delete a[u]), "all" !== s && (s[u] = 1); return this._initted && !this._pt && p && ub(this), this }, Tween.to = function to(t, e, r) { return new Tween(t, e, r) }, Tween.from = function from(t, e) { return Wa(1, arguments) }, Tween.delayedCall = function delayedCall(t, e, r, i) { return new Tween(e, 0, { immediateRender: !1, lazy: !1, overwrite: !1, delay: t, onComplete: e, onReverseComplete: e, onCompleteParams: r, onReverseCompleteParams: r, callbackScope: i }) }, Tween.fromTo = function fromTo(t, e, r) { return Wa(2, arguments) }, Tween.set = function set(t, e) { return e.duration = 0, e.repeatDelay || (e.repeat = 0), new Tween(t, e) }, Tween.killTweensOf = function killTweensOf(t, e, r) { return I.killTweensOf(t, e, r) }, Tween }(Nt); ra(Jt.prototype, { _targets: [], _lazy: 0, _startAt: 0, _op: 0, _onInit: 0 }), ha("staggerTo,staggerFrom,staggerFromTo", function (r) { Jt[r] = function () { var t = new Qt, e = kt.call(arguments, 0); return e.splice("staggerFromTo" === r ? 5 : 4, 0, 0), t[r].apply(t, e) } }); function pc(t, e, r) { return t.setAttribute(e, r) } function xc(t, e, r, i) { i.mSet(t, e, i.m.call(i.tween, r, i.mt), i) } var $t = function _setterPlain(t, e, r) { return t[e] = r }, te = function _setterFunc(t, e, r) { return t[e](r) }, re = function _setterFuncWithParam(t, e, r, i) { return t[e](i.fp, r) }, ie = function _getSetter(t, e) { return s(t[e]) ? te : u(t[e]) && t.setAttribute ? pc : $t }, ne = function _renderPlain(t, e) { return e.set(e.t, e.p, Math.round(1e6 * (e.s + e.c * t)) / 1e6, e) }, se = function _renderBoolean(t, e) { return e.set(e.t, e.p, !!(e.s + e.c * t), e) }, oe = function _renderComplexString(t, e) { var r = e._pt, i = ""; if (!t && e.b) i = e.b; else if (1 === t && e.e) i = e.e; else { for (; r;)i = r.p + (r.m ? r.m(r.s + r.c * t) : Math.round(1e4 * (r.s + r.c * t)) / 1e4) + i, r = r._next; i += e.c } e.set(e.t, e.p, i, e) }, ue = function _renderPropTweens(t, e) { for (var r = e._pt; r;)r.r(t, r.d), r = r._next }, he = function _addPluginModifier(t, e, r, i) { for (var n, a = this._pt; a;)n = a._next, a.p === i && a.modifier(t, e, r), a = n }, de = function _killPropTweensOf(t) { for (var e, r, i = this._pt; i;)r = i._next, i.p === t && !i.op || i.op === t ? za(this, i, "_pt") : i.dep || (e = 1), i = r; return !e }, _e = function _sortPropTweensByPriority(t) { for (var e, r, i, n, a = t._pt; a;) { for (e = a._next, r = i; r && r.pr > a.pr;)r = r._next; (a._prev = r ? r._prev : n) ? a._prev._next = a : i = a, (a._next = r) ? r._prev = a : n = a, a = e } t._pt = i }, ge = (PropTween.prototype.modifier = function modifier(t, e, r) { this.mSet = this.mSet || this.set, this.set = xc, this.m = t, this.mt = r, this.tween = e }, PropTween); function PropTween(t, e, r, i, n, a, s, o, u) { this.t = e, this.s = i, this.c = n, this.p = r, this.r = a || ne, this.d = s || this, this.set = o || $t, this.pr = u || 0, (this._next = t) && (t._prev = this) } ha(vt + "parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger", function (t) { return ft[t] = 1 }), ot.TweenMax = ot.TweenLite = Jt, ot.TimelineLite = ot.TimelineMax = Qt, I = new Qt({ sortChildren: !1, defaults: Z, autoRemoveChildren: !0, id: "root", smoothChildTiming: !0 }), X.stringFilter = Gb; function Fc(t) { return (be[t] || Me).map(function (t) { return t() }) } function Gc() { var t = Date.now(), o = []; 2 < t - Oe && (Fc("matchMediaInit"), Te.forEach(function (t) { var e, r, i, n, a = t.queries, s = t.conditions; for (r in a) (e = h.matchMedia(a[r]).matches) && (i = 1), e !== s[r] && (s[r] = e, n = 1); n && (t.revert(), i && o.push(t)) }), Fc("matchMediaRevert"), o.forEach(function (e) { return e.onMatch(e, function (t) { return e.add(null, t) }) }), Oe = t, Fc("matchMedia")) } var ve, Te = [], be = {}, Me = [], Oe = 0, Ae = 0, Pe = ((ve = Context.prototype).add = function add(t, i, n) { function Iw() { var t, e = l, r = a.selector; return e && e !== a && e.data.push(a), n && (a.selector = db(n)), l = a, t = i.apply(a, arguments), s(t) && a._r.push(t), l = e, a.selector = r, a.isReverted = !1, t } s(t) && (n = i, i = t, t = s); var a = this; return a.last = Iw, t === s ? Iw(a, function (t) { return a.add(null, t) }) : t ? a[t] = Iw : Iw }, ve.ignore = function ignore(t) { var e = l; l = null, t(this), l = e }, ve.getTweens = function getTweens() { var e = []; return this.data.forEach(function (t) { return t instanceof Context ? e.push.apply(e, t.getTweens()) : t instanceof Jt && !(t.parent && "nested" === t.parent.data) && e.push(t) }), e }, ve.clear = function clear() { this._r.length = this.data.length = 0 }, ve.kill = function kill(i, t) { var n = this; if (i ? function () { for (var t, e = n.getTweens(), r = n.data.length; r--;)"isFlip" === (t = n.data[r]).data && (t.revert(), t.getChildren(!0, !0, !1).forEach(function (t) { return e.splice(e.indexOf(t), 1) })); for (e.map(function (t) { return { g: t._dur || t._delay || t._sat && !t._sat.vars.immediateRender ? t.globalTime(0) : -1 / 0, t: t } }).sort(function (t, e) { return e.g - t.g || -1 / 0 }).forEach(function (t) { return t.t.revert(i) }), r = n.data.length; r--;)(t = n.data[r]) instanceof Qt ? "nested" !== t.data && (t.scrollTrigger && t.scrollTrigger.revert(), t.kill()) : t instanceof Jt || !t.revert || t.revert(i); n._r.forEach(function (t) { return t(i, n) }), n.isReverted = !0 }() : this.data.forEach(function (t) { return t.kill && t.kill() }), this.clear(), t) for (var e = Te.length; e--;)Te[e].id === this.id && Te.splice(e, 1) }, ve.revert = function revert(t) { this.kill(t || {}) }, Context); function Context(t, e) { this.selector = e && db(e), this.data = [], this._r = [], this.isReverted = !1, this.id = Ae++, t && this.add(t) } var Ce, Se = ((Ce = MatchMedia.prototype).add = function add(t, e, r) { v(t) || (t = { matches: t }); var i, n, a, s = new Pe(0, r || this.scope), o = s.conditions = {}; for (n in l && !s.selector && (s.selector = l.selector), this.contexts.push(s), e = s.add("onMatch", e), s.queries = t) "all" === n ? a = 1 : (i = h.matchMedia(t[n])) && (Te.indexOf(s) < 0 && Te.push(s), (o[n] = i.matches) && (a = 1), i.addListener ? i.addListener(Gc) : i.addEventListener("change", Gc)); return a && e(s, function (t) { return s.add(null, t) }), this }, Ce.revert = function revert(t) { this.kill(t || {}) }, Ce.kill = function kill(e) { this.contexts.forEach(function (t) { return t.kill(e, !0) }) }, MatchMedia); function MatchMedia(t) { this.contexts = [], this.scope = t, l && l.data.push(this) } var De = { registerPlugin: function registerPlugin() { for (var t = arguments.length, e = new Array(t), r = 0; r < t; r++)e[r] = arguments[r]; e.forEach(function (t) { return xb(t) }) }, timeline: function timeline(t) { return new Qt(t) }, getTweensOf: function getTweensOf(t, e) { return I.getTweensOf(t, e) }, getProperty: function getProperty(i, t, e, n) { r(i) && (i = Ot(i)[0]); var a = fa(i || {}).get, s = e ? qa : pa; return "native" === e && (e = ""), i ? t ? s((pt[t] && pt[t].get || a)(i, t, e, n)) : function (t, e, r) { return s((pt[t] && pt[t].get || a)(i, t, e, r)) } : i }, quickSetter: function quickSetter(r, e, i) { if (1 < (r = Ot(r)).length) { var n = r.map(function (t) { return ze.quickSetter(t, e, i) }), a = n.length; return function (t) { for (var e = a; e--;)n[e](t) } } r = r[0] || {}; var s = pt[e], o = fa(r), u = o.harness && (o.harness.aliases || {})[e] || e, h = s ? function (t) { var e = new s; d._pt = 0, e.init(r, i ? t + i : t, d, 0, [r]), e.render(1, e), d._pt && ue(1, d) } : o.set(r, u); return s ? h : function (t) { return h(r, u, i ? t + i : t, o, 1) } }, quickTo: function quickTo(t, i, e) { function ay(t, e, r) { return n.resetTo(i, t, e, r) } var r, n = ze.to(t, ra(((r = {})[i] = "+=0.1", r.paused = !0, r.stagger = 0, r), e || {})); return ay.tween = n, ay }, isTweening: function isTweening(t) { return 0 < I.getTweensOf(t, !0).length }, defaults: function defaults(t) { return t && t.ease && (t.ease = Yt(t.ease, Z.ease)), ua(Z, t || {}) }, config: function config(t) { return ua(X, t || {}) }, registerEffect: function registerEffect(t) { var i = t.name, n = t.effect, e = t.plugins, a = t.defaults, r = t.extendTimeline; (e || "").split(",").forEach(function (t) { return t && !pt[t] && !ot[t] && R(i + " effect requires " + t + " plugin.") }), _t[i] = function (t, e, r) { return n(Ot(t), ra(e || {}, a), r) }, r && (Qt.prototype[i] = function (t, e, r) { return this.add(_t[i](t, v(e) ? e : (r = e) && {}, this), r) }) }, registerEase: function registerEase(t, e) { Lt[t] = Yt(e) }, parseEase: function parseEase(t, e) { return arguments.length ? Yt(t, e) : Lt }, getById: function getById(t) { return I.getById(t) }, exportRoot: function exportRoot(t, e) { void 0 === t && (t = {}); var r, i, n = new Qt(t); for (n.smoothChildTiming = w(t.smoothChildTiming), I.remove(n), n._dp = 0, n._time = n._tTime = I._time, r = I._first; r;)i = r._next, !e && !r._dur && r instanceof Jt && r.vars.onComplete === r._targets[0] || La(n, r, r._start - r._delay), r = i; return La(I, n, 0), n }, context: function context(t, e) { return t ? new Pe(t, e) : l }, matchMedia: function matchMedia(t) { return new Se(t) }, matchMediaRefresh: function matchMediaRefresh() { return Te.forEach(function (t) { var e, r, i = t.conditions; for (r in i) i[r] && (i[r] = !1, e = 1); e && t.revert() }) || Gc() }, addEventListener: function addEventListener(t, e) { var r = be[t] || (be[t] = []); ~r.indexOf(e) || r.push(e) }, removeEventListener: function removeEventListener(t, e) { var r = be[t], i = r && r.indexOf(e); 0 <= i && r.splice(i, 1) }, utils: { wrap: function wrap(e, t, r) { var i = t - e; return $(e) ? mb(e, wrap(0, e.length), t) : Xa(r, function (t) { return (i + (t - e) % i) % i + e }) }, wrapYoyo: function wrapYoyo(e, t, r) { var i = t - e, n = 2 * i; return $(e) ? mb(e, wrapYoyo(0, e.length - 1), t) : Xa(r, function (t) { return e + (i < (t = (n + (t - e) % n) % n || 0) ? n - t : t) }) }, distribute: fb, random: ib, snap: hb, normalize: function normalize(t, e, r) { return At(t, e, 0, 1, r) }, getUnit: Za, clamp: function clamp(e, r, t) { return Xa(t, function (t) { return Mt(e, r, t) }) }, splitColor: Bb, toArray: Ot, selector: db, mapRange: At, pipe: function pipe() { for (var t = arguments.length, e = new Array(t), r = 0; r < t; r++)e[r] = arguments[r]; return function (t) { return e.reduce(function (t, e) { return e(t) }, t) } }, unitize: function unitize(e, r) { return function (t) { return e(parseFloat(t)) + (r || Za(t)) } }, interpolate: function interpolate(e, i, t, n) { var a = isNaN(e + i) ? 0 : function (t) { return (1 - t) * e + t * i }; if (!a) { var s, o, u, h, l, f = r(e), d = {}; if (!0 === t && (n = 1) && (t = null), f) e = { p: e }, i = { p: i }; else if ($(e) && !$(i)) { for (u = [], h = e.length, l = h - 2, o = 1; o < h; o++)u.push(interpolate(e[o - 1], e[o])); h--, a = function func(t) { t *= h; var e = Math.min(l, ~~t); return u[e](t - e) }, t = i } else n || (e = yt($(e) ? [] : {}, e)); if (!u) { for (s in i) Vt.call(d, e, s, "get", i[s]); a = function func(t) { return ue(t, d) || (f ? e.p : e) } } } return Xa(t, a) }, shuffle: eb }, install: P, effects: _t, ticker: Rt, updateRoot: Qt.updateRoot, plugins: pt, globalTimeline: I, core: { PropTween: ge, globals: S, Tween: Jt, Timeline: Qt, Animation: Nt, getCache: fa, _removeLinkedListItem: za, reverting: function reverting() { return L }, context: function context(t) { return t && l && (l.data.push(t), t._ctx = l), l }, suppressOverwrites: function suppressOverwrites(t) { return F = t } } }; ha("to,from,fromTo,delayedCall,set,killTweensOf", function (t) { return De[t] = Jt[t] }), Rt.add(Qt.updateRoot), d = De.to({}, { duration: 0 }); function Kc(t, e) { for (var r = t._pt; r && r.p !== e && r.op !== e && r.fp !== e;)r = r._next; return r } function Mc(t, a) { return { name: t, headless: 1, rawVars: 1, init: function init(t, n, e) { e._onInit = function (t) { var e, i; if (r(n) && (e = {}, ha(n, function (t) { return e[t] = 1 }), n = e), a) { for (i in e = {}, n) e[i] = a(n[i]); n = e } !function _addModifiers(t, e) { var r, i, n, a = t._targets; for (r in e) for (i = a.length; i--;)(n = (n = t._ptLookup[i][r]) && n.d) && (n._pt && (n = Kc(n, r)), n && n.modifier && n.modifier(e[r], t, a[i], r)) }(t, n) } } } } var ze = De.registerPlugin({ name: "attr", init: function init(t, e, r, i, n) { var a, s, o; for (a in this.tween = r, e) o = t.getAttribute(a) || "", (s = this.add(t, "setAttribute", (o || 0) + "", e[a], i, n, 0, 0, a)).op = a, s.b = o, this._props.push(a) }, render: function render(t, e) { for (var r = e._pt; r;)L ? r.set(r.t, r.p, r.b, r) : r.r(t, r.d), r = r._next } }, { name: "endArray", headless: 1, init: function init(t, e) { for (var r = e.length; r--;)this.add(t, r, t[r] || 0, e[r], 0, 0, 0, 0, 0, 1) } }, Mc("roundProps", gb), Mc("modifiers"), Mc("snap", hb)) || De; Jt.version = Qt.version = ze.version = "3.13.0", o = 1, x() && Ft(); function wd(t, e) { return e.set(e.t, e.p, Math.round(1e4 * (e.s + e.c * t)) / 1e4 + e.u, e) } function xd(t, e) { return e.set(e.t, e.p, 1 === t ? e.e : Math.round(1e4 * (e.s + e.c * t)) / 1e4 + e.u, e) } function yd(t, e) { return e.set(e.t, e.p, t ? Math.round(1e4 * (e.s + e.c * t)) / 1e4 + e.u : e.b, e) } function zd(t, e) { var r = e.s + e.c * t; e.set(e.t, e.p, ~~(r + (r < 0 ? -.5 : .5)) + e.u, e) } function Ad(t, e) { return e.set(e.t, e.p, t ? e.e : e.b, e) } function Bd(t, e) { return e.set(e.t, e.p, 1 !== t ? e.b : e.e, e) } function Cd(t, e, r) { return t.style[e] = r } function Dd(t, e, r) { return t.style.setProperty(e, r) } function Ed(t, e, r) { return t._gsap[e] = r } function Fd(t, e, r) { return t._gsap.scaleX = t._gsap.scaleY = r } function Gd(t, e, r, i, n) { var a = t._gsap; a.scaleX = a.scaleY = r, a.renderTransform(n, a) } function Hd(t, e, r, i, n) { var a = t._gsap; a[e] = r, a.renderTransform(n, a) } function Kd(t, e) { var r = this, i = this.target, n = i.style, a = i._gsap; if (t in sr && n) { if (this.tfm = this.tfm || {}, "transform" === t) return cr.transform.split(",").forEach(function (t) { return Kd.call(r, t, e) }); if (~(t = cr[t] || t).indexOf(",") ? t.split(",").forEach(function (t) { return r.tfm[t] = Tr(i, t) }) : this.tfm[t] = a.x ? a[t] : Tr(i, t), t === _r && (this.tfm.zOrigin = a.zOrigin), 0 <= this.props.indexOf(pr)) return; a.svg && (this.svgo = i.getAttribute("data-svg-origin"), this.props.push(_r, e, "")), t = pr } (n || e) && this.props.push(t, e, n[t]) } function Ld(t) { t.translate && (t.removeProperty("translate"), t.removeProperty("scale"), t.removeProperty("rotate")) } function Md() { var t, e, r = this.props, i = this.target, n = i.style, a = i._gsap; for (t = 0; t < r.length; t += 3)r[t + 1] ? 2 === r[t + 1] ? i[r[t]](r[t + 2]) : i[r[t]] = r[t + 2] : r[t + 2] ? n[r[t]] = r[t + 2] : n.removeProperty("--" === r[t].substr(0, 2) ? r[t] : r[t].replace(lr, "-$1").toLowerCase()); if (this.tfm) { for (e in this.tfm) a[e] = this.tfm[e]; a.svg && (a.renderTransform(), i.setAttribute("data-svg-origin", this.svgo || "")), (t = Ye()) && t.isStart || n[pr] || (Ld(n), a.zOrigin && n[_r] && (n[_r] += " " + a.zOrigin + "px", a.zOrigin = 0, a.renderTransform()), a.uncache = 1) } } function Nd(t, e) { var r = { target: t, props: [], revert: Md, save: Kd }; return t._gsap || ze.core.getCache(t), e && t.style && t.nodeType && e.split(",").forEach(function (t) { return r.save(t) }), r } function Pd(t, e) { var r = Re.createElementNS ? Re.createElementNS((e || "http://www.w3.org/1999/xhtml").replace(/^https/, "http"), t) : Re.createElement(t); return r && r.style ? r : Re.createElement(t) } function Qd(t, e, r) { var i = getComputedStyle(t); return i[e] || i.getPropertyValue(e.replace(lr, "-$1").toLowerCase()) || i.getPropertyValue(e) || !r && Qd(t, gr(e) || e, 1) || "" } function Td() { (function _windowExists() { return "undefined" != typeof window })() && window.document && (Ee = window, Re = Ee.document, Fe = Re.documentElement, Ie = Pd("div") || { style: {} }, Pd("div"), pr = gr(pr), _r = pr + "Origin", Ie.style.cssText = "border-width:0;line-height:0;position:absolute;padding:0", Xe = !!gr("perspective"), Ye = ze.core.reverting, Le = 1) } function Ud(t) { var e, r = t.ownerSVGElement, i = Pd("svg", r && r.getAttribute("xmlns") || "http://www.w3.org/2000/svg"), n = t.cloneNode(!0); n.style.display = "block", i.appendChild(n), Fe.appendChild(i); try { e = n.getBBox() } catch (t) { } return i.removeChild(n), Fe.removeChild(i), e } function Vd(t, e) { for (var r = e.length; r--;)if (t.hasAttribute(e[r])) return t.getAttribute(e[r]) } function Wd(e) { var r, i; try { r = e.getBBox() } catch (t) { r = Ud(e), i = 1 } return r && (r.width || r.height) || i || (r = Ud(e)), !r || r.width || r.x || r.y ? r : { x: +Vd(e, ["x", "cx", "x1"]) || 0, y: +Vd(e, ["y", "cy", "y1"]) || 0, width: 0, height: 0 } } function Xd(t) { return !(!t.getCTM || t.parentNode && !t.ownerSVGElement || !Wd(t)) } function Yd(t, e) { if (e) { var r, i = t.style; e in sr && e !== _r && (e = pr), i.removeProperty ? ("ms" !== (r = e.substr(0, 2)) && "webkit" !== e.substr(0, 6) || (e = "-" + e), i.removeProperty("--" === r ? e : e.replace(lr, "-$1").toLowerCase())) : i.removeAttribute(e) } } function Zd(t, e, r, i, n, a) { var s = new ge(t._pt, e, r, 0, 1, a ? Bd : Ad); return (t._pt = s).b = i, s.e = n, t._props.push(r), s } function ae(t, e, r, i) { var n, a, s, o, u = parseFloat(r) || 0, h = (r + "").trim().substr((u + "").length) || "px", l = Ie.style, f = fr.test(e), d = "svg" === t.tagName.toLowerCase(), c = (d ? "client" : "offset") + (f ? "Width" : "Height"), p = "px" === i, _ = "%" === i; if (i === h || !u || vr[i] || vr[h]) return u; if ("px" === h || p || (u = ae(t, e, r, "px")), o = t.getCTM && Xd(t), (_ || "%" === h) && (sr[e] || ~e.indexOf("adius"))) return n = o ? t.getBBox()[f ? "width" : "height"] : t[c], ia(_ ? u / n * 100 : u / 100 * n); if (l[f ? "width" : "height"] = 100 + (p ? h : i), a = "rem" !== i && ~e.indexOf("adius") || "em" === i && t.appendChild && !d ? t : t.parentNode, o && (a = (t.ownerSVGElement || {}).parentNode), a && a !== Re && a.appendChild || (a = Re.body), (s = a._gsap) && _ && s.width && f && s.time === Rt.time && !s.uncache) return ia(u / s.width * 100); if (!_ || "height" !== e && "width" !== e) !_ && "%" !== h || yr[Qd(a, "display")] || (l.position = Qd(t, "position")), a === t && (l.position = "static"), a.appendChild(Ie), n = Ie[c], a.removeChild(Ie), l.position = "absolute"; else { var m = t.style[e]; t.style[e] = 100 + i, n = t[c], m ? t.style[e] = m : Yd(t, e) } return f && _ && ((s = fa(a)).time = Rt.time, s.width = a[c]), ia(p ? n * u / 100 : n && u ? 100 / n * u : 0) } function ce(t, e, r, i) { if (!r || "none" === r) { var n = gr(e, t, 1), a = n && Qd(t, n, 1); a && a !== r ? (e = n, r = a) : "borderColor" === e && (r = Qd(t, "borderTopColor")) } var s, o, u, h, l, f, d, c, p, _, m, g = new ge(this._pt, t.style, e, 0, 1, oe), v = 0, y = 0; if (g.b = r, g.e = i, r += "", "var(--" === (i += "").substring(0, 6) && (i = Qd(t, i.substring(4, i.indexOf(")")))), "auto" === i && (f = t.style[e], t.style[e] = i, i = Qd(t, e) || i, f ? t.style[e] = f : Yd(t, e)), Gb(s = [r, i]), i = s[1], u = (r = s[0]).match(rt) || [], (i.match(rt) || []).length) { for (; o = rt.exec(i);)d = o[0], p = i.substring(v, o.index), l ? l = (l + 1) % 5 : "rgba(" !== p.substr(-5) && "hsla(" !== p.substr(-5) || (l = 1), d !== (f = u[y++] || "") && (h = parseFloat(f) || 0, m = f.substr((h + "").length), "=" === d.charAt(1) && (d = ka(h, d) + m), c = parseFloat(d), _ = d.substr((c + "").length), v = rt.lastIndex - _.length, _ || (_ = _ || X.units[e] || m, v === i.length && (i += _, g.e += _)), m !== _ && (h = ae(t, e, f, _) || 0), g._pt = { _next: g._pt, p: p || 1 === y ? p : ",", s: h, c: c - h, m: l && l < 4 || "zIndex" === e ? Math.round : 0 }); g.c = v < i.length ? i.substring(v, i.length) : "" } else g.r = "display" === e && "none" === i ? Bd : Ad; return nt.test(i) && (g.e = 0), this._pt = g } function ee(t) { var e = t.split(" "), r = e[0], i = e[1] || "50%"; return "top" !== r && "bottom" !== r && "left" !== i && "right" !== i || (t = r, r = i, i = t), e[0] = br[r] || r, e[1] = br[i] || i, e.join(" ") } function fe(t, e) { if (e.tween && e.tween._time === e.tween._dur) { var r, i, n, a = e.t, s = a.style, o = e.u, u = a._gsap; if ("all" === o || !0 === o) s.cssText = "", i = 1; else for (n = (o = o.split(",")).length; -1 < --n;)r = o[n], sr[r] && (i = 1, r = "transformOrigin" === r ? _r : pr), Yd(a, r); i && (Yd(a, pr), u && (u.svg && a.removeAttribute("transform"), s.scale = s.rotate = s.translate = "none", kr(a, 1), u.uncache = 1, Ld(s))) } } function je(t) { return "matrix(1, 0, 0, 1, 0, 0)" === t || "none" === t || !t } function ke(t) { var e = Qd(t, pr); return je(e) ? xr : e.substr(7).match(et).map(ia) } function le(t, e) { var r, i, n, a, s = t._gsap || fa(t), o = t.style, u = ke(t); return s.svg && t.getAttribute("transform") ? "1,0,0,1,0,0" === (u = [(n = t.transform.baseVal.consolidate().matrix).a, n.b, n.c, n.d, n.e, n.f]).join(",") ? xr : u : (u !== xr || t.offsetParent || t === Fe || s.svg || (n = o.display, o.display = "block", (r = t.parentNode) && (t.offsetParent || t.getBoundingClientRect().width) || (a = 1, i = t.nextElementSibling, Fe.appendChild(t)), u = ke(t), n ? o.display = n : Yd(t, "display"), a && (i ? r.insertBefore(t, i) : r ? r.appendChild(t) : Fe.removeChild(t))), e && 6 < u.length ? [u[0], u[1], u[4], u[5], u[12], u[13]] : u) } function me(t, e, r, i, n, a) { var s, o, u, h = t._gsap, l = n || le(t, !0), f = h.xOrigin || 0, d = h.yOrigin || 0, c = h.xOffset || 0, p = h.yOffset || 0, _ = l[0], m = l[1], g = l[2], v = l[3], y = l[4], T = l[5], b = e.split(" "), w = parseFloat(b[0]) || 0, x = parseFloat(b[1]) || 0; r ? l !== xr && (o = _ * v - m * g) && (u = w * (-m / o) + x * (_ / o) - (_ * T - m * y) / o, w = w * (v / o) + x * (-g / o) + (g * T - v * y) / o, x = u) : (w = (s = Wd(t)).x + (~b[0].indexOf("%") ? w / 100 * s.width : w), x = s.y + (~(b[1] || b[0]).indexOf("%") ? x / 100 * s.height : x)), i || !1 !== i && h.smooth ? (y = w - f, T = x - d, h.xOffset = c + (y * _ + T * g) - y, h.yOffset = p + (y * m + T * v) - T) : h.xOffset = h.yOffset = 0, h.xOrigin = w, h.yOrigin = x, h.smooth = !!i, h.origin = e, h.originIsAbsolute = !!r, t.style[_r] = "0px 0px", a && (Zd(a, h, "xOrigin", f, w), Zd(a, h, "yOrigin", d, x), Zd(a, h, "xOffset", c, h.xOffset), Zd(a, h, "yOffset", p, h.yOffset)), t.setAttribute("data-svg-origin", w + " " + x) } function pe(t, e, r) { var i = Za(e); return ia(parseFloat(e) + parseFloat(ae(t, "x", r + "px", i))) + i } function we(t, e, i, n, a) { var s, o, u = 360, h = r(a), l = parseFloat(a) * (h && ~a.indexOf("rad") ? or : 1) - n, f = n + l + "deg"; return h && ("short" === (s = a.split("_")[1]) && (l %= u) !== l % 180 && (l += l < 0 ? u : -u), "cw" === s && l < 0 ? l = (l + 36e9) % u - ~~(l / u) * u : "ccw" === s && 0 < l && (l = (l - 36e9) % u - ~~(l / u) * u)), t._pt = o = new ge(t._pt, e, i, n, l, xd), o.e = f, o.u = "deg", t._props.push(i), o } function xe(t, e) { for (var r in e) t[r] = e[r]; return t } function ye(t, e, r) { var i, n, a, s, o, u, h, l = xe({}, r._gsap), f = r.style; for (n in l.svg ? (a = r.getAttribute("transform"), r.setAttribute("transform", ""), f[pr] = e, i = kr(r, 1), Yd(r, pr), r.setAttribute("transform", a)) : (a = getComputedStyle(r)[pr], f[pr] = e, i = kr(r, 1), f[pr] = a), sr) (a = l[n]) !== (s = i[n]) && "perspective,force3D,transformOrigin,svgOrigin".indexOf(n) < 0 && (o = Za(a) !== (h = Za(s)) ? ae(r, n, a, h) : parseFloat(a), u = parseFloat(s), t._pt = new ge(t._pt, i, n, o, u - o, wd), t._pt.u = h || 0, t._props.push(n)); xe(i, l) } var Ee, Re, Fe, Le, Ie, Be, Ye, Xe, Ze = Lt.Power0, Ne = Lt.Power1, Qe = Lt.Power2, Ue = Lt.Power3, qe = Lt.Power4, Ve = Lt.Linear, We = Lt.Quad, Ge = Lt.Cubic, He = Lt.Quart, Ke = Lt.Quint, Je = Lt.Strong, $e = Lt.Elastic, tr = Lt.Back, er = Lt.SteppedEase, rr = Lt.Bounce, ir = Lt.Sine, nr = Lt.Expo, ar = Lt.Circ, sr = {}, or = 180 / Math.PI, ur = Math.PI / 180, hr = Math.atan2, lr = /([A-Z])/g, fr = /(left|right|width|margin|padding|x)/i, dr = /[\s,\(]\S/, cr = { autoAlpha: "opacity,visibility", scale: "scaleX,scaleY", alpha: "opacity" }, pr = "transform", _r = pr + "Origin", mr = "O,Moz,ms,Ms,Webkit".split(","), gr = function _checkPropPrefix(t, e, r) { var i = (e || Ie).style, n = 5; if (t in i && !r) return t; for (t = t.charAt(0).toUpperCase() + t.substr(1); n-- && !(mr[n] + t in i);); return n < 0 ? null : (3 === n ? "ms" : 0 <= n ? mr[n] : "") + t }, vr = { deg: 1, rad: 1, turn: 1 }, yr = { grid: 1, flex: 1 }, Tr = function _get(t, e, r, i) { var n; return Le || Td(), e in cr && "transform" !== e && ~(e = cr[e]).indexOf(",") && (e = e.split(",")[0]), sr[e] && "transform" !== e ? (n = kr(t, i), n = "transformOrigin" !== e ? n[e] : n.svg ? n.origin : Or(Qd(t, _r)) + " " + n.zOrigin + "px") : (n = t.style[e]) && "auto" !== n && !i && !~(n + "").indexOf("calc(") || (n = wr[e] && wr[e](t, e, r) || Qd(t, e) || ga(t, e) || ("opacity" === e ? 1 : 0)), r && !~(n + "").trim().indexOf(" ") ? ae(t, e, n, r) + r : n }, br = { top: "0%", bottom: "100%", left: "0%", right: "100%", center: "50%" }, wr = { clearProps: function clearProps(t, e, r, i, n) { if ("isFromStart" !== n.data) { var a = t._pt = new ge(t._pt, e, r, 0, 0, fe); return a.u = i, a.pr = -10, a.tween = n, t._props.push(r), 1 } } }, xr = [1, 0, 0, 1, 0, 0], Mr = {}, kr = function _parseTransform(t, e) { var r = t._gsap || new Zt(t); if ("x" in r && !e && !r.uncache) return r; var i, n, a, s, o, u, h, l, f, d, c, p, _, m, g, v, y, T, b, w, x, M, k, O, A, P, C, S, D, z, E, R, F = t.style, L = r.scaleX < 0, I = "deg", B = getComputedStyle(t), j = Qd(t, _r) || "0"; return i = n = a = u = h = l = f = d = c = 0, s = o = 1, r.svg = !(!t.getCTM || !Xd(t)), B.translate && ("none" === B.translate && "none" === B.scale && "none" === B.rotate || (F[pr] = ("none" !== B.translate ? "translate3d(" + (B.translate + " 0 0").split(" ").slice(0, 3).join(", ") + ") " : "") + ("none" !== B.rotate ? "rotate(" + B.rotate + ") " : "") + ("none" !== B.scale ? "scale(" + B.scale.split(" ").join(",") + ") " : "") + ("none" !== B[pr] ? B[pr] : "")), F.scale = F.rotate = F.translate = "none"), m = le(t, r.svg), r.svg && (O = r.uncache ? (A = t.getBBox(), j = r.xOrigin - A.x + "px " + (r.yOrigin - A.y) + "px", "") : !e && t.getAttribute("data-svg-origin"), me(t, O || j, !!O || r.originIsAbsolute, !1 !== r.smooth, m)), p = r.xOrigin || 0, _ = r.yOrigin || 0, m !== xr && (T = m[0], b = m[1], w = m[2], x = m[3], i = M = m[4], n = k = m[5], 6 === m.length ? (s = Math.sqrt(T * T + b * b), o = Math.sqrt(x * x + w * w), u = T || b ? hr(b, T) * or : 0, (f = w || x ? hr(w, x) * or + u : 0) && (o *= Math.abs(Math.cos(f * ur))), r.svg && (i -= p - (p * T + _ * w), n -= _ - (p * b + _ * x))) : (R = m[6], z = m[7], C = m[8], S = m[9], D = m[10], E = m[11], i = m[12], n = m[13], a = m[14], h = (g = hr(R, D)) * or, g && (O = M * (v = Math.cos(-g)) + C * (y = Math.sin(-g)), A = k * v + S * y, P = R * v + D * y, C = M * -y + C * v, S = k * -y + S * v, D = R * -y + D * v, E = z * -y + E * v, M = O, k = A, R = P), l = (g = hr(-w, D)) * or, g && (v = Math.cos(-g), E = x * (y = Math.sin(-g)) + E * v, T = O = T * v - C * y, b = A = b * v - S * y, w = P = w * v - D * y), u = (g = hr(b, T)) * or, g && (O = T * (v = Math.cos(g)) + b * (y = Math.sin(g)), A = M * v + k * y, b = b * v - T * y, k = k * v - M * y, T = O, M = A), h && 359.9 < Math.abs(h) + Math.abs(u) && (h = u = 0, l = 180 - l), s = ia(Math.sqrt(T * T + b * b + w * w)), o = ia(Math.sqrt(k * k + R * R)), g = hr(M, k), f = 2e-4 < Math.abs(g) ? g * or : 0, c = E ? 1 / (E < 0 ? -E : E) : 0), r.svg && (O = t.getAttribute("transform"), r.forceCSS = t.setAttribute("transform", "") || !je(Qd(t, pr)), O && t.setAttribute("transform", O))), 90 < Math.abs(f) && Math.abs(f) < 270 && (L ? (s *= -1, f += u <= 0 ? 180 : -180, u += u <= 0 ? 180 : -180) : (o *= -1, f += f <= 0 ? 180 : -180)), e = e || r.uncache, r.x = i - ((r.xPercent = i && (!e && r.xPercent || (Math.round(t.offsetWidth / 2) === Math.round(-i) ? -50 : 0))) ? t.offsetWidth * r.xPercent / 100 : 0) + "px", r.y = n - ((r.yPercent = n && (!e && r.yPercent || (Math.round(t.offsetHeight / 2) === Math.round(-n) ? -50 : 0))) ? t.offsetHeight * r.yPercent / 100 : 0) + "px", r.z = a + "px", r.scaleX = ia(s), r.scaleY = ia(o), r.rotation = ia(u) + I, r.rotationX = ia(h) + I, r.rotationY = ia(l) + I, r.skewX = f + I, r.skewY = d + I, r.transformPerspective = c + "px", (r.zOrigin = parseFloat(j.split(" ")[2]) || !e && r.zOrigin || 0) && (F[_r] = Or(j)), r.xOffset = r.yOffset = 0, r.force3D = X.force3D, r.renderTransform = r.svg ? zr : Xe ? Dr : Ar, r.uncache = 0, r }, Or = function _firstTwoOnly(t) { return (t = t.split(" "))[0] + " " + t[1] }, Ar = function _renderNon3DTransforms(t, e) { e.z = "0px", e.rotationY = e.rotationX = "0deg", e.force3D = 0, Dr(t, e) }, Pr = "0deg", Cr = "0px", Sr = ") ", Dr = function _renderCSSTransforms(t, e) { var r = e || this, i = r.xPercent, n = r.yPercent, a = r.x, s = r.y, o = r.z, u = r.rotation, h = r.rotationY, l = r.rotationX, f = r.skewX, d = r.skewY, c = r.scaleX, p = r.scaleY, _ = r.transformPerspective, m = r.force3D, g = r.target, v = r.zOrigin, y = "", T = "auto" === m && t && 1 !== t || !0 === m; if (v && (l !== Pr || h !== Pr)) { var b, w = parseFloat(h) * ur, x = Math.sin(w), M = Math.cos(w); w = parseFloat(l) * ur, b = Math.cos(w), a = pe(g, a, x * b * -v), s = pe(g, s, -Math.sin(w) * -v), o = pe(g, o, M * b * -v + v) } _ !== Cr && (y += "perspective(" + _ + Sr), (i || n) && (y += "translate(" + i + "%, " + n + "%) "), !T && a === Cr && s === Cr && o === Cr || (y += o !== Cr || T ? "translate3d(" + a + ", " + s + ", " + o + ") " : "translate(" + a + ", " + s + Sr), u !== Pr && (y += "rotate(" + u + Sr), h !== Pr && (y += "rotateY(" + h + Sr), l !== Pr && (y += "rotateX(" + l + Sr), f === Pr && d === Pr || (y += "skew(" + f + ", " + d + Sr), 1 === c && 1 === p || (y += "scale(" + c + ", " + p + Sr), g.style[pr] = y || "translate(0, 0)" }, zr = function _renderSVGTransforms(t, e) { var r, i, n, a, s, o = e || this, u = o.xPercent, h = o.yPercent, l = o.x, f = o.y, d = o.rotation, c = o.skewX, p = o.skewY, _ = o.scaleX, m = o.scaleY, g = o.target, v = o.xOrigin, y = o.yOrigin, T = o.xOffset, b = o.yOffset, w = o.forceCSS, x = parseFloat(l), M = parseFloat(f); d = parseFloat(d), c = parseFloat(c), (p = parseFloat(p)) && (c += p = parseFloat(p), d += p), d || c ? (d *= ur, c *= ur, r = Math.cos(d) * _, i = Math.sin(d) * _, n = Math.sin(d - c) * -m, a = Math.cos(d - c) * m, c && (p *= ur, s = Math.tan(c - p), n *= s = Math.sqrt(1 + s * s), a *= s, p && (s = Math.tan(p), r *= s = Math.sqrt(1 + s * s), i *= s)), r = ia(r), i = ia(i), n = ia(n), a = ia(a)) : (r = _, a = m, i = n = 0), (x && !~(l + "").indexOf("px") || M && !~(f + "").indexOf("px")) && (x = ae(g, "x", l, "px"), M = ae(g, "y", f, "px")), (v || y || T || b) && (x = ia(x + v - (v * r + y * n) + T), M = ia(M + y - (v * i + y * a) + b)), (u || h) && (s = g.getBBox(), x = ia(x + u / 100 * s.width), M = ia(M + h / 100 * s.height)), s = "matrix(" + r + "," + i + "," + n + "," + a + "," + x + "," + M + ")", g.setAttribute("transform", s), w && (g.style[pr] = s) }; ha("padding,margin,Width,Radius", function (e, r) { var t = "Right", i = "Bottom", n = "Left", o = (r < 3 ? ["Top", t, i, n] : ["Top" + n, "Top" + t, i + t, i + n]).map(function (t) { return r < 2 ? e + t : "border" + t + e }); wr[1 < r ? "border" + e : e] = function (e, t, r, i, n) { var a, s; if (arguments.length < 4) return a = o.map(function (t) { return Tr(e, t, r) }), 5 === (s = a.join(" ")).split(a[0]).length ? a[0] : s; a = (i + "").split(" "), s = {}, o.forEach(function (t, e) { return s[t] = a[e] = a[e] || a[(e - 1) / 2 | 0] }), e.init(t, s, n) } }); var Er, Rr, Fr, Lr = { name: "css", register: Td, targetTest: function targetTest(t) { return t.style && t.nodeType }, init: function init(t, e, i, n, a) { var s, o, u, h, l, f, d, c, p, _, m, g, v, y, T, b, w = this._props, x = t.style, M = i.vars.startAt; for (d in Le || Td(), this.styles = this.styles || Nd(t), b = this.styles.props, this.tween = i, e) if ("autoRound" !== d && (o = e[d], !pt[d] || !bc(d, e, i, n, t, a))) if (l = typeof o, f = wr[d], "function" === l && (l = typeof (o = o.call(i, n, t, a))), "string" === l && ~o.indexOf("random(") && (o = pb(o)), f) f(this, t, d, o, i) && (T = 1); else if ("--" === d.substr(0, 2)) s = (getComputedStyle(t).getPropertyValue(d) + "").trim(), o += "", zt.lastIndex = 0, zt.test(s) || (c = Za(s), p = Za(o)), p ? c !== p && (s = ae(t, d, s, p) + p) : c && (o += c), this.add(x, "setProperty", s, o, n, a, 0, 0, d), w.push(d), b.push(d, 0, x[d]); else if ("undefined" !== l) { if (M && d in M ? (s = "function" == typeof M[d] ? M[d].call(i, n, t, a) : M[d], r(s) && ~s.indexOf("random(") && (s = pb(s)), Za(s + "") || "auto" === s || (s += X.units[d] || Za(Tr(t, d)) || ""), "=" === (s + "").charAt(1) && (s = Tr(t, d))) : s = Tr(t, d), h = parseFloat(s), (_ = "string" === l && "=" === o.charAt(1) && o.substr(0, 2)) && (o = o.substr(2)), u = parseFloat(o), d in cr && ("autoAlpha" === d && (1 === h && "hidden" === Tr(t, "visibility") && u && (h = 0), b.push("visibility", 0, x.visibility), Zd(this, x, "visibility", h ? "inherit" : "hidden", u ? "inherit" : "hidden", !u)), "scale" !== d && "transform" !== d && ~(d = cr[d]).indexOf(",") && (d = d.split(",")[0])), m = d in sr) if (this.styles.save(d), "string" === l && "var(--" === o.substring(0, 6) && (o = Qd(t, o.substring(4, o.indexOf(")"))), u = parseFloat(o)), g || ((v = t._gsap).renderTransform && !e.parseTransform || kr(t, e.parseTransform), y = !1 !== e.smoothOrigin && v.smooth, (g = this._pt = new ge(this._pt, x, pr, 0, 1, v.renderTransform, v, 0, -1)).dep = 1), "scale" === d) this._pt = new ge(this._pt, v, "scaleY", v.scaleY, (_ ? ka(v.scaleY, _ + u) : u) - v.scaleY || 0, wd), this._pt.u = 0, w.push("scaleY", d), d += "X"; else { if ("transformOrigin" === d) { b.push(_r, 0, x[_r]), o = ee(o), v.svg ? me(t, o, 0, y, 0, this) : ((p = parseFloat(o.split(" ")[2]) || 0) !== v.zOrigin && Zd(this, v, "zOrigin", v.zOrigin, p), Zd(this, x, d, Or(s), Or(o))); continue } if ("svgOrigin" === d) { me(t, o, 1, y, 0, this); continue } if (d in Mr) { we(this, v, d, h, _ ? ka(h, _ + o) : o); continue } if ("smoothOrigin" === d) { Zd(this, v, "smooth", v.smooth, o); continue } if ("force3D" === d) { v[d] = o; continue } if ("transform" === d) { ye(this, o, t); continue } } else d in x || (d = gr(d) || d); if (m || (u || 0 === u) && (h || 0 === h) && !dr.test(o) && d in x) u = u || 0, (c = (s + "").substr((h + "").length)) !== (p = Za(o) || (d in X.units ? X.units[d] : c)) && (h = ae(t, d, s, p)), this._pt = new ge(this._pt, m ? v : x, d, h, (_ ? ka(h, _ + u) : u) - h, m || "px" !== p && "zIndex" !== d || !1 === e.autoRound ? wd : zd), this._pt.u = p || 0, c !== p && "%" !== p && (this._pt.b = s, this._pt.r = yd); else if (d in x) ce.call(this, t, d, s, _ ? _ + o : o); else if (d in t) this.add(t, d, s || t[d], _ ? _ + o : o, n, a); else if ("parseTransform" !== d) { Q(d, o); continue } m || (d in x ? b.push(d, 0, x[d]) : "function" == typeof t[d] ? b.push(d, 2, t[d]()) : b.push(d, 1, s || t[d])), w.push(d) } T && _e(this) }, render: function render(t, e) { if (e.tween._time || !Ye()) for (var r = e._pt; r;)r.r(t, r.d), r = r._next; else e.styles.revert() }, get: Tr, aliases: cr, getSetter: function getSetter(t, e, r) { var i = cr[e]; return i && i.indexOf(",") < 0 && (e = i), e in sr && e !== _r && (t._gsap.x || Tr(t, "x")) ? r && Be === r ? "scale" === e ? Fd : Ed : (Be = r || {}) && ("scale" === e ? Gd : Hd) : t.style && !u(t.style[e]) ? Cd : ~e.indexOf("-") ? Dd : ie(t, e) }, core: { _removeProperty: Yd, _getMatrix: le } }; ze.utils.checkPrefix = gr, ze.core.getStyleSaver = Nd, Fr = ha((Er = "x,y,z,scale,scaleX,scaleY,xPercent,yPercent") + "," + (Rr = "rotation,rotationX,rotationY,skewX,skewY") + ",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective", function (t) { sr[t] = 1 }), ha(Rr, function (t) { X.units[t] = "deg", Mr[t] = 1 }), cr[Fr[13]] = Er + "," + Rr, ha("0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY", function (t) { var e = t.split(":"); cr[e[1]] = Fr[e[0]] }), ha("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective", function (t) { X.units[t] = "px" }), ze.registerPlugin(Lr); var Ir = ze.registerPlugin(Lr) || ze, Br = Ir.core.Tween; e.Back = tr, e.Bounce = rr, e.CSSPlugin = Lr, e.Circ = ar, e.Cubic = Ge, e.Elastic = $e, e.Expo = nr, e.Linear = Ve, e.Power0 = Ze, e.Power1 = Ne, e.Power2 = Qe, e.Power3 = Ue, e.Power4 = qe, e.Quad = We, e.Quart = He, e.Quint = Ke, e.Sine = ir, e.SteppedEase = er, e.Strong = Je, e.TimelineLite = Qt, e.TimelineMax = Qt, e.TweenLite = Jt, e.TweenMax = Br, e.default = Ir, e.gsap = Ir; if (typeof (window) === "undefined" || window !== e) { Object.defineProperty(e, "__esModule", { value: !0 }) } else { delete e.default } });
js/imagesloaded.pkgd.min.js
/*!
* imagesLoaded PACKAGED v5.0.0
* JavaScript is all like "You images are done yet or what?"
* MIT License
*/
!function (t, e) { "object" == typeof module && module.exports ? module.exports = e() : t.EvEmitter = e() }("undefined" != typeof window ? window : this, (function () { function t() { } let e = t.prototype; return e.on = function (t, e) { if (!t || !e) return this; let i = this._events = this._events || {}, s = i[t] = i[t] || []; return s.includes(e) || s.push(e), this }, e.once = function (t, e) { if (!t || !e) return this; this.on(t, e); let i = this._onceEvents = this._onceEvents || {}; return (i[t] = i[t] || {})[e] = !0, this }, e.off = function (t, e) { let i = this._events && this._events[t]; if (!i || !i.length) return this; let s = i.indexOf(e); return -1 != s && i.splice(s, 1), this }, e.emitEvent = function (t, e) { let i = this._events && this._events[t]; if (!i || !i.length) return this; i = i.slice(0), e = e || []; let s = this._onceEvents && this._onceEvents[t]; for (let n of i) { s && s[n] && (this.off(t, n), delete s[n]), n.apply(this, e) } return this }, e.allOff = function () { return delete this._events, delete this._onceEvents, this }, t })),
/*!
* imagesLoaded v5.0.0
* JavaScript is all like "You images are done yet or what?"
* MIT License
*/
function (t, e) { "object" == typeof module && module.exports ? module.exports = e(t, require("ev-emitter")) : t.imagesLoaded = e(t, t.EvEmitter) }("undefined" != typeof window ? window : this, (function (t, e) { let i = t.jQuery, s = t.console; function n(t, e, o) { if (!(this instanceof n)) return new n(t, e, o); let r = t; var h; ("string" == typeof t && (r = document.querySelectorAll(t)), r) ? (this.elements = (h = r, Array.isArray(h) ? h : "object" == typeof h && "number" == typeof h.length ? [...h] : [h]), this.options = {}, "function" == typeof e ? o = e : Object.assign(this.options, e), o && this.on("always", o), this.getImages(), i && (this.jqDeferred = new i.Deferred), setTimeout(this.check.bind(this))) : s.error(`Bad element for imagesLoaded ${r || t}`) } n.prototype = Object.create(e.prototype), n.prototype.getImages = function () { this.images = [], this.elements.forEach(this.addElementImages, this) }; const o = [1, 9, 11]; n.prototype.addElementImages = function (t) { "IMG" === t.nodeName && this.addImage(t), !0 === this.options.background && this.addElementBackgroundImages(t); let { nodeType: e } = t; if (!e || !o.includes(e)) return; let i = t.querySelectorAll("img"); for (let t of i) this.addImage(t); if ("string" == typeof this.options.background) { let e = t.querySelectorAll(this.options.background); for (let t of e) this.addElementBackgroundImages(t) } }; const r = /url\((['"])?(.*?)\1\)/gi; function h(t) { this.img = t } function d(t, e) { this.url = t, this.element = e, this.img = new Image } return n.prototype.addElementBackgroundImages = function (t) { let e = getComputedStyle(t); if (!e) return; let i = r.exec(e.backgroundImage); for (; null !== i;) { let s = i && i[2]; s && this.addBackground(s, t), i = r.exec(e.backgroundImage) } }, n.prototype.addImage = function (t) { let e = new h(t); this.images.push(e) }, n.prototype.addBackground = function (t, e) { let i = new d(t, e); this.images.push(i) }, n.prototype.check = function () { if (this.progressedCount = 0, this.hasAnyBroken = !1, !this.images.length) return void this.complete(); let t = (t, e, i) => { setTimeout((() => { this.progress(t, e, i) })) }; this.images.forEach((function (e) { e.once("progress", t), e.check() })) }, n.prototype.progress = function (t, e, i) { this.progressedCount++, this.hasAnyBroken = this.hasAnyBroken || !t.isLoaded, this.emitEvent("progress", [this, t, e]), this.jqDeferred && this.jqDeferred.notify && this.jqDeferred.notify(this, t), this.progressedCount === this.images.length && this.complete(), this.options.debug && s && s.log(`progress: ${i}`, t, e) }, n.prototype.complete = function () { let t = this.hasAnyBroken ? "fail" : "done"; if (this.isComplete = !0, this.emitEvent(t, [this]), this.emitEvent("always", [this]), this.jqDeferred) { let t = this.hasAnyBroken ? "reject" : "resolve"; this.jqDeferred[t](this) } }, h.prototype = Object.create(e.prototype), h.prototype.check = function () { this.getIsImageComplete() ? this.confirm(0 !== this.img.naturalWidth, "naturalWidth") : (this.proxyImage = new Image, this.img.crossOrigin && (this.proxyImage.crossOrigin = this.img.crossOrigin), this.proxyImage.addEventListener("load", this), this.proxyImage.addEventListener("error", this), this.img.addEventListener("load", this), this.img.addEventListener("error", this), this.proxyImage.src = this.img.currentSrc || this.img.src) }, h.prototype.getIsImageComplete = function () { return this.img.complete && this.img.naturalWidth }, h.prototype.confirm = function (t, e) { this.isLoaded = t; let { parentNode: i } = this.img, s = "PICTURE" === i.nodeName ? i : this.img; this.emitEvent("progress", [this, s, e]) }, h.prototype.handleEvent = function (t) { let e = "on" + t.type; this[e] && this[e](t) }, h.prototype.onload = function () { this.confirm(!0, "onload"), this.unbindEvents() }, h.prototype.onerror = function () { this.confirm(!1, "onerror"), this.unbindEvents() }, h.prototype.unbindEvents = function () { this.proxyImage.removeEventListener("load", this), this.proxyImage.removeEventListener("error", this), this.img.removeEventListener("load", this), this.img.removeEventListener("error", this) }, d.prototype = Object.create(h.prototype), d.prototype.check = function () { this.img.addEventListener("load", this), this.img.addEventListener("error", this), this.img.src = this.url, this.getIsImageComplete() && (this.confirm(0 !== this.img.naturalWidth, "naturalWidth"), this.unbindEvents()) }, d.prototype.unbindEvents = function () { this.img.removeEventListener("load", this), this.img.removeEventListener("error", this) }, d.prototype.confirm = function (t, e) { this.isLoaded = t, this.emitEvent("progress", [this, this.element, e]) }, n.makeJQueryPlugin = function (e) { (e = e || t.jQuery) && (i = e, i.fn.imagesLoaded = function (t, e) { return new n(this, t, e).jqDeferred.promise(i(this)) }) }, n.makeJQueryPlugin(), n }));
js/utils.js
/**
* Preloads images specified by the CSS selector.
* @function
* @param {string} [selector='img'] - CSS selector for target images.
* @returns {Promise} - Resolves when all specified images are loaded.
*/
const preloadImages = (selector = 'img') => {
return new Promise((resolve) => {
// The imagesLoaded library is used to ensure all images (including backgrounds) are fully loaded.
imagesLoaded(document.querySelectorAll(selector), { background: true }, resolve);
});
};
// Exporting utility functions for use in other modules.
export {
preloadImages
};
Media credits and license evidence실행 안내·자료
README.md
## Credits
- An original idea by [Uncommon](https://www.uncommon.nl/)
- Images Free for Personal and Business use from [rawpixel](https://www.rawpixel.com/)
## License
[MIT](LICENSE)
LICENSE실행 안내·자료
MIT License
Copyright (c) 2009 - 2024 [Codrops](https://tympanus.net/codrops)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
BEHIND THE EXAMPLE
이 장면을 만드는 원리
격자 드래그와 wheel의 공통 경계
드래그로 가능한 작업에 클릭·탭과 키보드의 별도 경로를 설계합니다.
- 이 예제에서는
- setupDraggable은 x·y 이동에 여유 경계를 두고 addEvents의 wheel 경로도 같은 bounds로 새 위치를 제한합니다. wheel 입력이 있다는 사실만으로 클릭·탭이나 키보드 대안이 완성되지는 않습니다.