Codrops 원본
Animating Responsive Grid Layout Transitions with GSAP Flip
섹션 · MIT
갤러리 안에서는 화면을 벗어나거나 움직임을 멈추면 예제도 닫힙니다. 다시 재생할 때는 처음부터 시작해요.
SOURCE FILES
원본 코드 읽기
수집한 원본 소스와 실행 안내를 함께 제공합니다.
css/base.css
@font-face {
font-family: 'ZT Nature';
src: url('../public/ZTNature-Regular.woff2') format('woff2');
}
*,
*::after,
*::before {
box-sizing: border-box;
}
:root {
font-size: 11px;
--color-text: #b0b0b0;
--color-bg: #0e0e0e;
--color-link: #9f9f9f;
--color-link-hover: #fff;
--page-padding: 1.5rem;
}
body {
margin: 0;
color: var(--color-text);
background-color: var(--color-bg);
font-family: 'ZT Nature', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-transform: uppercase;
}
::-webkit-scrollbar {
display: none;
}
@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 {
padding: 3rem var(--page-padding) 0;
display: grid;
z-index: 1000;
position: relative;
align-items: center;
grid-row-gap: 1rem;
grid-column-gap: 2rem;
pointer-events: none;
justify-items: start;
grid-template-columns: auto auto auto 1fr;
grid-template-areas:
'title title title title'
'back archive github ...'
'demos demos demos ...'
'nav nav nav nav'
'sponsor sponsor sponsor sponsor';
#cdawrap {
justify-self: start;
grid-area: sponsor;
}
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__demos {
grid-area: demos;
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.button {
border: 1px solid #4c4c4c;
padding: 0.5rem 1rem;
border-radius: 2em;
}
a.button:hover,
a.button:focus,
.button.selected {
border-color: #5c5c5c;
text-decoration: none;
color: #fff;
}
@media screen and (min-width: 53em) {
padding: var(--page-padding);
grid-template-columns: auto auto auto auto 1fr;
grid-template-rows: auto auto;
align-content: space-between;
grid-template-areas:
'title back github archive nav'
'demos demos demos demos demos'
'sponsor sponsor sponsor sponsor sponsor';
#cdawrap {
justify-self: end;
text-align: right;
max-width: 300px;
position: fixed;
bottom: var(--page-padding);
right: var(--page-padding);
}
}
}
.content {
padding: calc(var(--page-padding) * 2) var(--page-padding);
display: flex;
flex-direction: column;
gap: 2.5rem;
min-height: 100vh;
}
css/style.css
button {
background-color: transparent;
border: none;
cursor: pointer;
font-family: inherit;
color: inherit;
}
.options_grid_container {
grid-area: nav;
align-self: center;
display: flex;
align-items: center;
flex-direction: column;
gap: 1.25rem;
z-index: 1000;
}
@media screen and (min-width: 53em) {
.options_grid_container {
justify-self: end;
}
}
.configuration_grid_size {
display: flex;
align-items: center;
gap: 1px;
background: #4c4c4c;
border: 1px solid #4c4c4c;
border-radius: 15px;
overflow: hidden;
}
.configuration_grid_size button {
background: #000;
padding: 0.75rem 1.15rem;
font-size: inherit;
}
.configuration_grid_size button.active {
background-color: var(--color-text);
color: var(--color-bg);
}
.grid_gallery_container {
position: relative;
display: grid;
gap: 1.5rem;
padding: 2rem 0;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.grid_gallery_container[data-size-grid='50%'] {
grid-template-columns: repeat(16, 1fr);
}
.grid_gallery_container[data-size-grid='75%'] {
grid-template-columns: repeat(10, 1fr);
}
.grid_gallery_container[data-size-grid='100%'] {
grid-template-columns: repeat(8, 1fr);
}
.grid_gallery_container[data-size-grid='125%'] {
grid-template-columns: repeat(6, 1fr);
}
.grid_gallery_container[data-size-grid='150%'] {
grid-template-columns: repeat(4, 1fr);
}
.grid_gallery_item {
will-change: auto;
display: flex;
flex-direction: column;
}
.grid_gallery_item.expanded {
grid-column: span 2;
grid-row: span 2;
}
.grid_gallery_container[data-size-grid='50%'] .grid_gallery_item.expanded,
.grid_gallery_container[data-size-grid='75%'] .grid_gallery_item.expanded {
grid-column: span 3;
grid-row: span 3;
}
.grid_gallery_item p {
font-size: 0.6745rem;
text-align: left;
}
.image {
width: 100%;
aspect-ratio: var(--aspect-ratio, 1 / 1);
background-size: cover;
background-position: center;
filter: brightness(0.8);
transition: filter 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.image:hover {
filter: brightness(1);
}
@media (hover: hover) and (pointer: fine) {
.configuration_grid_size button:not(.active):hover {
background-color: var(--color-bg);
color: var(--color-text);
}
}
@media screen and (max-width: 768px) {
.grid_gallery_container[data-size-grid='50%'],
.grid_gallery_container[data-size-grid='75%'],
.grid_gallery_container[data-size-grid='100%'],
.grid_gallery_container[data-size-grid='125%'],
.grid_gallery_container[data-size-grid='150%'] {
grid-template-columns: repeat(3, 1fr);
}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.grid_gallery_container[data-size-grid='50%'] {
grid-template-columns: repeat(10, 1fr);
}
.grid_gallery_container[data-size-grid='75%'] {
grid-template-columns: repeat(8, 1fr);
}
.grid_gallery_container[data-size-grid='100%'] {
grid-template-columns: repeat(6, 1fr);
}
.grid_gallery_container[data-size-grid='125%'] {
grid-template-columns: repeat(5, 1fr);
}
.grid_gallery_container[data-size-grid='150%'] {
grid-template-columns: repeat(3, 1fr);
}
}
함께 쓰는 파일 9개 보기
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>Grid Layout Transition | Codrops</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="Codrops" />
<link
rel="icon"
type="image/svg+xml"
href="https://tympanus.net/favicon/favicon.svg" />
<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>
</head>
<body class="loading">
<main>
<header class="frame">
<h1 class="frame__title"><a href="https://tympanus.net/codrops/demos/?tag=grid">#Grid</a> Layout Transition with <a href="https://tympanus.net/codrops/demos/?tag=gsap">#GSAP</a></h1>
<a class="frame__back" href="https://tympanus.net/codrops/?p=">Article</a>
<a class="frame__archive" href="https://tympanus.net/codrops/hub/">All demos</a>
<a class="frame__github" href="https://github.com/codrops/">GitHub</a>
<nav class="frame__demos">
<span class="button selected">Default</span>
<a href="index2.html" class="button">Filter + Stagger</a>
</nav>
<nav class="options_grid_container">
<div class="configuration_grid_size">
<button data-size="50%">50%</button>
<button class="active" data-size="75%">75%</button>
<button data-size="100%">100%</button>
<button data-size="125%">125%</button>
<button data-size="150%">150%</button>
</div>
</nav>
</header>
<div class="content">
<section
class="grid_gallery_container"
id="grid-gallery"
data-size-grid="75%">
<div class="grid_gallery_item" style="--aspect-ratio: 1 / 1">
<div
class="image"
style="background-image: url(public/1.webp)"></div>
<p>01</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 4 / 5">
<div
class="image"
style="background-image: url(public/2.webp)"></div>
<p>02</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 16 / 9">
<div
class="image"
style="background-image: url(public/3.webp)"></div>
<p>03</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 3 / 4">
<div
class="image"
style="background-image: url(public/4.webp)"></div>
<p>04</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 5 / 4">
<div
class="image"
style="background-image: url(public/5.webp)"></div>
<p>05</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 1 / 1">
<div
class="image"
style="background-image: url(public/6.webp)"></div>
<p>06</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 4 / 5">
<div
class="image"
style="background-image: url(public/7.webp)"></div>
<p>07</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 1 / 1">
<div
class="image"
style="background-image: url(public/8.webp)"></div>
<p>08</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 4 / 3">
<div
class="image"
style="background-image: url(public/9.webp)"></div>
<p>09</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 5 / 7">
<div
class="image"
style="background-image: url(public/10.webp)"></div>
<p>10</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 3 / 2">
<div
class="image"
style="background-image: url(public/11.webp)"></div>
<p>11</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 1 / 1">
<div
class="image"
style="background-image: url(public/12.webp)"></div>
<p>12</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 16 / 9">
<div
class="image"
style="background-image: url(public/13.webp)"></div>
<p>13</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 5 / 3">
<div
class="image"
style="background-image: url(public/14.webp)"></div>
<p>14</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 4 / 5">
<div
class="image"
style="background-image: url(public/15.webp)"></div>
<p>15</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 1 / 1">
<div
class="image"
style="background-image: url(public/16.webp)"></div>
<p>16</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 3 / 4">
<div
class="image"
style="background-image: url(public/17.webp)"></div>
<p>17</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 1 / 1">
<div
class="image"
style="background-image: url(public/18.webp)"></div>
<p>18</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 5 / 7">
<div
class="image"
style="background-image: url(public/19.webp)"></div>
<p>19</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 4 / 3">
<div
class="image"
style="background-image: url(public/20.webp)"></div>
<p>20</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 4 / 5">
<div
class="image"
style="background-image: url(public/21.webp)"></div>
<p>21</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 4 / 5">
<div
class="image"
style="background-image: url(public/22.webp)"></div>
<p>22</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 1 / 1">
<div
class="image"
style="background-image: url(public/23.webp)"></div>
<p>23</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 4 / 5">
<div
class="image"
style="background-image: url(public/24.webp)"></div>
<p>24</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 4 / 3">
<div
class="image"
style="background-image: url(public/25.webp)"></div>
<p>25</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 1 / 1">
<div
class="image"
style="background-image: url(public/26.webp)"></div>
<p>26</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 4 / 5">
<div
class="image"
style="background-image: url(public/27.webp)"></div>
<p>27</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 4 / 5">
<div
class="image"
style="background-image: url(public/28.webp)"></div>
<p>28</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 4 / 5">
<div
class="image"
style="background-image: url(public/29.webp)"></div>
<p>29</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 6 / 5">
<div
class="image"
style="background-image: url(public/30.webp)"></div>
<p>30</p>
</div>
</section>
</div>
</main>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="./js/gsap.js"></script>
<script src="./js/Flip.js"></script>
<script src="./js/script.js"></script>
</body>
</html>index2.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>Grid Layout Transition | Codrops</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="Codrops" />
<link
rel="icon"
type="image/svg+xml"
href="https://tympanus.net/favicon/favicon.svg" />
<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>
</head>
<body class="loading">
<main>
<header class="frame">
<h1 class="frame__title"><a href="https://tympanus.net/codrops/demos/?tag=grid">#Grid</a> Layout Transition with <a href="https://tympanus.net/codrops/demos/?tag=gsap">#GSAP</a></h1>
<a class="frame__back" href="https://tympanus.net/codrops/?p=107307">Article</a>
<a class="frame__archive" href="https://tympanus.net/codrops/hub/">All demos</a>
<a class="frame__github" href="https://github.com/codrops/">GitHub</a>
<nav class="frame__demos">
<a class="button" href="index.html">Default</a>
<span class="button selected">Filter + Stagger</span>
</nav>
<nav class="options_grid_container">
<div class="configuration_grid_size">
<button data-size="50%">50%</button>
<button class="active" data-size="75%">75%</button>
<button data-size="100%">100%</button>
<button data-size="125%">125%</button>
<button data-size="150%">150%</button>
</div>
</nav>
</header>
<div class="content">
<section
class="grid_gallery_container"
id="grid-gallery"
data-size-grid="75%">
<div class="grid_gallery_item" style="--aspect-ratio: 1 / 1">
<div
class="image"
style="background-image: url(public/1.webp)"></div>
<p>01</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 4 / 5">
<div
class="image"
style="background-image: url(public/2.webp)"></div>
<p>02</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 16 / 9">
<div
class="image"
style="background-image: url(public/3.webp)"></div>
<p>03</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 3 / 4">
<div
class="image"
style="background-image: url(public/4.webp)"></div>
<p>04</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 5 / 4">
<div
class="image"
style="background-image: url(public/5.webp)"></div>
<p>05</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 1 / 1">
<div
class="image"
style="background-image: url(public/6.webp)"></div>
<p>06</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 4 / 5">
<div
class="image"
style="background-image: url(public/7.webp)"></div>
<p>07</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 1 / 1">
<div
class="image"
style="background-image: url(public/8.webp)"></div>
<p>08</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 4 / 3">
<div
class="image"
style="background-image: url(public/9.webp)"></div>
<p>09</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 5 / 7">
<div
class="image"
style="background-image: url(public/10.webp)"></div>
<p>10</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 3 / 2">
<div
class="image"
style="background-image: url(public/11.webp)"></div>
<p>11</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 1 / 1">
<div
class="image"
style="background-image: url(public/12.webp)"></div>
<p>12</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 16 / 9">
<div
class="image"
style="background-image: url(public/13.webp)"></div>
<p>13</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 5 / 3">
<div
class="image"
style="background-image: url(public/14.webp)"></div>
<p>14</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 4 / 5">
<div
class="image"
style="background-image: url(public/15.webp)"></div>
<p>15</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 1 / 1">
<div
class="image"
style="background-image: url(public/16.webp)"></div>
<p>16</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 3 / 4">
<div
class="image"
style="background-image: url(public/17.webp)"></div>
<p>17</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 1 / 1">
<div
class="image"
style="background-image: url(public/18.webp)"></div>
<p>18</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 5 / 7">
<div
class="image"
style="background-image: url(public/19.webp)"></div>
<p>19</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 4 / 3">
<div
class="image"
style="background-image: url(public/20.webp)"></div>
<p>20</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 4 / 5">
<div
class="image"
style="background-image: url(public/21.webp)"></div>
<p>21</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 4 / 5">
<div
class="image"
style="background-image: url(public/22.webp)"></div>
<p>22</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 1 / 1">
<div
class="image"
style="background-image: url(public/23.webp)"></div>
<p>23</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 4 / 5">
<div
class="image"
style="background-image: url(public/24.webp)"></div>
<p>24</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 4 / 3">
<div
class="image"
style="background-image: url(public/25.webp)"></div>
<p>25</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 1 / 1">
<div
class="image"
style="background-image: url(public/26.webp)"></div>
<p>26</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 4 / 5">
<div
class="image"
style="background-image: url(public/27.webp)"></div>
<p>27</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 4 / 5">
<div
class="image"
style="background-image: url(public/28.webp)"></div>
<p>28</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 4 / 5">
<div
class="image"
style="background-image: url(public/29.webp)"></div>
<p>29</p>
</div>
<div class="grid_gallery_item" style="--aspect-ratio: 6 / 5">
<div
class="image"
style="background-image: url(public/30.webp)"></div>
<p>30</p>
</div>
</section>
</div>
</main>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="./js/gsap.js"></script>
<script src="./js/Flip.js"></script>
<script src="./js/script2.js"></script>
</body>
</html>js/Flip.js
/*!
* Flip 3.14.1
* 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;!(C in t.style)&&"msTransform"in t.style&&(k=(C="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.style.position="static",i.style.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",pointerEvents:"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+")"),l.setAttribute("fill","transparent"),d.appendChild(l)):(f||(f=x(t),Object.assign(f.style,o)),Object.assign(l.style,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[C],t.style[C]="none",t.appendChild(s),i=s.getCTM(),t.removeChild(s),e?t.style[C]=e:t.style.removeProperty(C.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||!t.getBoundingClientRect().width?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)[C]+"").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[C]=o[C],r[k]=o[k],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,C="transform",k=C+"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:D[i]||(D[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,Y),s=window.getComputedStyle(o);d--;)f[Y[d]]=s[Y[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,R)).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=O(r.x,.01),e.y=O(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--;)G[r]=e[q[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--;)G[r]?e[q[r]]=G[r]:e.removeProperty($(q[r]));l=t}}}function Aa(t,e){for(var i=0;i<t.length;i+=3)Q.set(t[i],{clearProps:!0}),t[i].setAttribute("style",t[i+e]),t[i]._gsap.gmCache=-1}function Ba(r,t,a,e){r instanceof ut&&t instanceof ut||console.warn("Not a valid state object.");var s,o,l,u,h,p,c,f,d,i,n,m,g,v,y,x=(a=a||{}).clearProps,b=a.onEnter,w=a.onLeave,S=a.absolute,C=a.absoluteOnLeave,k=a.custom,E=a.delay,V=a.paused,B=a.repeat,M=a.repeatDelay,F=a.yoyo,I=a.toggleClass,L=a.nested,A=a.zIndex,O=a.scale,P=a.fade,T=a.stagger,N=a.spin,z=a.prune,R=("props"in a?a:r).props,D=_(a,rt),Y=Q.timeline({delay:E,paused:V,repeat:B,repeatDelay:M,yoyo:F,data:"isFlip"}),W=D,j=[],G=[],q=[],H=[],$=!0===N?1:N||0,Z="function"==typeof N?N:function(){return $},J=r.interrupted||t.interrupted,U=Y[1!==e?"to":"from"];for(o in t.idLookup)n=t.alt[o]?va(t,r,o):t.idLookup[o],h=n.element,i=r.idLookup[o],!r.alt[o]||h!==i.element||!r.alt[o].isVisible&&n.isVisible||(i=r.alt[o]),i?(p={t:h,b:i,a:n,sd:i.element===h?0:n.isVisible?1:-1},q.push(p),p.sd&&(p.sd<0&&(p.b=n,p.a=i),J&&fa(p.b,R?et[R]:nt),P&&q.push(p.swap={t:i.element,b:p.b,a:p.a,sd:-p.sd,swap:p})),h._flip=i.element._flip=tt?tt.timeline:Y):n.isVisible&&(q.push({t:h,b:_(n,{isVisible:1}),a:n,sd:0,entering:1}),h._flip=tt?tt.timeline:Y);R&&(st[R]||ba(R)).forEach(function(e){return D[e]=function(t){return q[t].a.props[e]}}),q.finalStates=d=[],m=function run(){ea(q),za(!0);var e,t=[];for(u=0;u<q.length;u++)p=q[u],g=p.a,v=p.b,!z||g.isDifferent(v)||p.entering?(h=p.t,!L||p.sd<0||!u||(g=p.a=g.clone({matrix:getGlobalMatrix(h,!1,!1,!0)})),v.isVisible&&g.isVisible?(p.sd<0?(L&&Aa(t,1),c=new ht(h,R,r.simple),ot(c,g,O,0,0,c),c.matrix=getGlobalMatrix(h,!1,!1,!0),c.bounds=h.getBoundingClientRect(),c.css=p.b.css,p.a=g=c,P&&(h.style.opacity=J?v.opacity:g.opacity),T&&H.push(h),L&&(Aa(t,2),t.push(h,h.getAttribute("style")))):0<p.sd&&P&&(h.style.opacity=J?g.opacity-v.opacity:"0"),ot(g,v,O,R),L&&p.sd<0&&t.push(h.getAttribute("style"))):v.isVisible!==g.isVisible&&(v.isVisible?g.isVisible||(v.css=g.css,G.push(v),q.splice(u--,1),S&&L&&ot(g,v,O,R)):(g.isVisible&&j.push(g),q.splice(u--,1))),O||(h.style.maxWidth=Math.max(g.width,v.width)+"px",h.style.maxHeight=Math.max(g.height,v.height)+"px",h.style.minWidth=Math.min(g.width,v.width)+"px",h.style.minHeight=Math.min(g.height,v.height)+"px"),L&&I&&h.classList.add(I)):q.splice(u--,1),d.push(g);if(I&&(e=d.map(function(t){return t.element}),L&&e.forEach(function(t){return t.classList.remove(I)})),za(!1),O?(D.scaleX=function(t){return q[t].a.scaleX},D.scaleY=function(t){return q[t].a.scaleY}):(D.width=function(t){return q[t].a.width+"px"},D.height=function(t){return q[t].a.height+"px"},D.autoRound=a.autoRound||!1),D.x=function(t){return q[t].a.x+"px"},D.y=function(t){return q[t].a.y+"px"},D.rotation=function(t){return q[t].a.rotation+(N?360*Z(t,f[t],f):0)},D.skewX=function(t){return q[t].a.skewX},f=q.map(function(t){return t.t}),!A&&0!==A||(D.modifiers={zIndex:function zIndex(){return A}},D.zIndex=A,D.immediateRender=!1!==a.immediateRender),P&&(D.opacity=function(t){return q[t].sd<0?0:0<q[t].sd?q[t].a.opacity:"+=0"}),H.length){T=Q.utils.distribute(T);var i=f.slice(H.length);D.stagger=function(t,e){return T(~H.indexOf(e)?f.indexOf(q[t].swap.t):t,e,i)}}if(it.forEach(function(t){return a[t]&&Y.eventCallback(t,a[t],a[t+"Params"])}),k&&f.length)for(o in W=_(D,rt),"scale"in k&&(k.scaleX=k.scaleY=k.scale,delete k.scale),k)(s=_(k[o],at))[o]=D[o],!("duration"in s)&&"duration"in D&&(s.duration=D.duration),s.stagger=D.stagger,U.call(Y,f,s,0),delete W[o];(f.length||G.length||j.length)&&(I&&Y.add(function(){return X(e,I,Y._zTime<0?"remove":"add")},0)&&!V&&X(e,I,"add"),f.length&&U.call(Y,f,W,0)),sa(b,j,Y),sa(w,G,Y);var n=tt&&tt.timeline;n&&(n.add(Y,0),tt._final.push(function(){return ha(q,!x)})),l=Y.duration(),Y.call(function(){var t=Y.time()>=l;t&&!n&&ha(q,!x),I&&X(e,I,t?"remove":"add")})},C&&(S=q.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(q,S)),tt._run.push(m)):(S&&la(ka(q,S)),m());var K=tt?tt.timeline:Y;return K.revert=function(){return lt(K,1,1)},K}function Ea(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,O,P,l,n,c=1,h={},T=180/Math.PI,N=Math.PI/180,R={},D={},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={},Y="paddingTop,paddingRight,paddingBottom,paddingLeft,gridArea,transition".split(","),j=function _parseElementState(t,e,i,n){return t instanceof ht?t:t instanceof ut?function _findElStateInState(t,e){return e&&t.idLookup[j(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,C=e.bounds,k=a&&P&&P(f,"transform,width,height"),_=t,E=e.matrix,V=E.e,B=E.f,M=t.bounds.width!==C.width||t.bounds.height!==C.height||t.scaleX!==b||t.scaleY!==w||t.rotation!==S,F=!M&&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)*T),s=W(Math.atan2(p.c,p.d)*T+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(),_={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!==_.width&&_.width?y/_.width:1,w*=x!==_.height&&_.height?x/_.height:1,d.scaleX=b,d.scaleY=w):(y=O(y*b/_.scaleX,0),x=O(x*w/_.scaleY,0),f.style.width=y+"px",f.style.height=x+"px"),n&&pa(f,e.props),F||!m?(g+=V-t.matrix.e,v+=B-t.matrix.f):M||m!==e.parent?(d.x=g+"px",d.y=v+"px",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:V,y:B})).x-o.x,v+=l.y-o.y):(h.e=h.f=0,g+=(l=h.apply({x:V-t.matrix.e,y:B-t.matrix.f})).x,v+=l.y),g=O(g,.02),v=O(v,.02),!a||a instanceof ht?(d.x=g+"px",d.y=v+"px",d.renderTransform(1,d)):k&&k.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},G=[],q="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)}),Ea(this),this.interrupt(t),this.recordInlineStyles(),this},n.clear=function clear(){return this.targets.length=this.elementStates.length=0,Ea(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)||R;return(e in i?i:i.props||R)[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),Ea(this),this},n.compare=function compare(t){function qh(t,e,i){return(t.isVisible!==e.isVisible?t.isVisible?f:d:t.isVisible?c:p).push(i)&&m.push(i)}function rh(t,e,i){return m.indexOf(i)<0&&qh(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)):qh(o,l,o.element),a&&o.element===a.element&&(a=u[n]),rh(o.element!==i.element&&a?a:o,i,i.element),rh(a&&a.element===s.element?a:o,s,s.element),a&&rh(a,s.element===a.element?s:i,a.element)):(i?i.isDifferent(e)?qh(e,i,r):p.push(r):f.push(r),a&&rh(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,Ea(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 H,ht=((H=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)},H.clone=function clone(t){return new ElementState(this,t)},H.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","px"),n.y=a("y","px"),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:O(a("width","px"),.04),n.height=l?l.height:O(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){t instanceof ElementState?Object.assign(this,t,e||{}):(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),Ba(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 Ba(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 Ba(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=j(e,l,p,t),d=j(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&<(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)||R)._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,P=Q.core.getStyleSaver;var i=Q.utils.snap(.1);O=function _closestTenth(t,e){return i(parseFloat(t)+e)}}},Flip);function Flip(){}pt.version="3.14.1","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/gsap.js
/*!
* GSAP 3.14.1
* 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 R(t) {
return (i = bt(t, ht)) && Fe;
}
function S(t, e) {
return console.warn(
"Invalid property",
t,
"set to",
e,
"Missing plugin? gsap.registerPlugin()"
);
}
function T(t, e) {
return !e && console.warn(t);
}
function U(t, e) {
return (t && (ht[t] = e) && i && (i[t] = e)) || ht;
}
function V() {
return 0;
}
function ga(t) {
var e,
r,
i = t[0];
if ((v(i) || s(i) || (t = [t]), !(e = (i._gsap || {}).harness))) {
for (r = yt.length; r-- && !yt[r].targetTest(i); );
e = yt[r];
}
for (r = t.length; r--; )
(t[r] && (t[r]._gsap || (t[r]._gsap = new Xt(t[r], e)))) ||
t.splice(r, 1);
return t;
}
function ha(t) {
return t._gsap || ga(Pt(t))[0]._gsap;
}
function ia(t, e, r) {
return (r = t[e]) && s(r)
? t[e]()
: (u(r) && t.getAttribute && t.getAttribute(e)) || r;
}
function ja(t, e) {
return (t = t.split(",")).forEach(e) || t;
}
function ka(t) {
return Math.round(1e5 * t) / 1e5 || 0;
}
function la(t) {
return Math.round(1e7 * t) / 1e7 || 0;
}
function ma(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 na(t, e) {
for (var r = e.length, i = 0; t.indexOf(e[i]) < 0 && ++i < r; );
return i < r;
}
function oa() {
var t,
e,
r = pt.length,
i = pt.slice(0);
for (_t = {}, t = pt.length = 0; t < r; t++)
(e = i[t]) && e._lazy && (e.render(e._lazy[0], e._lazy[1], !0)._lazy = 0);
}
function pa(t) {
return !!(t._initted || t._startAt || t.add);
}
function qa(t, e, r, i) {
pt.length && !I && oa(),
t.render(e, r, i || !!(I && e < 0 && pa(t))),
pt.length && !I && oa();
}
function ra(t) {
var e = parseFloat(t);
return (e || 0 === e) && (t + "").match(ot).length < 2
? e
: r(t)
? t.trim()
: t;
}
function sa(t) {
return t;
}
function ta(t, e) {
for (var r in e) r in t || (t[r] = e[r]);
return t;
}
function wa(t, e) {
for (var r in e)
"__proto__" !== r &&
"constructor" !== r &&
"prototype" !== r &&
(t[r] = v(e[r]) ? wa(t[r] || (t[r] = {}), e[r]) : e[r]);
return t;
}
function xa(t, e) {
var r,
i = {};
for (r in t) r in e || (i[r] = t[r]);
return i;
}
function ya(t) {
var e = t.parent || L,
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))
: ta;
if (w(t.inherit))
for (; e; ) r(t, e.vars.defaults), (e = e.parent || e._dp);
return t;
}
function Aa(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 Ba(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 Ca(t, e) {
t.parent &&
(!e || t.parent.autoRemoveChildren) &&
t.parent.remove &&
t.parent.remove(t),
(t._act = 0);
}
function Da(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 Fa(t, e, r, i) {
return (
t._startAt &&
(I
? t._startAt.revert(ft)
: (t.vars.immediateRender && !t.vars.autoRevert) ||
t._startAt.render(e, !0, i))
);
}
function Ha(t) {
return t._repeat ? wt(t._tTime, (t = t.duration() + t._rDelay)) * t : 0;
}
function Ja(t, e) {
return (
(t - e._start) * e._ts +
(0 <= e._ts ? 0 : e._dirty ? e.totalDuration() : e._tDur)
);
}
function Ka(t) {
return (t._end = la(
t._start + (t._tDur / Math.abs(t._ts || t._rts || q) || 0)
));
}
function La(t, e) {
var r = t._dp;
return (
r &&
r.smoothChildTiming &&
t._ts &&
((t._start = la(
r._time -
(0 < t._ts
? e / t._ts
: ((t._dirty ? t.totalDuration() : t._tDur) - e) / -t._ts)
)),
Ka(t),
r._dirty || Da(r, t)),
t
);
}
function Ma(t, e) {
var r;
if (
((e._time ||
(!e._dur && e._initted) ||
(e._start < t._time && (e._dur || !e.add))) &&
((r = Ja(t.rawTime(), e)),
(!e._dur || Mt(0, e.totalDuration(), r) - e._tTime > q) &&
e.render(r, !0)),
Da(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 = -q;
}
}
function Na(e, r, i, n) {
return (
r.parent && Ca(r),
(r._start = la(
(t(i) ? i : i || e !== L ? Ot(e, i, r) : e._time) + r._delay
)),
(r._end = la(
r._start + (r.totalDuration() / Math.abs(r.timeScale()) || 0)
)),
Aa(e, r, "_first", "_last", e._sort ? "_start" : 0),
xt(r) || (e._recent = r),
n || Ma(e, r),
e._ts < 0 && La(e, e._tTime),
e
);
}
function Oa(t, e) {
return (
(ht.ScrollTrigger || S("scrollTrigger", e)) &&
ht.ScrollTrigger.create(e, t)
);
}
function Pa(t, e, r, i, n) {
return (
Qt(t, e, n),
t._initted
? !r &&
t._pt &&
!I &&
((t._dur && !1 !== t.vars.lazy) || (!t._dur && t.vars.lazy)) &&
f !== It.frame
? (pt.push(t), (t._lazy = [n, i]), 1)
: void 0
: 1
);
}
function Ua(t, e, r, i) {
var n = t._repeat,
a = la(e) || 0,
s = t._tTime / t._tDur;
return (
s && !i && (t._time *= a / t._dur),
(t._dur = a),
(t._tDur = n ? (n < 0 ? 1e10 : la(a * (n + 1) + t._rDelay * n)) : a),
0 < s && !i && La(t, (t._tTime = t._tDur * s)),
t.parent && Ka(t),
r || Da(t.parent, t),
t
);
}
function Va(t) {
return t instanceof Zt ? Da(t) : Ua(t, t._dur);
}
function Ya(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 te(r[0], u, r[1 + o]);
}
function Za(t, e) {
return t || 0 === t ? e(t) : e;
}
function _a(t, e) {
return r(t) && (e = ut.exec(t)) ? e[1] : "";
}
function cb(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 fb(r) {
return (
(r = Pt(r)[0] || T("Invalid scope") || {}),
function (t) {
var e = r.current || r.nativeElement || r;
return Pt(
t,
e.querySelectorAll
? e
: e === r
? T("Invalid scope") || a.createElement("div")
: r
);
}
);
}
function gb(t) {
return t.sort(function () {
return 0.5 - Math.random();
});
}
function hb(t) {
if (s(t)) return t;
var p = v(t) ? t : { each: t },
_ = Vt(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: 0.5, edges: 0.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, X])[1])) {
for (
h = -X;
h < (h = r[f++].getBoundingClientRect().left) && f < d;
);
f < d && f--;
}
for (
c = y[d] = [],
i = T ? Math.min(f, d) * w - 0.5 : m % f,
n = f === X ? 0 : T ? (d * x) / f - 0.5 : (m / f) | 0,
l = X,
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) : J(a * a + s * s)),
h < o && (h = o),
o < l && (l = o);
"random" === m && gb(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 = _a(p.amount || p.each) || 0),
(_ = _ && d < 0 ? jt(_) : _);
}
return (
(d = (c[t] - c.min) / c.max || 0),
la(c.b + (_ ? _(d) : d) * c.v) + c.u
);
}
);
}
function ib(i) {
var n = Math.pow(10, ((i + "").split(".")[1] || "").length);
return function (e) {
var r = la(Math.round(parseFloat(e) / i) * i * n);
return (r - (r % 1)) / n + (t(e) ? 0 : _a(e));
};
}
function jb(h, e) {
var l,
f,
r = $(h);
return (
!r &&
v(h) &&
((l = r = h.radius || X),
h.values
? ((h = Pt(h.values)), (f = !t(h[0])) && (l *= l))
: (h = ib(h.increment))),
Za(
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 = X,
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 + _a(e)
);
}
: ib(h)
)
);
}
function kb(t, e, r, i) {
return Za($(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 + 0.99 * r)) / r) *
r *
i
) / i;
});
}
function ob(e, r, t) {
return Za(t, function (t) {
return e[~~r(t)];
});
}
function rb(t) {
return t.replace(tt, function (t) {
var e = t.indexOf("[") + 1,
r = t.substring(e || 7, e ? t.indexOf("]") : t.length - 1).split(et);
return kb(e ? r : +r[0], e ? 0 : +r[1], +r[2] || 1e-5);
});
}
function ub(t, e, r) {
var i,
n,
a,
s = t.labels,
o = X;
for (i in s)
(n = s[i] - e) < 0 == !!r &&
n &&
o > (n = Math.abs(n)) &&
((a = i), (o = n));
return a;
}
function wb(t) {
return (
Ca(t),
t.scrollTrigger && t.scrollTrigger.kill(!!I),
t.progress() < 1 && Dt(t, "onInterrupt"),
t
);
}
function zb(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: V,
render: ve,
add: Jt,
kill: Te,
modifier: ye,
rawVars: 0,
},
a = {
targetTest: 0,
get: 0,
getSetter: le,
aliases: {},
register: 0,
};
if ((Lt(), t !== i)) {
if (mt[e]) return;
ta(i, ta(xa(t, n), a)),
bt(i.prototype, bt(n, xa(t, a))),
(mt[(i.prop = e)] = i),
t.targetTest && (yt.push(i), (ct[e] = 1)),
(e =
("css" === e ? "CSS" : e.charAt(0).toUpperCase() + e.substr(1)) +
"Plugin");
}
U(e, i), t.register && t.register(Fe, i, we);
} else St.push(t);
}
function Cb(t, e, r) {
return (
((6 * (t += t < 0 ? 1 : 1 < t ? -1 : 0) < 1
? e + (r - e) * t * 6
: t < 0.5
? r
: 3 * t < 2
? e + (r - e) * (2 / 3 - t) * 6
: e) *
zt +
0.5) |
0
);
}
function Db(e, r, i) {
var n,
a,
s,
o,
u,
h,
l,
f,
d,
c,
p = e ? (t(e) ? [e >> 16, (e >> 8) & zt, e & zt] : 0) : Et.black;
if (!p) {
if (("," === e.substr(-1) && (e = e.substr(0, e.length - 1)), Et[e]))
p = Et[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) & zt,
p & zt,
parseInt(e.substr(7), 16) / 255,
];
p = [(e = parseInt(e.substr(1), 16)) >> 16, (e >> 8) & zt, e & zt];
} else if ("hsl" === e.substr(0, 3))
if (((p = c = e.match(rt)), r)) {
if (~e.indexOf("="))
return (p = e.match(it)), 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 <= 0.5 ? h * (u + 1) : h + u - h * u)),
3 < p.length && (p[3] *= 1),
(p[0] = Cb(o + 1 / 3, n, a)),
(p[1] = Cb(o, n, a)),
(p[2] = Cb(o - 1 / 3, n, a));
else p = e.match(rt) || Et.transparent;
p = p.map(Number);
}
return (
r &&
!c &&
((n = p[0] / zt),
(a = p[1] / zt),
(s = p[2] / zt),
(h = ((l = Math.max(n, a, s)) + (f = Math.min(n, a, s))) / 2),
l === f
? (o = u = 0)
: ((d = l - f),
(u = 0.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 + 0.5)),
(p[1] = ~~(100 * u + 0.5)),
(p[2] = ~~(100 * h + 0.5))),
i && p.length < 4 && (p[3] = 1),
p
);
}
function Eb(t) {
var r = [],
i = [],
n = -1;
return (
t.split(Rt).forEach(function (t) {
var e = t.match(nt) || [];
r.push.apply(r, e), i.push((n += e.length + 1));
}),
(r.c = i),
r
);
}
function Fb(t, e, r) {
var i,
n,
a,
s,
o = "",
u = (t + o).match(Rt),
h = e ? "hsla(" : "rgba(",
l = 0;
if (!u) return t;
if (
((u = u.map(function (t) {
return (
(t = Db(t, e, 1)) &&
h +
(e ? t[0] + "," + t[1] + "%," + t[2] + "%," + t[3] : t.join(",")) +
")"
);
})),
r && ((a = Eb(t)), (i = r.c).join(o) !== a.c.join(o)))
)
for (s = (n = t.replace(Rt, "1").split(nt)).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(Rt)).length - 1; l < s; l++) o += n[l] + u[l];
return o + n[s];
}
function Ib(t) {
var e,
r = t.join(" ");
if (((Rt.lastIndex = 0), Rt.test(r)))
return (
(e = Ft.test(r)),
(t[1] = Fb(t[1], e)),
(t[0] = Fb(t[0], e, Eb(t[1]))),
!0
);
}
function Rb(t) {
var e = (t + "").split("("),
r = Bt[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(Nt, "").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(ra)
)
: Bt._CE && Yt.test(t)
? Bt._CE("", t)
: r;
}
function Tb(t, e) {
for (var r, i = t._first; i; )
i instanceof Zt
? Tb(i, e)
: !i.vars.yoyoEase ||
(i._yoyo && i._repeat) ||
i._yoyo === e ||
(i.timeline
? Tb(i.timeline, e)
: ((r = i._ease),
(i._ease = i._yEase),
(i._yEase = r),
(i._yoyo = e))),
(i = i._next);
}
function Vb(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 < 0.5 ? e(2 * t) / 2 : 1 - e(2 * (1 - t)) / 2;
});
var n,
a = { easeIn: e, easeOut: r, easeInOut: i };
return (
ja(t, function (t) {
for (var e in ((Bt[t] = ht[t] = a), (Bt[(n = t.toLowerCase())] = r), a))
Bt[
n + ("easeIn" === e ? ".in" : "easeOut" === e ? ".out" : ".inOut")
] = Bt[t + "." + e] = a[e];
}),
a
);
}
function Wb(e) {
return function (t) {
return t < 0.5 ? (1 - e(1 - 2 * t)) / 2 : 0.5 + e(2 * (t - 0.5)) / 2;
};
}
function Xb(r, t, e) {
function Lm(t) {
return 1 === t ? 1 : i * Math.pow(2, -10 * t) * G((t - a) * n) + 1;
}
var i = 1 <= t ? t : 1,
n = (e || (r ? 0.3 : 0.45)) / (t < 1 ? t : 1),
a = (n / Z) * (Math.asin(1 / i) || 0),
s =
"out" === r
? Lm
: "in" === r
? function (t) {
return 1 - Lm(1 - t);
}
: Wb(Lm);
return (
(n = Z / n),
(s.config = function (t, e) {
return Xb(r, t, e);
}),
s
);
}
function Yb(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);
}
: Wb(Tm);
return (
(t.config = function (t) {
return Yb(e, t);
}),
t
);
}
var F,
I,
l,
L,
h,
n,
a,
i,
o,
f,
d,
c,
p,
_,
m,
g,
b,
k,
O,
M,
C,
P,
A,
D,
z,
E,
B,
Y,
N = {
autoSleep: 120,
force3D: "auto",
nullTargetWarn: 1,
units: { lineHeight: "" },
},
j = { duration: 0.5, overwrite: !1, delay: 0 },
X = 1e8,
q = 1 / X,
Z = 2 * Math.PI,
W = Z / 4,
H = 0,
J = Math.sqrt,
Q = Math.cos,
G = Math.sin,
K =
("function" == typeof ArrayBuffer && ArrayBuffer.isView) ||
function () {},
$ = Array.isArray,
tt = /random\([^)]+\)/g,
et = /,\s*/g,
rt = /(?:-?\.?\d|\.)+/gi,
it = /[-+=.]*\d+[.e\-+]*\d*[e\-+]*\d*/g,
nt = /[-+=.]*\d+[.e-]*\d*[a-z%]*/g,
at = /[-+=.]*\d+\.?\d*(?:e-|e\+)?\d*/gi,
st = /[+-]=-?[.\d]+/,
ot = /[^,'"\[\]\s]+/gi,
ut = /^[+\-=e\s\d]*\d+[.\d]*([a-z]*|%)\s*$/i,
ht = {},
lt = { suppressEvents: !0, isStart: !0, kill: !1 },
ft = { suppressEvents: !0, kill: !1 },
dt = { suppressEvents: !0 },
ct = {},
pt = [],
_t = {},
mt = {},
gt = {},
vt = 30,
yt = [],
Tt = "",
bt = function _merge(t, e) {
for (var r in e) t[r] = e[r];
return t;
},
wt = function _animationCycle(t, e) {
var r = Math.floor((t = la(t / e)));
return t && r === t ? r - 1 : r;
},
xt = function _isFromOrFromStart(t) {
var e = t.data;
return "isFromStart" === e || "isStart" === e;
},
kt = { _start: 0, endTime: V, totalDuration: V },
Ot = function _parsePosition(t, e, i) {
var n,
a,
s,
o = t.labels,
u = t._recent || kt,
h = t.duration() >= X ? 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;
},
Ct = [].slice,
Pt = function toArray(t, e, i) {
return l && !e && l.selector
? l.selector(t)
: !r(t) || i || (!n && Lt())
? $(t)
? (function _flatten(t, e, i) {
return (
void 0 === i && (i = []),
t.forEach(function (t) {
return (r(t) && !e) || cb(t, 1)
? i.push.apply(i, Pt(t))
: i.push(t);
}) || i
);
})(t, i)
: cb(t)
? Ct.call(t, 0)
: t
? [t]
: []
: Ct.call((e || a).querySelectorAll(t), 0);
},
At = function mapRange(e, t, r, i, n) {
var a = t - e,
s = i - r;
return Za(n, function (t) {
return r + (((t - e) / a) * s || 0);
});
},
Dt = 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 && pt.length && oa(),
h && (l = h),
(a = i ? o.apply(n, i) : o.call(n)),
(l = u),
a
);
},
St = [],
zt = 255,
Et = {
aqua: [0, zt, zt],
lime: [0, zt, 0],
silver: [192, 192, 192],
black: [0, 0, 0],
maroon: [128, 0, 0],
teal: [0, 128, 128],
blue: [0, 0, zt],
navy: [0, 0, 128],
white: [zt, zt, zt],
olive: [128, 128, 0],
yellow: [zt, zt, 0],
orange: [zt, 165, 0],
gray: [128, 128, 128],
purple: [128, 0, 128],
green: [0, 128, 0],
red: [zt, 0, 0],
pink: [zt, 192, 203],
cyan: [0, zt, zt],
transparent: [zt, zt, zt, 0],
},
Rt = (function () {
var t,
e =
"(?:\\b(?:(?:rgb|rgba|hsl|hsla)\\(.+?\\))|\\B#(?:[0-9a-f]{3,4}){1,2}\\b";
for (t in Et) e += "|" + t + "\\b";
return new RegExp(e + ")", "gi");
})(),
Ft = /hsl[a]?\(/,
It =
((O = Date.now),
(M = 500),
(C = 33),
(P = O()),
(A = P),
(z = D = 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 || {}),
(ht.gsap = Fe),
(h.gsapVersions || (h.gsapVersions = [])).push(Fe.version),
R(i || h.GreenSockGlobals || (!h.gsap && h) || {}),
St.forEach(zb)),
(m =
"undefined" != typeof requestAnimationFrame &&
requestAnimationFrame),
p && g.sleep(),
(_ =
m ||
function (t) {
return setTimeout(t, (z - 1e3 * g.time + 1) | 0);
}),
(c = 1),
Al(2));
},
sleep: function sleep() {
(m ? cancelAnimationFrame : clearTimeout)(p), (c = 0), (_ = V);
},
lagSmoothing: function lagSmoothing(t, e) {
(M = t || 1 / 0), (C = Math.min(e || 33, M));
},
fps: function fps(t) {
(D = 1e3 / (t || 240)), (z = 1e3 * g.time + D);
},
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), E[e ? "unshift" : "push"](a), Lt(), a;
},
remove: function remove(t, e) {
~(e = E.indexOf(t)) && E.splice(e, 1) && e <= k && k--;
},
_listeners: (E = []),
})),
Lt = function _wake() {
return !c && It.wake();
},
Bt = {},
Yt = /^[\d.\-M][\d.\-,\s]/,
Nt = /["']/g,
jt = function _invertEase(e) {
return function (t) {
return 1 - e(1 - t);
};
},
Vt = function _parseEase(t, e) {
return (t && (s(t) ? t : Bt[t] || Rb(t))) || e;
};
function Al(t) {
var e,
r,
i,
n,
a = O() - A,
s = !0 === t;
if (
((M < a || a < 0) && (P += a - C),
(0 < (e = (i = (A += a) - P) - z) || s) &&
((n = ++g.frame),
(b = i - 1e3 * g.time),
(g.time = i /= 1e3),
(z += e + (D <= e ? 4 : D - e)),
(r = 1)),
s || (p = _(Al)),
r)
)
for (k = 0; k < E.length; k++) E[k](i, b, n, t);
}
function jn(t) {
return t < Y
? B * t * t
: t < 0.7272727272727273
? B * Math.pow(t - 1.5 / 2.75, 2) + 0.75
: t < 0.9090909090909092
? B * (t -= 2.25 / 2.75) * t + 0.9375
: B * Math.pow(t - 2.625 / 2.75, 2) + 0.984375;
}
ja("Linear,Quad,Cubic,Quart,Quint,Strong", function (t, e) {
var r = e < 5 ? e + 1 : e;
Vb(
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 < 0.5
? Math.pow(2 * t, r) / 2
: 1 - Math.pow(2 * (1 - t), r) / 2;
}
);
}),
(Bt.Linear.easeNone = Bt.none = Bt.Linear.easeIn),
Vb("Elastic", Xb("in"), Xb("out"), Xb()),
(B = 7.5625),
(Y = 1 / 2.75),
Vb(
"Bounce",
function (t) {
return 1 - jn(1 - t);
},
jn
),
Vb("Expo", function (t) {
return Math.pow(2, 10 * (t - 1)) * t + t * t * t * t * t * t * (1 - t);
}),
Vb("Circ", function (t) {
return -(J(1 - t * t) - 1);
}),
Vb("Sine", function (t) {
return 1 === t ? 1 : 1 - Q(t * W);
}),
Vb("Back", Yb("in"), Yb("out"), Yb()),
(Bt.SteppedEase =
Bt.steps =
ht.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, 0.99999999, t)) | 0) + n) * r;
};
},
}),
(j.ease = Bt["quad.out"]),
ja(
"onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt",
function (t) {
return (Tt += t + "," + t + "Params,");
}
);
var Ut,
Xt = function GSCache(t, e) {
(this.id = H++),
((t._gsap = this).target = t),
(this.harness = e),
(this.get = e ? e.get : ia),
(this.set = e ? e.getSetter : le);
},
qt =
(((Ut = 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;
}),
(Ut.duration = function duration(t) {
return arguments.length
? this.totalDuration(
0 < this._repeat ? t + (t + this._rDelay) * this._repeat : t
)
: this.totalDuration() && this._dur;
}),
(Ut.totalDuration = function totalDuration(t) {
return arguments.length
? ((this._dirty = 0),
Ua(
this,
this._repeat < 0
? t
: (t - this._repeat * this._rDelay) / (this._repeat + 1)
))
: this._tDur;
}),
(Ut.totalTime = function totalTime(t, e) {
if ((Lt(), !arguments.length)) return this._tTime;
var r = this._dp;
if (r && r.smoothChildTiming && this._ts) {
for (La(this, t), !r._dp || r.parent || Ma(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)) &&
Na(this._dp, this, this._start - this._delay);
}
return (
(this._tTime !== t ||
(!this._dur && !e) ||
(this._initted && Math.abs(this._zTime) === q) ||
(!this._initted && this._dur && t) ||
(!t && !this._initted && (this.add || this._ptLookup))) &&
(this._ts || (this._pTime = t), qa(this, t, e)),
this
);
}),
(Ut.time = function time(t, e) {
return arguments.length
? this.totalTime(
Math.min(this.totalDuration(), t + Ha(this)) %
(this._dur + this._rDelay) || (t ? this._dur : 0),
e
)
: this._time;
}),
(Ut.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;
}),
(Ut.progress = function progress(t, e) {
return arguments.length
? this.totalTime(
this.duration() *
(!this._yoyo || 1 & this.iteration() ? t : 1 - t) +
Ha(this),
e
)
: this.duration()
? Math.min(1, this._time / this._dur)
: 0 < this.rawTime()
? 1
: 0;
}),
(Ut.iteration = function iteration(t, e) {
var r = this.duration() + this._rDelay;
return arguments.length
? this.totalTime(this._time + (t - 1) * r, e)
: this._repeat
? wt(this._tTime, r) + 1
: 1;
}),
(Ut.timeScale = function timeScale(t, e) {
if (!arguments.length) return this._rts === -q ? 0 : this._rts;
if (this._rts === t) return this;
var r =
this.parent && this._ts ? Ja(this.parent._time, this) : this._tTime;
return (
(this._rts = +t || 0),
(this._ts = this._ps || t === -q ? 0 : this._rts),
this.totalTime(
Mt(-Math.abs(this._delay), this.totalDuration(), r),
!1 !== e
),
Ka(this),
(function _recacheAncestors(t) {
for (var e = t.parent; e && e.parent; )
(e._dirty = 1), e.totalDuration(), (e = e.parent);
return t;
})(this)
);
}),
(Ut.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))
: (Lt(),
(this._ts = this._rts),
this.totalTime(
this.parent && !this.parent.smoothChildTiming
? this.rawTime()
: this._tTime || this._pTime,
1 === this.progress() &&
Math.abs(this._zTime) !== q &&
(this._tTime -= q)
))),
this)
: this._ps;
}),
(Ut.startTime = function startTime(t) {
if (arguments.length) {
this._start = la(t);
var e = this.parent || this._dp;
return (
!e ||
(!e._sort && this.parent) ||
Na(e, this, this._start - this._delay),
this
);
}
return this._start;
}),
(Ut.endTime = function endTime(t) {
return (
this._start +
(w(t) ? this.totalDuration() : this.duration()) /
Math.abs(this._ts || 1)
);
}),
(Ut.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
? Ja(e.rawTime(t), this)
: this._tTime
: this._tTime;
}),
(Ut.revert = function revert(t) {
void 0 === t && (t = dt);
var e = I;
return (
(I = t),
pa(this) &&
(this.timeline && this.timeline.revert(t),
this.totalTime(-0.01, t.suppressEvents)),
"nested" !== this.data && !1 !== t.kill && this.kill(),
(I = e),
this
);
}),
(Ut.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;
}),
(Ut.repeat = function repeat(t) {
return arguments.length
? ((this._repeat = t === 1 / 0 ? -2 : t), Va(this))
: -2 === this._repeat
? 1 / 0
: this._repeat;
}),
(Ut.repeatDelay = function repeatDelay(t) {
if (arguments.length) {
var e = this._time;
return (this._rDelay = t), Va(this), e ? this.time(e) : this;
}
return this._rDelay;
}),
(Ut.yoyo = function yoyo(t) {
return arguments.length ? ((this._yoyo = t), this) : this._yoyo;
}),
(Ut.seek = function seek(t, e) {
return this.totalTime(Ot(this, t), w(e));
}),
(Ut.restart = function restart(t, e) {
return (
this.play().totalTime(t ? -this._delay : 0, w(e)),
this._dur || (this._zTime = -q),
this
);
}),
(Ut.play = function play(t, e) {
return null != t && this.seek(t, e), this.reversed(!1).paused(!1);
}),
(Ut.reverse = function reverse(t, e) {
return (
null != t && this.seek(t || this.totalDuration(), e),
this.reversed(!0).paused(!1)
);
}),
(Ut.pause = function pause(t, e) {
return null != t && this.seek(t, e), this.paused(!0);
}),
(Ut.resume = function resume() {
return this.paused(!1);
}),
(Ut.reversed = function reversed(t) {
return arguments.length
? (!!t !== this.reversed() &&
this.timeScale(-this._rts || (t ? -q : 0)),
this)
: this._rts < 0;
}),
(Ut.invalidate = function invalidate() {
return (this._initted = this._act = 0), (this._zTime = -q), this;
}),
(Ut.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) - q
)
);
}),
(Ut.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];
}),
(Ut.then = function then(t) {
var i = this,
n = i._prom;
return new Promise(function (e) {
function Fo() {
var t = i.then;
(i.then = null),
n && n(),
s(r) && (r = r(i)) && (r.then || r === i) && (i.then = t),
e(r),
(i.then = t);
}
var r = s(t) ? t : sa;
(i._initted && 1 === i.totalProgress() && 0 <= i._ts) ||
(!i._tTime && i._ts < 0)
? Fo()
: (i._prom = Fo);
});
}),
(Ut.kill = function kill() {
wb(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),
Ua(this, +t.duration, 1, 1),
(this.data = t.data),
l && (this._ctx = l).data.push(this),
c || It.wake();
}
ta(qt.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: -q,
_prom: 0,
_ps: !1,
_rts: 1,
});
var Zt = (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)),
L && Na(t.parent || L, _assertThisInitialized(r), e),
t.reversed && r.reverse(),
t.paused && r.paused(!0),
t.scrollTrigger && Oa(_assertThisInitialized(r), t.scrollTrigger),
r
);
}
_inheritsLoose(Timeline, i);
var e = Timeline.prototype;
return (
(e.to = function to(t, e, r) {
return Ya(0, arguments, this), this;
}),
(e.from = function from(t, e, r) {
return Ya(1, arguments, this), this;
}),
(e.fromTo = function fromTo(t, e, r, i) {
return Ya(2, arguments, this), this;
}),
(e.set = function set(t, e, r) {
return (
(e.duration = 0),
(e.parent = this),
ya(e).repeatDelay || (e.repeat = 0),
(e.immediateRender = !!e.immediateRender),
new te(t, e, Ot(this, r), 1),
this
);
}),
(e.call = function call(t, e, r) {
return Na(this, te.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 te(t, r, Ot(this, n)),
this
);
}),
(e.staggerFrom = function staggerFrom(t, e, r, i, n, a, s) {
return (
(r.runBackwards = 1),
(ya(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),
(ya(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 : la(t),
y = this._zTime < 0 != t < 0 && (this._initted || !g);
if (
(this !== L && 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 = la(v % o)),
v === m
? ((s = this._repeat), (i = g))
: ((s = ~~(d = la(v / o))) && s === d && ((i = g), s--),
g < i && (i = g)),
(d = wt(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 : la(s * o)), e, !g)._lock = 0),
(this._tTime = v),
!e && this.parent && Dt(this, "onRepeat"),
this.vars.repeatRefresh &&
!p &&
((this.invalidate()._lock = 1), (d = s)),
(_ && _ !== 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;
Tb(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, la(_), la(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 &&
g &&
!e &&
!d &&
(Dt(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 = -q);
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 || (I && pa(n))
),
i !== this._time || (!this._ts && !u))
) {
(h = 0), a && (v += this._zTime = w ? -q : q);
break;
}
}
n = a;
}
}
if (
h &&
!e &&
(this.pause(),
(h.render(_ <= i ? 0 : -q)._zTime = _ <= i ? 1 : -1),
this._ts)
)
return (this._start = f), Ka(this), this.render(t, e, r);
this._onUpdate && !e && Dt(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)) ||
Ca(this, 1),
e ||
(t < 0 && !_) ||
(!v && !_ && m) ||
(Dt(
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 = Ot(this, i, e)), !(e instanceof qt))) {
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 = te.delayedCall(0, e);
}
return this !== e ? Na(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 = -X);
for (var n = [], a = this._first; a; )
a._start >= i &&
(a instanceof te
? 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 && Ba(this, t),
t === this._recent && (this._recent = this._last),
Da(this));
}),
(e.totalTime = function totalTime(t, e) {
return arguments.length
? ((this._forcing = 1),
!this._dp &&
this._ts &&
(this._start = la(
It.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] = Ot(this, e)), this;
}),
(e.removeLabel = function removeLabel(t) {
return delete this.labels[t], this;
}),
(e.addPause = function addPause(t, e, r) {
var i = te.delayedCall(0, e || V, r);
return (
(i.data = "isPause"), (this._hasPause = 1), Na(this, i, Ot(this, t))
);
}),
(e.removePause = function removePause(t) {
var e = this._first;
for (t = Ot(this, t); e; )
e._start === t && "isPause" === e.data && Ca(e), (e = e._next);
}),
(e.killTweensOf = function killTweensOf(t, e, r) {
for (var i = this.getTweensOf(t, r), n = i.length; n--; )
Wt !== i[n] && i[n].kill(t, e);
return this;
}),
(e.getTweensOf = function getTweensOf(e, r) {
for (var i, n = [], a = Pt(e), s = this._first, o = t(r); s; )
s instanceof te
? na(s._targets, a) &&
(o
? (!Wt || (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 = Ot(i, t),
a = e.startAt,
s = e.onStart,
o = e.onStartParams,
u = e.immediateRender,
h = te.to(
i,
ta(
{
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()
) ||
q,
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 && Ua(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, ta({ startAt: { time: Ot(this, t) } }, r));
}),
(e.recent = function recent() {
return this._recent;
}),
(e.nextLabel = function nextLabel(t) {
return void 0 === t && (t = this._time), ub(this, Ot(this, t));
}),
(e.previousLabel = function previousLabel(t) {
return void 0 === t && (t = this._time), ub(this, Ot(this, t), 1);
}),
(e.currentLabel = function currentLabel(t) {
return arguments.length
? this.seek(t, !0)
: this.previousLabel(this._time + q);
}),
(e.shiftChildren = function shiftChildren(t, e, r) {
void 0 === r && (r = 0);
var i,
n = this._first,
a = this.labels;
for (t = la(t); 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 Da(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 = {}),
Da(this)
);
}),
(e.totalDuration = function totalDuration(t) {
var e,
r,
i,
n = 0,
a = this,
s = a._last,
o = X;
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), (Na(a, s, r - s._delay, 1)._lock = 0))
: (o = r),
r < 0 &&
s._ts &&
((n -= r),
((!i && !a._dp) || (i && i.smoothChildTiming)) &&
((a._start += la(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);
Ua(a, a === L && a._time > n ? a._time : n, 1, 1), (a._dirty = 0);
}
return a._tDur;
}),
(Timeline.updateRoot = function updateRoot(t) {
if ((L._ts && (qa(L, Ja(t, L)), (f = It.frame)), It.frame >= vt)) {
vt += N.autoSleep || 120;
var e = L._first;
if ((!e || !e._ts) && N.autoSleep && It._listeners.length < 2) {
for (; e && !e._ts; ) e = e._next;
e || It.sleep();
}
}
}),
Timeline
);
})(qt);
ta(Zt.prototype, { _lock: 0, _hasPause: 0, _forcing: 0 });
function dc(t, e, i, n, a, o) {
var u, h, l, f;
if (
mt[t] &&
!1 !==
(u = new mt[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) || K(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 we(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 jc(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 Wt,
Ht,
Jt = 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 ? ue : re) : ee;
if (
(r(n) &&
(~n.indexOf("random(") && (n = rb(n)),
"=" === n.charAt(1) &&
((!(d = ma(p, n) + (_a(p) || 0)) && 0 !== d) || (n = d))),
!f || p !== n || Ht)
)
return isNaN(p * n) || "" === n
? (c || e in t || S(e, n),
function _addComplexStringPropTween(t, e, r, i, n, a, s) {
var o,
u,
h,
l,
f,
d,
c,
p,
_ = new we(this._pt, t, e, 0, 1, ge, null, n),
m = 0,
g = 0;
for (
_.b = r,
_.e = i,
r += "",
(c = ~(i += "").indexOf("random(")) && (i = rb(i)),
a && (a((p = [r, i]), t, e), (r = p[0]), (i = p[1])),
u = r.match(at) || [];
(o = at.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) ? ma(d, l) - d : parseFloat(l) - d,
m: h && h < 4 ? Math.round : 0,
}),
(m = at.lastIndex));
return (
(_.c = m < i.length ? i.substring(m, i.length) : ""),
(_.fp = s),
(st.test(i) || c) && (_.e = 0),
(this._pt = _)
);
}.call(this, t, e, p, n, _, h || N.stringFilter, l))
: ((d = new we(
this._pt,
t,
e,
+p || 0,
n - (p || 0),
"boolean" == typeof c ? _e : ce,
0,
_
)),
l && (d.fp = l),
u && d.modifier(u, this, t),
(this._pt = d));
},
Qt = 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,
k = m.yoyoEase,
O = m.keyframes,
M = m.autoRevert,
C = t._dur,
P = t._startAt,
A = t._targets,
D = t.parent,
S = D && "nested" === D.data ? D.vars.targets : A,
z = "auto" === t._overwrite && !F,
E = t.timeline;
if (
(!E || (O && g) || (g = "none"),
(t._ease = Vt(g, j.ease)),
(t._yEase = k ? jt(Vt(!0 === k ? g : k, j.ease)) : 0),
k &&
t._yoyo &&
!t._repeat &&
((k = t._yEase), (t._yEase = t._ease), (t._ease = k)),
(t._from = !E && !!m.runBackwards),
!E || (O && !m.stagger))
) {
if (
((p = (l = A[0] ? ha(A[0]).harness : 0) && m[l.prop]),
(i = xa(m, ct)),
P &&
(P._zTime < 0 && P.progress(1),
e < 0 && x && y && !M
? P.render(-1, !0)
: P.revert(x && C ? ft : lt),
(P._lazy = 0)),
v)
) {
if (
(Ca(
(t._startAt = te.set(
A,
ta(
{
data: "isStart",
overwrite: !1,
parent: D,
immediateRender: !0,
lazy: !P && w(T),
startAt: null,
delay: 0,
onUpdate:
b &&
function () {
return Dt(t, "onUpdate");
},
stagger: 0,
},
v
)
))
),
(t._startAt._dp = 0),
(t._startAt._sat = t),
e < 0 && (I || (!y && !M)) && t._startAt.revert(ft),
y && C && e <= 0 && r <= 0)
)
return void (e && (t._zTime = e));
} else if (x && C && !P)
if (
(e && (y = !1),
(a = ta(
{
overwrite: !1,
data: "isFromStart",
lazy: y && !P && w(T),
immediateRender: y,
stagger: 0,
parent: D,
},
i
)),
p && (a[l.prop] = p),
Ca((t._startAt = te.set(A, a))),
(t._startAt._dp = 0),
(t._startAt._sat = t),
e < 0 && (I ? t._startAt.revert(ft) : t._startAt.render(-1, !0)),
(t._zTime = e),
y)
) {
if (!e) return;
} else _initTween(t._startAt, q, q);
for (
t._pt = t._ptCache = 0, T = (C && w(T)) || (T && !C), n = 0;
n < A.length;
n++
) {
if (
((h = (o = A[n])._gsap || ga(A)[n]._gsap),
(t._ptLookup[n] = d = {}),
_t[h.id] && pt.length && oa(),
(c = S === A ? n : S.indexOf(o)),
l &&
!1 !== (f = new l()).init(o, p || i, t, c, S) &&
((t._pt = s =
new we(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)
mt[a] && (f = dc(a, i, t, c, o, S))
? f.priority && (u = 1)
: (d[a] = s =
Jt.call(t, o, a, "get", i[a], c, S, 0, m.stringFilter));
t._op && t._op[n] && t.kill(o, t._op[n]),
z &&
t._pt &&
((Wt = t),
L.killTweensOf(o, d, t.globalTime(e)),
(_ = !t.parent),
(Wt = 0)),
t._pt && T && (_t[h.id] = 1);
}
u && be(t), t._onInit && t._onInit(t);
}
(t._onUpdate = b),
(t._initted = (!t._op || t._pt) && !_),
O && e <= 0 && E.render(X, !0, !0);
},
Gt = function _parseFuncOrString(t, e, i, n, a) {
return s(t)
? t.call(e, i, n, a)
: r(t) && ~t.indexOf("random(")
? rb(t)
: t;
},
Kt = Tt + "repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase,autoRevert",
$t = {};
ja(Kt + ",id,stagger,delay,duration,paused,scrollTrigger", function (t) {
return ($t[t] = 1);
});
var te = (function (R) {
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 = R.call(this, n ? r : ya(r)) || this).vars,
_ = p.duration,
m = p.delay,
g = p.immediateRender,
b = p.stagger,
x = p.overwrite,
k = p.keyframes,
O = p.defaults,
M = p.scrollTrigger,
C = p.yoyoEase,
P = r.parent || L,
A = ($(e) || K(e) ? t(e[0]) : "length" in r) ? [e] : Pt(e);
if (
((a._targets = A.length
? ga(A)
: T(
"GSAP target " + e + " not found. https://gsap.com",
!N.nullTargetWarn
) || []),
(a._ptLookup = []),
(a._overwrite = x),
k || b || y(_) || y(m))
) {
if (
((r = a.vars),
(s = a.timeline =
new Zt({
data: "nested",
defaults: O || {},
targets: P && "nested" === P.data ? P.vars.targets : A,
})).kill(),
(s.parent = s._dp = _assertThisInitialized(a)),
(s._start = 0),
b || y(_) || y(m))
) {
if (((h = A.length), (d = b && hb(b)), v(b)))
for (l in b) ~Kt.indexOf(l) && ((c = c || {})[l] = b[l]);
for (o = 0; o < h; o++)
((u = xa(r, $t)).stagger = 0),
C && (u.yoyoEase = C),
c && bt(u, c),
(f = A[o]),
(u.duration = +Gt(_, _assertThisInitialized(a), o, f, A)),
(u.delay =
(+Gt(m, _assertThisInitialized(a), o, f, A) || 0) - a._delay),
!b &&
1 === h &&
u.delay &&
((a._delay = m = u.delay), (a._start += m), (u.delay = 0)),
s.to(f, u, d ? d(o, f, A) : 0),
(s._ease = Bt.none);
s.duration() ? (_ = m = 0) : (a.timeline = 0);
} else if (k) {
ya(ta(s.vars.defaults, { ease: "none" })),
(s._ease = Vt(k.ease || r.ease || "none"));
var D,
S,
z,
E = 0;
if ($(k))
k.forEach(function (t) {
return s.to(A, t, ">");
}),
s.duration();
else {
for (l in ((u = {}), k))
"ease" === l || "easeEach" === l || jc(l, k[l], u, k.easeEach);
for (l in u)
for (
D = u[l].sort(function (t, e) {
return t.t - e.t;
}),
o = E = 0;
o < D.length;
o++
)
((z = {
ease: (S = D[o]).e,
duration: ((S.t - (o ? D[o - 1].t : 0)) / 100) * _,
})[l] = S.v),
s.to(A, z, E),
(E += z.duration);
s.duration() < _ && s.to({}, { duration: _ - s.duration() });
}
}
_ || a.duration((_ = s.duration()));
} else a.timeline = 0;
return (
!0 !== x ||
F ||
((Wt = _assertThisInitialized(a)), L.killTweensOf(A), (Wt = 0)),
Na(P, _assertThisInitialized(a), i),
r.reversed && a.reverse(),
r.paused && a.paused(!0),
(g ||
(!_ &&
!k &&
a._start === la(P._time) &&
w(g) &&
(function _hasNoPausedAncestors(t) {
return !t || (t._ts && _hasNoPausedAncestors(t.parent));
})(_assertThisInitialized(a)) &&
"nested" !== P.data)) &&
((a._tTime = -q), a.render(Math.max(0, -m) || 0)),
M && Oa(_assertThisInitialized(a), M),
a
);
}
_inheritsLoose(Tween, R);
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 - q < t && !_ ? c : t < q ? 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 = la(m % s)),
m === c
? ((a = this._repeat), (i = p))
: (a = ~~(o = la(m / s))) && a === o
? ((i = p), a--)
: p < i && (i = p),
(u = this._yoyo && 1 & a) && ((f = this._yEase), (i = p - i)),
(o = wt(this._tTime, s)),
i === d && !r && this._initted && a === o)
)
return (this._tTime = m), this;
a !== o &&
(l && this._yEase && Tb(l, u),
this.vars.repeatRefresh &&
!u &&
!this._lock &&
i !== s &&
this._initted &&
((this._lock = r = 1),
(this.render(la(s * a), !0).invalidate()._lock = 0)));
}
if (!this._initted) {
if (Pa(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 && (Dt(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 &&
(_ && Fa(this, t, 0, r), Dt(this, "onUpdate")),
this._repeat &&
a !== o &&
this.vars.onRepeat &&
!e &&
this.parent &&
Dt(this, "onRepeat"),
(m !== this._tDur && m) ||
this._tTime !== m ||
(_ && !this._onUpdate && Fa(this, t, 0, !0),
(!t && p) ||
!(
(m === this._tDur && 0 < this._ts) ||
(!m && this._ts < 0)
) ||
Ca(this, 1),
e ||
(_ && !d) ||
!(m || d || u) ||
(Dt(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 || !xt(t))) ||
((t._ts < 0 || t._dp._ts < 0) && !xt(t))))
? 0
: 1,
h = t._rDelay,
l = 0;
if (
(h &&
t._repeat &&
((l = Mt(0, t._tDur, e)),
(a = wt(l, h)),
t._yoyo && 1 & a && (u = 1 - u),
a !== wt(t._tTime, h) &&
((o = 1 - u),
t.vars.repeatRefresh && t._initted && t.invalidate())),
u !== o || I || i || t._zTime === q || (!e && t._zTime))
) {
if (!t._initted && Pa(t, e, i, r, l)) return;
for (
s = t._zTime,
t._zTime = e || (r ? q : 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 && Fa(t, e, 0, !0),
t._onUpdate && !r && Dt(t, "onUpdate"),
l && t._repeat && !r && t.parent && Dt(t, "onRepeat"),
(e >= t._tDur || e < 0) &&
t.ratio === u &&
(u && Ca(t, 1),
r ||
I ||
(Dt(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),
R.prototype.invalidate.call(this, t)
);
}),
(e.resetTo = function resetTo(t, e, r, i, n) {
c || It.wake(), this._ts || this.play();
var a,
s = Math.min(this._dur, (this._dp._time - this._start) * this._ts);
return (
this._initted || Qt(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 (
(Ht = 1),
(t.vars[e] = "+=0"),
Qt(t, s),
(Ht = 0),
o ? T(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 = ka(r) + _a(h.e)),
h.b && (h.b = u.s + _a(h.b));
})(this, t, e, r, i, a, s, n)
? this.resetTo(t, e, r, i, 1)
: (La(this, 0),
this.parent ||
Aa(
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
? wb(this)
: this.scrollTrigger && this.scrollTrigger.kill(!!I),
this
);
if (this.timeline) {
var i = this.timeline.totalDuration();
return (
this.timeline.killTweensOf(t, e, Wt && !0 !== Wt.vars.overwrite)
._first || wb(this),
this.parent &&
i !== this.timeline.totalDuration() &&
Ua(this, (this._dur * this.timeline._tDur) / i, 0, 1),
this
);
}
var n,
a,
s,
o,
u,
h,
l,
f = this._targets,
d = t ? Pt(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), wb(this);
for (
n = this._op = this._op || [],
"all" !== e &&
(r(e) &&
((u = {}),
ja(e, function (t) {
return (u[t] = 1);
}),
(e = u)),
(e = (function _addAliasesToVars(t, e) {
var r,
i,
n,
a,
s = t[0] ? ha(t[0]).harness : 0,
o = s && s.aliases;
if (!o) return e;
for (i in ((r = bt({}, 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)) || Ba(this, h, "_pt"),
delete a[u]),
"all" !== s && (s[u] = 1);
return this._initted && !this._pt && p && wb(this), this;
}),
(Tween.to = function to(t, e, r) {
return new Tween(t, e, r);
}),
(Tween.from = function from(t, e) {
return Ya(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 Ya(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 L.killTweensOf(t, e, r);
}),
Tween
);
})(qt);
ta(te.prototype, { _targets: [], _lazy: 0, _startAt: 0, _op: 0, _onInit: 0 }),
ja("staggerTo,staggerFrom,staggerFromTo", function (r) {
te[r] = function () {
var t = new Zt(),
e = Ct.call(arguments, 0);
return e.splice("staggerFromTo" === r ? 5 : 4, 0, 0), t[r].apply(t, e);
};
});
function rc(t, e, r) {
return t.setAttribute(e, r);
}
function zc(t, e, r, i) {
i.mSet(t, e, i.m.call(i.tween, r, i.mt), i);
}
var ee = function _setterPlain(t, e, r) {
return (t[e] = r);
},
re = function _setterFunc(t, e, r) {
return t[e](r);
},
ue = function _setterFuncWithParam(t, e, r, i) {
return t[e](i.fp, r);
},
le = function _getSetter(t, e) {
return s(t[e]) ? re : u(t[e]) && t.setAttribute ? rc : ee;
},
ce = function _renderPlain(t, e) {
return e.set(e.t, e.p, Math.round(1e6 * (e.s + e.c * t)) / 1e6, e);
},
_e = function _renderBoolean(t, e) {
return e.set(e.t, e.p, !!(e.s + e.c * t), e);
},
ge = 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);
},
ve = function _renderPropTweens(t, e) {
for (var r = e._pt; r; ) r.r(t, r.d), (r = r._next);
},
ye = 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);
},
Te = function _killPropTweensOf(t) {
for (var e, r, i = this._pt; i; )
(r = i._next),
(i.p === t && !i.op) || i.op === t
? Ba(this, i, "_pt")
: i.dep || (e = 1),
(i = r);
return !e;
},
be = 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;
},
we =
((PropTween.prototype.modifier = function modifier(t, e, r) {
(this.mSet = this.mSet || this.set),
(this.set = zc),
(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 || ce),
(this.d = s || this),
(this.set = o || ee),
(this.pr = u || 0),
(this._next = t) && (t._prev = this);
}
ja(
Tt +
"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 (ct[t] = 1);
}
),
(ht.TweenMax = ht.TweenLite = te),
(ht.TimelineLite = ht.TimelineMax = Zt),
(L = new Zt({
sortChildren: !1,
defaults: j,
autoRemoveChildren: !0,
id: "root",
smoothChildTiming: !0,
})),
(N.stringFilter = Ib);
function Hc(t) {
return (Oe[t] || Me).map(function (t) {
return t();
});
}
function Ic() {
var t = Date.now(),
o = [];
2 < t - Ce &&
(Hc("matchMediaInit"),
ke.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));
}),
Hc("matchMediaRevert"),
o.forEach(function (e) {
return e.onMatch(e, function (t) {
return e.add(null, t);
});
}),
(Ce = t),
Hc("matchMedia"));
}
var xe,
ke = [],
Oe = {},
Me = [],
Ce = 0,
Pe = 0,
De =
(((xe = Context.prototype).add = function add(t, i, n) {
function Jw() {
var t,
e = l,
r = a.selector;
return (
e && e !== a && e.data.push(a),
n && (a.selector = fb(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 = Jw),
t === s
? Jw(a, function (t) {
return a.add(null, t);
})
: t
? (a[t] = Jw)
: Jw
);
}),
(xe.ignore = function ignore(t) {
var e = l;
(l = null), t(this), (l = e);
}),
(xe.getTweens = function getTweens() {
var e = [];
return (
this.data.forEach(function (t) {
return t instanceof Context
? e.push.apply(e, t.getTweens())
: t instanceof te &&
!(t.parent && "nested" === t.parent.data) &&
e.push(t);
}),
e
);
}),
(xe.clear = function clear() {
this._r.length = this.data.length = 0;
}),
(xe.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 Zt
? "nested" !== t.data &&
(t.scrollTrigger && t.scrollTrigger.revert(), t.kill())
: t instanceof te || !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 = ke.length; e--; )
ke[e].id === this.id && ke.splice(e, 1);
}),
(xe.revert = function revert(t) {
this.kill(t || {});
}),
Context);
function Context(t, e) {
(this.selector = e && fb(e)),
(this.data = []),
(this._r = []),
(this.isReverted = !1),
(this.id = Pe++),
t && this.add(t);
}
var Se,
Ee =
(((Se = MatchMedia.prototype).add = function add(t, e, r) {
v(t) || (t = { matches: t });
var i,
n,
a,
s = new De(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])) &&
(ke.indexOf(s) < 0 && ke.push(s),
(o[n] = i.matches) && (a = 1),
i.addListener
? i.addListener(Ic)
: i.addEventListener("change", Ic));
return (
a &&
e(s, function (t) {
return s.add(null, t);
}),
this
);
}),
(Se.revert = function revert(t) {
this.kill(t || {});
}),
(Se.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 Re = {
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 zb(t);
});
},
timeline: function timeline(t) {
return new Zt(t);
},
getTweensOf: function getTweensOf(t, e) {
return L.getTweensOf(t, e);
},
getProperty: function getProperty(i, t, e, n) {
r(i) && (i = Pt(i)[0]);
var a = ha(i || {}).get,
s = e ? sa : ra;
return (
"native" === e && (e = ""),
i
? t
? s(((mt[t] && mt[t].get) || a)(i, t, e, n))
: function (t, e, r) {
return s(((mt[t] && mt[t].get) || a)(i, t, e, r));
}
: i
);
},
quickSetter: function quickSetter(r, e, i) {
if (1 < (r = Pt(r)).length) {
var n = r.map(function (t) {
return Fe.quickSetter(t, e, i);
}),
a = n.length;
return function (t) {
for (var e = a; e--; ) n[e](t);
};
}
r = r[0] || {};
var s = mt[e],
o = ha(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 && ve(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 by(t, e, r) {
return n.resetTo(i, t, e, r);
}
var r,
n = Fe.to(
t,
ta(
(((r = {})[i] = "+=0.1"), (r.paused = !0), (r.stagger = 0), r),
e || {}
)
);
return (by.tween = n), by;
},
isTweening: function isTweening(t) {
return 0 < L.getTweensOf(t, !0).length;
},
defaults: function defaults(t) {
return t && t.ease && (t.ease = Vt(t.ease, j.ease)), wa(j, t || {});
},
config: function config(t) {
return wa(N, 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 && !mt[t] && !ht[t] && T(i + " effect requires " + t + " plugin.")
);
}),
(gt[i] = function (t, e, r) {
return n(Pt(t), ta(e || {}, a), r);
}),
r &&
(Zt.prototype[i] = function (t, e, r) {
return this.add(gt[i](t, v(e) ? e : (r = e) && {}, this), r);
});
},
registerEase: function registerEase(t, e) {
Bt[t] = Vt(e);
},
parseEase: function parseEase(t, e) {
return arguments.length ? Vt(t, e) : Bt;
},
getById: function getById(t) {
return L.getById(t);
},
exportRoot: function exportRoot(t, e) {
void 0 === t && (t = {});
var r,
i,
n = new Zt(t);
for (
n.smoothChildTiming = w(t.smoothChildTiming),
L.remove(n),
n._dp = 0,
n._time = n._tTime = L._time,
r = L._first;
r;
)
(i = r._next),
(!e &&
!r._dur &&
r instanceof te &&
r.vars.onComplete === r._targets[0]) ||
Na(n, r, r._start - r._delay),
(r = i);
return Na(L, n, 0), n;
},
context: function context(t, e) {
return t ? new De(t, e) : l;
},
matchMedia: function matchMedia(t) {
return new Ee(t);
},
matchMediaRefresh: function matchMediaRefresh() {
return (
ke.forEach(function (t) {
var e,
r,
i = t.conditions;
for (r in i) i[r] && ((i[r] = !1), (e = 1));
e && t.revert();
}) || Ic()
);
},
addEventListener: function addEventListener(t, e) {
var r = Oe[t] || (Oe[t] = []);
~r.indexOf(e) || r.push(e);
},
removeEventListener: function removeEventListener(t, e) {
var r = Oe[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)
? ob(e, wrap(0, e.length), t)
: Za(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)
? ob(e, wrapYoyo(0, e.length - 1), t)
: Za(r, function (t) {
return e + (i < (t = (n + ((t - e) % n)) % n || 0) ? n - t : t);
});
},
distribute: hb,
random: kb,
snap: jb,
normalize: function normalize(t, e, r) {
return At(t, e, 0, 1, r);
},
getUnit: _a,
clamp: function clamp(e, r, t) {
return Za(t, function (t) {
return Mt(e, r, t);
});
},
splitColor: Db,
toArray: Pt,
selector: fb,
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 || _a(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 = bt($(e) ? [] : {}, e));
if (!u) {
for (s in i) Jt.call(d, e, s, "get", i[s]);
a = function func(t) {
return ve(t, d) || (f ? e.p : e);
};
}
}
return Za(t, a);
},
shuffle: gb,
},
install: R,
effects: gt,
ticker: It,
updateRoot: Zt.updateRoot,
plugins: mt,
globalTimeline: L,
core: {
PropTween: we,
globals: U,
Tween: te,
Timeline: Zt,
Animation: qt,
getCache: ha,
_removeLinkedListItem: Ba,
reverting: function reverting() {
return I;
},
context: function context(t) {
return t && l && (l.data.push(t), (t._ctx = l)), l;
},
suppressOverwrites: function suppressOverwrites(t) {
return (F = t);
},
},
};
ja("to,from,fromTo,delayedCall,set,killTweensOf", function (t) {
return (Re[t] = te[t]);
}),
It.add(Zt.updateRoot),
(d = Re.to({}, { duration: 0 }));
function Mc(t, e) {
for (var r = t._pt; r && r.p !== e && r.op !== e && r.fp !== e; )
r = r._next;
return r;
}
function Oc(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 = {}),
ja(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 = Mc(n, r)),
n && n.modifier && n.modifier(e[r], t, a[i], r));
})(t, n);
};
},
};
}
var Fe =
Re.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; )
I ? 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);
},
},
Oc("roundProps", ib),
Oc("modifiers"),
Oc("snap", jb)
) || Re;
(te.version = Zt.version = Fe.version = "3.14.1"), (o = 1), x() && Lt();
function yd(t, e) {
return e.set(e.t, e.p, Math.round(1e4 * (e.s + e.c * t)) / 1e4 + e.u, e);
}
function zd(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 Ad(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 Bd(t, e) {
return e.set(
e.t,
e.p,
1 === t ? e.e : t ? Math.round(1e4 * (e.s + e.c * t)) / 1e4 + e.u : e.b,
e
);
}
function Cd(t, e) {
var r = e.s + e.c * t;
e.set(e.t, e.p, ~~(r + (r < 0 ? -0.5 : 0.5)) + e.u, e);
}
function Dd(t, e) {
return e.set(e.t, e.p, t ? e.e : e.b, e);
}
function Ed(t, e) {
return e.set(e.t, e.p, 1 !== t ? e.b : e.e, e);
}
function Fd(t, e, r) {
return (t.style[e] = r);
}
function Gd(t, e, r) {
return t.style.setProperty(e, r);
}
function Hd(t, e, r) {
return (t._gsap[e] = r);
}
function Id(t, e, r) {
return (t._gsap.scaleX = t._gsap.scaleY = r);
}
function Jd(t, e, r, i, n) {
var a = t._gsap;
(a.scaleX = a.scaleY = r), a.renderTransform(n, a);
}
function Kd(t, e, r, i, n) {
var a = t._gsap;
(a[e] = r), a.renderTransform(n, a);
}
function Nd(t, e) {
var r = this,
i = this.target,
n = i.style,
a = i._gsap;
if (t in hr && n) {
if (((this.tfm = this.tfm || {}), "transform" === t))
return mr.transform.split(",").forEach(function (t) {
return Nd.call(r, t, e);
});
if (
(~(t = mr[t] || t).indexOf(",")
? t.split(",").forEach(function (t) {
return (r.tfm[t] = xr(i, t));
})
: (this.tfm[t] = a.x ? a[t] : xr(i, t)),
t === vr && (this.tfm.zOrigin = a.zOrigin),
0 <= this.props.indexOf(gr))
)
return;
a.svg &&
((this.svgo = i.getAttribute("data-svg-origin")),
this.props.push(vr, e, "")),
(t = gr);
}
(n || e) && this.props.push(t, e, n[t]);
}
function Od(t) {
t.translate &&
(t.removeProperty("translate"),
t.removeProperty("scale"),
t.removeProperty("rotate"));
}
function Pd() {
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(cr, "-$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 = Ue()) && t.isStart) ||
n[gr] ||
(Od(n),
a.zOrigin &&
n[vr] &&
((n[vr] += " " + a.zOrigin + "px"),
(a.zOrigin = 0),
a.renderTransform()),
(a.uncache = 1));
}
}
function Qd(t, e) {
var r = { target: t, props: [], revert: Pd, save: Nd };
return (
t._gsap || Fe.core.getCache(t),
e &&
t.style &&
t.nodeType &&
e.split(",").forEach(function (t) {
return r.save(t);
}),
r
);
}
function Sd(t, e) {
var r = Le.createElementNS
? Le.createElementNS(
(e || "http://www.w3.org/1999/xhtml").replace(/^https/, "http"),
t
)
: Le.createElement(t);
return r && r.style ? r : Le.createElement(t);
}
function Td(t, e, r) {
var i = getComputedStyle(t);
return (
i[e] ||
i.getPropertyValue(e.replace(cr, "-$1").toLowerCase()) ||
i.getPropertyValue(e) ||
(!r && Td(t, Tr(e) || e, 1)) ||
""
);
}
function Wd() {
(function _windowExists() {
return "undefined" != typeof window;
})() &&
window.document &&
((Ie = window),
(Le = Ie.document),
(Ye = Le.documentElement),
(je = Sd("div") || { style: {} }),
Sd("div"),
(gr = Tr(gr)),
(vr = gr + "Origin"),
(je.style.cssText =
"border-width:0;line-height:0;position:absolute;padding:0"),
(Xe = !!Tr("perspective")),
(Ue = Fe.core.reverting),
(Ne = 1));
}
function Xd(t) {
var e,
r = t.ownerSVGElement,
i = Sd(
"svg",
(r && r.getAttribute("xmlns")) || "http://www.w3.org/2000/svg"
),
n = t.cloneNode(!0);
(n.style.display = "block"), i.appendChild(n), Ye.appendChild(i);
try {
e = n.getBBox();
} catch (t) {}
return i.removeChild(n), Ye.removeChild(i), e;
}
function Yd(t, e) {
for (var r = e.length; r--; )
if (t.hasAttribute(e[r])) return t.getAttribute(e[r]);
}
function Zd(e) {
var r, i;
try {
r = e.getBBox();
} catch (t) {
(r = Xd(e)), (i = 1);
}
return (
(r && (r.width || r.height)) || i || (r = Xd(e)),
!r || r.width || r.x || r.y
? r
: {
x: +Yd(e, ["x", "cx", "x1"]) || 0,
y: +Yd(e, ["y", "cy", "y1"]) || 0,
width: 0,
height: 0,
}
);
}
function $d(t) {
return !(!t.getCTM || (t.parentNode && !t.ownerSVGElement) || !Zd(t));
}
function _d(t, e) {
if (e) {
var r,
i = t.style;
e in hr && e !== vr && (e = gr),
i.removeProperty
? (("ms" !== (r = e.substr(0, 2)) && "webkit" !== e.substr(0, 6)) ||
(e = "-" + e),
i.removeProperty(
"--" === r ? e : e.replace(cr, "-$1").toLowerCase()
))
: i.removeAttribute(e);
}
}
function ae(t, e, r, i, n, a) {
var s = new we(t._pt, e, r, 0, 1, a ? Ed : Dd);
return ((t._pt = s).b = i), (s.e = n), t._props.push(r), s;
}
function de(t, e, r, i) {
var n,
a,
s,
o,
u = parseFloat(r) || 0,
h = (r + "").trim().substr((u + "").length) || "px",
l = je.style,
f = pr.test(e),
d = "svg" === t.tagName.toLowerCase(),
c = (d ? "client" : "offset") + (f ? "Width" : "Height"),
p = "px" === i,
_ = "%" === i;
if (i === h || !u || br[i] || br[h]) return u;
if (
("px" === h || p || (u = de(t, e, r, "px")),
(o = t.getCTM && $d(t)),
(_ || "%" === h) && (hr[e] || ~e.indexOf("adius")))
)
return (
(n = o ? t.getBBox()[f ? "width" : "height"] : t[c]),
ka(_ ? (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 !== Le && a.appendChild) || (a = Le.body),
(s = a._gsap) && _ && s.width && f && s.time === It.time && !s.uncache)
)
return ka((u / s.width) * 100);
if (!_ || ("height" !== e && "width" !== e))
(!_ && "%" !== h) ||
wr[Td(a, "display")] ||
(l.position = Td(t, "position")),
a === t && (l.position = "static"),
a.appendChild(je),
(n = je[c]),
a.removeChild(je),
(l.position = "absolute");
else {
var m = t.style[e];
(t.style[e] = 100 + i), (n = t[c]), m ? (t.style[e] = m) : _d(t, e);
}
return (
f && _ && (((s = ha(a)).time = It.time), (s.width = a[c])),
ka(p ? (n * u) / 100 : n && u ? (100 / n) * u : 0)
);
}
function fe(t, e, r, i) {
if (!r || "none" === r) {
var n = Tr(e, t, 1),
a = n && Td(t, n, 1);
a && a !== r
? ((e = n), (r = a))
: "borderColor" === e && (r = Td(t, "borderTopColor"));
}
var s,
o,
u,
h,
l,
f,
d,
c,
p,
_,
m,
g = new we(this._pt, t.style, e, 0, 1, ge),
v = 0,
y = 0;
if (
((g.b = r),
(g.e = i),
(r += ""),
"var(--" === (i += "").substring(0, 6) &&
(i = Td(t, i.substring(4, i.indexOf(")")))),
"auto" === i &&
((f = t.style[e]),
(t.style[e] = i),
(i = Td(t, e) || i),
f ? (t.style[e] = f) : _d(t, e)),
Ib((s = [r, i])),
(i = s[1]),
(u = (r = s[0]).match(nt) || []),
(i.match(nt) || []).length)
) {
for (; (o = nt.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 = ma(h, d) + m),
(c = parseFloat(d)),
(_ = d.substr((c + "").length)),
(v = nt.lastIndex - _.length),
_ ||
((_ = _ || N.units[e] || m),
v === i.length && ((i += _), (g.e += _))),
m !== _ && (h = de(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 ? Ed : Dd;
return st.test(i) && (g.e = 0), (this._pt = g);
}
function he(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] = kr[r] || r),
(e[1] = kr[i] || i),
e.join(" ")
);
}
function ie(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]),
hr[r] && ((i = 1), (r = "transformOrigin" === r ? vr : gr)),
_d(a, r);
i &&
(_d(a, gr),
u &&
(u.svg && a.removeAttribute("transform"),
(s.scale = s.rotate = s.translate = "none"),
Pr(a, 1),
(u.uncache = 1),
Od(s)));
}
}
function me(t) {
return "matrix(1, 0, 0, 1, 0, 0)" === t || "none" === t || !t;
}
function ne(t) {
var e = Td(t, gr);
return me(e) ? Mr : e.substr(7).match(it).map(ka);
}
function oe(t, e) {
var r,
i,
n,
a,
s = t._gsap || ha(t),
o = t.style,
u = ne(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(",")
? Mr
: u
: (u !== Mr ||
t.offsetParent ||
t === Ye ||
s.svg ||
((n = o.display),
(o.display = "block"),
((r = t.parentNode) &&
(t.offsetParent || t.getBoundingClientRect().width)) ||
((a = 1), (i = t.nextElementSibling), Ye.appendChild(t)),
(u = ne(t)),
n ? (o.display = n) : _d(t, "display"),
a &&
(i
? r.insertBefore(t, i)
: r
? r.appendChild(t)
: Ye.removeChild(t))),
e && 6 < u.length ? [u[0], u[1], u[4], u[5], u[12], u[13]] : u);
}
function pe(t, e, r, i, n, a) {
var s,
o,
u,
h = t._gsap,
l = n || oe(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 !== Mr &&
(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 = Zd(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[vr] = "0px 0px"),
a &&
(ae(a, h, "xOrigin", f, w),
ae(a, h, "yOrigin", d, x),
ae(a, h, "xOffset", c, h.xOffset),
ae(a, h, "yOffset", p, h.yOffset)),
t.setAttribute("data-svg-origin", w + " " + x);
}
function se(t, e, r) {
var i = _a(e);
return ka(parseFloat(e) + parseFloat(de(t, "x", r + "px", i))) + i;
}
function ze(t, e, i, n, a) {
var s,
o,
u = 360,
h = r(a),
l = parseFloat(a) * (h && ~a.indexOf("rad") ? lr : 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 we(t._pt, e, i, n, l, zd)),
(o.e = f),
(o.u = "deg"),
t._props.push(i),
o
);
}
function Ae(t, e) {
for (var r in e) t[r] = e[r];
return t;
}
function Be(t, e, r) {
var i,
n,
a,
s,
o,
u,
h,
l = Ae({}, r._gsap),
f = r.style;
for (n in (l.svg
? ((a = r.getAttribute("transform")),
r.setAttribute("transform", ""),
(f[gr] = e),
(i = Pr(r, 1)),
_d(r, gr),
r.setAttribute("transform", a))
: ((a = getComputedStyle(r)[gr]),
(f[gr] = e),
(i = Pr(r, 1)),
(f[gr] = a)),
hr))
(a = l[n]) !== (s = i[n]) &&
"perspective,force3D,transformOrigin,svgOrigin".indexOf(n) < 0 &&
((o = _a(a) !== (h = _a(s)) ? de(r, n, a, h) : parseFloat(a)),
(u = parseFloat(s)),
(t._pt = new we(t._pt, i, n, o, u - o, yd)),
(t._pt.u = h || 0),
t._props.push(n));
Ae(i, l);
}
var Ie,
Le,
Ye,
Ne,
je,
Ve,
Ue,
Xe,
qe = Bt.Power0,
Ze = Bt.Power1,
We = Bt.Power2,
He = Bt.Power3,
Je = Bt.Power4,
Qe = Bt.Linear,
Ge = Bt.Quad,
Ke = Bt.Cubic,
$e = Bt.Quart,
tr = Bt.Quint,
er = Bt.Strong,
rr = Bt.Elastic,
ir = Bt.Back,
nr = Bt.SteppedEase,
ar = Bt.Bounce,
sr = Bt.Sine,
or = Bt.Expo,
ur = Bt.Circ,
hr = {},
lr = 180 / Math.PI,
fr = Math.PI / 180,
dr = Math.atan2,
cr = /([A-Z])/g,
pr = /(left|right|width|margin|padding|x)/i,
_r = /[\s,\(]\S/,
mr = {
autoAlpha: "opacity,visibility",
scale: "scaleX,scaleY",
alpha: "opacity",
},
gr = "transform",
vr = gr + "Origin",
yr = "O,Moz,ms,Ms,Webkit".split(","),
Tr = function _checkPropPrefix(t, e, r) {
var i = (e || je).style,
n = 5;
if (t in i && !r) return t;
for (
t = t.charAt(0).toUpperCase() + t.substr(1);
n-- && !(yr[n] + t in i);
);
return n < 0 ? null : (3 === n ? "ms" : 0 <= n ? yr[n] : "") + t;
},
br = { deg: 1, rad: 1, turn: 1 },
wr = { grid: 1, flex: 1 },
xr = function _get(t, e, r, i) {
var n;
return (
Ne || Wd(),
e in mr &&
"transform" !== e &&
~(e = mr[e]).indexOf(",") &&
(e = e.split(",")[0]),
hr[e] && "transform" !== e
? ((n = Pr(t, i)),
(n =
"transformOrigin" !== e
? n[e]
: n.svg
? n.origin
: Ar(Td(t, vr)) + " " + n.zOrigin + "px"))
: ((n = t.style[e]) &&
"auto" !== n &&
!i &&
!~(n + "").indexOf("calc(")) ||
(n =
(Or[e] && Or[e](t, e, r)) ||
Td(t, e) ||
ia(t, e) ||
("opacity" === e ? 1 : 0)),
r && !~(n + "").trim().indexOf(" ") ? de(t, e, n, r) + r : n
);
},
kr = {
top: "0%",
bottom: "100%",
left: "0%",
right: "100%",
center: "50%",
},
Or = {
clearProps: function clearProps(t, e, r, i, n) {
if ("isFromStart" !== n.data) {
var a = (t._pt = new we(t._pt, e, r, 0, 0, ie));
return (a.u = i), (a.pr = -10), (a.tween = n), t._props.push(r), 1;
}
},
},
Mr = [1, 0, 0, 1, 0, 0],
Cr = {},
Pr = function _parseTransform(t, e) {
var r = t._gsap || new Xt(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,
k,
O,
M,
C,
P,
A,
D,
S,
z,
E,
R,
F = t.style,
I = r.scaleX < 0,
L = "deg",
B = getComputedStyle(t),
Y = Td(t, vr) || "0";
return (
(i = n = a = u = h = l = f = d = c = 0),
(s = o = 1),
(r.svg = !(!t.getCTM || !$d(t))),
B.translate &&
(("none" === B.translate &&
"none" === B.scale &&
"none" === B.rotate) ||
(F[gr] =
("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[gr] ? B[gr] : "")),
(F.scale = F.rotate = F.translate = "none")),
(m = oe(t, r.svg)),
r.svg &&
((M = r.uncache
? ((C = t.getBBox()),
(Y = r.xOrigin - C.x + "px " + (r.yOrigin - C.y) + "px"),
"")
: !e && t.getAttribute("data-svg-origin")),
pe(t, M || Y, !!M || r.originIsAbsolute, !1 !== r.smooth, m)),
(p = r.xOrigin || 0),
(_ = r.yOrigin || 0),
m !== Mr &&
((T = m[0]),
(b = m[1]),
(w = m[2]),
(x = m[3]),
(i = k = m[4]),
(n = O = m[5]),
6 === m.length
? ((s = Math.sqrt(T * T + b * b)),
(o = Math.sqrt(x * x + w * w)),
(u = T || b ? dr(b, T) * lr : 0),
(f = w || x ? dr(w, x) * lr + u : 0) &&
(o *= Math.abs(Math.cos(f * fr))),
r.svg && ((i -= p - (p * T + _ * w)), (n -= _ - (p * b + _ * x))))
: ((R = m[6]),
(z = m[7]),
(A = m[8]),
(D = m[9]),
(S = m[10]),
(E = m[11]),
(i = m[12]),
(n = m[13]),
(a = m[14]),
(h = (g = dr(R, S)) * lr),
g &&
((M = k * (v = Math.cos(-g)) + A * (y = Math.sin(-g))),
(C = O * v + D * y),
(P = R * v + S * y),
(A = k * -y + A * v),
(D = O * -y + D * v),
(S = R * -y + S * v),
(E = z * -y + E * v),
(k = M),
(O = C),
(R = P)),
(l = (g = dr(-w, S)) * lr),
g &&
((v = Math.cos(-g)),
(E = x * (y = Math.sin(-g)) + E * v),
(T = M = T * v - A * y),
(b = C = b * v - D * y),
(w = P = w * v - S * y)),
(u = (g = dr(b, T)) * lr),
g &&
((M = T * (v = Math.cos(g)) + b * (y = Math.sin(g))),
(C = k * v + O * y),
(b = b * v - T * y),
(O = O * v - k * y),
(T = M),
(k = C)),
h &&
359.9 < Math.abs(h) + Math.abs(u) &&
((h = u = 0), (l = 180 - l)),
(s = ka(Math.sqrt(T * T + b * b + w * w))),
(o = ka(Math.sqrt(O * O + R * R))),
(g = dr(k, O)),
(f = 2e-4 < Math.abs(g) ? g * lr : 0),
(c = E ? 1 / (E < 0 ? -E : E) : 0)),
r.svg &&
((M = t.getAttribute("transform")),
(r.forceCSS = t.setAttribute("transform", "") || !me(Td(t, gr))),
M && t.setAttribute("transform", M))),
90 < Math.abs(f) &&
Math.abs(f) < 270 &&
(I
? ((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 = ka(s)),
(r.scaleY = ka(o)),
(r.rotation = ka(u) + L),
(r.rotationX = ka(h) + L),
(r.rotationY = ka(l) + L),
(r.skewX = f + L),
(r.skewY = d + L),
(r.transformPerspective = c + "px"),
(r.zOrigin = parseFloat(Y.split(" ")[2]) || (!e && r.zOrigin) || 0) &&
(F[vr] = Ar(Y)),
(r.xOffset = r.yOffset = 0),
(r.force3D = N.force3D),
(r.renderTransform = r.svg ? Fr : Xe ? Rr : Dr),
(r.uncache = 0),
r
);
},
Ar = function _firstTwoOnly(t) {
return (t = t.split(" "))[0] + " " + t[1];
},
Dr = function _renderNon3DTransforms(t, e) {
(e.z = "0px"),
(e.rotationY = e.rotationX = "0deg"),
(e.force3D = 0),
Rr(t, e);
},
Sr = "0deg",
zr = "0px",
Er = ") ",
Rr = 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 !== Sr || h !== Sr)) {
var b,
w = parseFloat(h) * fr,
x = Math.sin(w),
k = Math.cos(w);
(w = parseFloat(l) * fr),
(b = Math.cos(w)),
(a = se(g, a, x * b * -v)),
(s = se(g, s, -Math.sin(w) * -v)),
(o = se(g, o, k * b * -v + v));
}
_ !== zr && (y += "perspective(" + _ + Er),
(i || n) && (y += "translate(" + i + "%, " + n + "%) "),
(!T && a === zr && s === zr && o === zr) ||
(y +=
o !== zr || T
? "translate3d(" + a + ", " + s + ", " + o + ") "
: "translate(" + a + ", " + s + Er),
u !== Sr && (y += "rotate(" + u + Er),
h !== Sr && (y += "rotateY(" + h + Er),
l !== Sr && (y += "rotateX(" + l + Er),
(f === Sr && d === Sr) || (y += "skew(" + f + ", " + d + Er),
(1 === c && 1 === p) || (y += "scale(" + c + ", " + p + Er),
(g.style[gr] = y || "translate(0, 0)");
},
Fr = 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),
k = parseFloat(f);
(d = parseFloat(d)),
(c = parseFloat(c)),
(p = parseFloat(p)) && ((c += p = parseFloat(p)), (d += p)),
d || c
? ((d *= fr),
(c *= fr),
(r = Math.cos(d) * _),
(i = Math.sin(d) * _),
(n = Math.sin(d - c) * -m),
(a = Math.cos(d - c) * m),
c &&
((p *= fr),
(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 = ka(r)),
(i = ka(i)),
(n = ka(n)),
(a = ka(a)))
: ((r = _), (a = m), (i = n = 0)),
((x && !~(l + "").indexOf("px")) || (k && !~(f + "").indexOf("px"))) &&
((x = de(g, "x", l, "px")), (k = de(g, "y", f, "px"))),
(v || y || T || b) &&
((x = ka(x + v - (v * r + y * n) + T)),
(k = ka(k + y - (v * i + y * a) + b))),
(u || h) &&
((s = g.getBBox()),
(x = ka(x + (u / 100) * s.width)),
(k = ka(k + (h / 100) * s.height))),
(s =
"matrix(" +
r +
"," +
i +
"," +
n +
"," +
a +
"," +
x +
"," +
k +
")"),
g.setAttribute("transform", s),
w && (g.style[gr] = s);
};
ja("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;
}
);
Or[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 xr(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 Ir,
Lr,
Br,
Yr = {
name: "css",
register: Wd,
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,
x = this._props,
k = t.style,
O = i.vars.startAt;
for (d in (Ne || Wd(),
(this.styles = this.styles || Qd(t)),
(b = this.styles.props),
(this.tween = i),
e))
if (
"autoRound" !== d &&
((o = e[d]), !mt[d] || !dc(d, e, i, n, t, a))
)
if (
((l = typeof o),
(f = Or[d]),
"function" === l && (l = typeof (o = o.call(i, n, t, a))),
"string" === l && ~o.indexOf("random(") && (o = rb(o)),
f)
)
f(this, t, d, o, i) && (T = 1);
else if ("--" === d.substr(0, 2))
(s = (getComputedStyle(t).getPropertyValue(d) + "").trim()),
(o += ""),
(Rt.lastIndex = 0),
Rt.test(s) ||
((c = _a(s)),
(p = _a(o))
? c !== p && (s = de(t, d, s, p) + p)
: c && (o += c)),
this.add(k, "setProperty", s, o, n, a, 0, 0, d),
x.push(d),
b.push(d, 0, k[d]);
else if ("undefined" !== l) {
if (
(O && d in O
? ((s =
"function" == typeof O[d] ? O[d].call(i, n, t, a) : O[d]),
r(s) && ~s.indexOf("random(") && (s = rb(s)),
_a(s + "") ||
"auto" === s ||
(s += N.units[d] || _a(xr(t, d)) || ""),
"=" === (s + "").charAt(1) && (s = xr(t, d)))
: (s = xr(t, d)),
(h = parseFloat(s)),
(_ = "string" === l && "=" === o.charAt(1) && o.substr(0, 2)) &&
(o = o.substr(2)),
(u = parseFloat(o)),
d in mr &&
("autoAlpha" === d &&
(1 === h &&
"hidden" === xr(t, "visibility") &&
u &&
(h = 0),
b.push("visibility", 0, k.visibility),
ae(
this,
k,
"visibility",
h ? "inherit" : "hidden",
u ? "inherit" : "hidden",
!u
)),
"scale" !== d &&
"transform" !== d &&
~(d = mr[d]).indexOf(",") &&
(d = d.split(",")[0])),
(m = d in hr))
) {
if (
(this.styles.save(d),
(w = o),
"string" === l && "var(--" === o.substring(0, 6))
) {
if (
"calc(" ===
(o = Td(t, o.substring(4, o.indexOf(")")))).substring(0, 5)
) {
var M = t.style.perspective;
(t.style.perspective = o),
(o = Td(t, "perspective")),
M ? (t.style.perspective = M) : _d(t, "perspective");
}
u = parseFloat(o);
}
if (
(g ||
(((v = t._gsap).renderTransform && !e.parseTransform) ||
Pr(t, e.parseTransform),
(y = !1 !== e.smoothOrigin && v.smooth),
((g = this._pt =
new we(
this._pt,
k,
gr,
0,
1,
v.renderTransform,
v,
0,
-1
)).dep = 1)),
"scale" === d)
)
(this._pt = new we(
this._pt,
v,
"scaleY",
v.scaleY,
(_ ? ma(v.scaleY, _ + u) : u) - v.scaleY || 0,
yd
)),
(this._pt.u = 0),
x.push("scaleY", d),
(d += "X");
else {
if ("transformOrigin" === d) {
b.push(vr, 0, k[vr]),
(o = he(o)),
v.svg
? pe(t, o, 0, y, 0, this)
: ((p = parseFloat(o.split(" ")[2]) || 0) !==
v.zOrigin && ae(this, v, "zOrigin", v.zOrigin, p),
ae(this, k, d, Ar(s), Ar(o)));
continue;
}
if ("svgOrigin" === d) {
pe(t, o, 1, y, 0, this);
continue;
}
if (d in Cr) {
ze(this, v, d, h, _ ? ma(h, _ + o) : o);
continue;
}
if ("smoothOrigin" === d) {
ae(this, v, "smooth", v.smooth, o);
continue;
}
if ("force3D" === d) {
v[d] = o;
continue;
}
if ("transform" === d) {
Be(this, o, t);
continue;
}
}
} else d in k || (d = Tr(d) || d);
if (
m ||
((u || 0 === u) && (h || 0 === h) && !_r.test(o) && d in k)
)
(u = u || 0),
(c = (s + "").substr((h + "").length)) !==
(p = _a(o) || (d in N.units ? N.units[d] : c)) &&
(h = de(t, d, s, p)),
(this._pt = new we(
this._pt,
m ? v : k,
d,
h,
(_ ? ma(h, _ + u) : u) - h,
m || ("px" !== p && "zIndex" !== d) || !1 === e.autoRound
? yd
: Cd
)),
(this._pt.u = p || 0),
m && w !== o
? ((this._pt.b = s), (this._pt.e = w), (this._pt.r = Bd))
: c !== p &&
"%" !== p &&
((this._pt.b = s), (this._pt.r = Ad));
else if (d in k) fe.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) {
S(d, o);
continue;
}
m ||
(d in k
? b.push(d, 0, k[d])
: "function" == typeof t[d]
? b.push(d, 2, t[d]())
: b.push(d, 1, s || t[d])),
x.push(d);
}
T && be(this);
},
render: function render(t, e) {
if (e.tween._time || !Ue())
for (var r = e._pt; r; ) r.r(t, r.d), (r = r._next);
else e.styles.revert();
},
get: xr,
aliases: mr,
getSetter: function getSetter(t, e, r) {
var i = mr[e];
return (
i && i.indexOf(",") < 0 && (e = i),
e in hr && e !== vr && (t._gsap.x || xr(t, "x"))
? r && Ve === r
? "scale" === e
? Id
: Hd
: (Ve = r || {}) && ("scale" === e ? Jd : Kd)
: t.style && !u(t.style[e])
? Fd
: ~e.indexOf("-")
? Gd
: le(t, e)
);
},
core: { _removeProperty: _d, _getMatrix: oe },
};
(Fe.utils.checkPrefix = Tr),
(Fe.core.getStyleSaver = Qd),
(Br = ja(
(Ir = "x,y,z,scale,scaleX,scaleY,xPercent,yPercent") +
"," +
(Lr = "rotation,rotationX,rotationY,skewX,skewY") +
",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective",
function (t) {
hr[t] = 1;
}
)),
ja(Lr, function (t) {
(N.units[t] = "deg"), (Cr[t] = 1);
}),
(mr[Br[13]] = Ir + "," + Lr),
ja(
"0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY",
function (t) {
var e = t.split(":");
mr[e[1]] = Br[e[0]];
}
),
ja(
"x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective",
function (t) {
N.units[t] = "px";
}
),
Fe.registerPlugin(Yr);
var Nr = Fe.registerPlugin(Yr) || Fe,
jr = Nr.core.Tween;
(e.Back = ir),
(e.Bounce = ar),
(e.CSSPlugin = Yr),
(e.Circ = ur),
(e.Cubic = Ke),
(e.Elastic = rr),
(e.Expo = or),
(e.Linear = Qe),
(e.Power0 = qe),
(e.Power1 = Ze),
(e.Power2 = We),
(e.Power3 = He),
(e.Power4 = Je),
(e.Quad = Ge),
(e.Quart = $e),
(e.Quint = tr),
(e.Sine = sr),
(e.SteppedEase = nr),
(e.Strong = er),
(e.TimelineLite = Zt),
(e.TimelineMax = Zt),
(e.TweenLite = te),
(e.TweenMax = jr),
(e.default = Nr),
(e.gsap = Nr);
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/script.js
// Register the GSAP Flip plugin so it can be used
gsap.registerPlugin(Flip);
// Preloads images (and background images if used)
const preloadImages = (selector = 'img') => {
return new Promise((resolve) => {
imagesLoaded(
document.querySelectorAll(selector),
{ background: true },
resolve
);
});
};
// Wait until the DOM is fully loaded before running the script
document.addEventListener('DOMContentLoaded', async function () {
// Get the grid gallery container element
const gridGallery = document.getElementById('grid-gallery');
// Stop execution if gridGallery does not exist
if (!gridGallery) return;
// Keep the loading state until images are ready
await preloadImages('.image');
// Remove the "loading" class from the body (usually used for preload states)
document.body.classList.remove('loading');
// Select all grid size configuration buttons
const triggerButtons = document.querySelectorAll(
'.configuration_grid_size button'
);
// Select all grid gallery items
const allGridItem = document.querySelectorAll('.grid_gallery_item');
// Flag to prevent multiple animations at the same time
// currentGridSize stores the active grid size
let animated = false,
currentGridSize = gridGallery.dataset.sizeGrid || '75%';
// Loop through each configuration button
triggerButtons.forEach((btn) => {
// Add click event listener to each button
btn.addEventListener('click', () => {
// Prevent interaction if an animation is already running
if (animated) return;
// Get the target grid size from data-size attribute
const targetSize = btn.dataset.size;
// If the clicked size is already active, do nothing
if (targetSize === currentGridSize) return;
// Lock animation state
animated = true;
// Capture the current position and size of all grid items
const state = Flip.getState(allGridItem);
// Update grid size using data attribute (used by CSS)
gridGallery.dataset.sizeGrid = targetSize;
// Update current grid size state
currentGridSize = targetSize;
// Remove "active" class from all buttons
triggerButtons.forEach((btn) => {
btn.classList.remove('active');
});
// Add "active" class to the clicked button
btn.classList.add('active');
// Animate elements from the previous state to the new layout
Flip.from(state, {
duration: 0.8, // Animation duration in seconds
ease: 'expo.inOut', // Smooth easing for natural motion
onComplete: () => {
// Unlock animation after completion
animated = false;
},
});
});
});
});
js/script2.js
// Register the GSAP Flip plugin so it can be used
gsap.registerPlugin(Flip);
// Preloads images (and background images if used)
const preloadImages = (selector = 'img') => {
return new Promise((resolve) => {
imagesLoaded(
document.querySelectorAll(selector),
{ background: true },
resolve
);
});
};
// Wait until the DOM is fully loaded before running the script
document.addEventListener('DOMContentLoaded', async function () {
// Get the grid gallery container element
const gridGallery = document.getElementById('grid-gallery');
// Stop execution if gridGallery does not exist
if (!gridGallery) return;
// Keep the loading state until images are ready
await preloadImages('.image');
// Remove the "loading" class from the body (usually used for preload states)
document.body.classList.remove('loading');
// Select all grid size configuration buttons
const triggerButtons = document.querySelectorAll(
'.configuration_grid_size button'
);
// Select all grid gallery items
const allGridItem = document.querySelectorAll('.grid_gallery_item');
// Flag to prevent multiple animations at the same time
// currentGridSize stores the active grid size
let animated = false,
currentGridSize = gridGallery.dataset.sizeGrid || '75%';
// Loop through each configuration button
triggerButtons.forEach((btn) => {
// Add click event listener to each button
btn.addEventListener('click', () => {
// Prevent interaction if an animation is already running
if (animated) return;
// Get the target grid size from data-size attribute
const targetSize = btn.dataset.size;
// If the clicked size is already active, do nothing
if (targetSize === currentGridSize) return;
// Lock animation state
animated = true;
// Capture the current position and size of all grid items
const state = Flip.getState(allGridItem);
// Update grid size using data attribute (used by CSS)
gridGallery.dataset.sizeGrid = targetSize;
// Update current grid size state
currentGridSize = targetSize;
// Remove "active" class from all buttons
triggerButtons.forEach((btn) => {
btn.classList.remove('active');
});
// Add "active" class to the clicked button
btn.classList.add('active');
const flipDuration = 1;
const staggerAmount = 0.3;
const totalFlipDuration = flipDuration + staggerAmount;
// Animate elements from the previous state to the new layout
Flip.from(state, {
absolute: true,
duration: flipDuration, // Animation duration in seconds
ease: 'expo.inOut', // Smooth easing for natural motion
onComplete: () => {
// Unlock animation after completion
animated = false;
},
stagger: {
amount: staggerAmount,
from: 'random',
},
}).fromTo(
gridGallery,
{
filter: 'blur(0px) brightness(100%)',
willChange: 'filter',
},
{
duration: totalFlipDuration,
keyframes: [
{
filter: 'blur(10px) brightness(200%)',
duration: totalFlipDuration * 0.5,
ease: 'power2.in',
},
{
filter: 'blur(0px) brightness(100%)',
duration: totalFlipDuration * 0.5,
ease: 'power2',
delay: 0.5,
},
],
},
0
);
});
});
});
Media credits and license evidence실행 안내·자료
README.md
## Credits
- Images generated with [Midjourney](https://midjourney.com)
## License
[MIT](LICENSE)
LICENSE실행 안내·자료
MIT License
Copyright (c) 2009 - 2025 [Codrops](https://codrops.com)
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
이 장면을 만드는 원리
배치 상태를 먼저 바꾸고 이전 위치에서 연결
반복 입력에서 현재 의도와 전환의 종료·취소 책임을 명시합니다.
- 이 예제에서는
- 버튼은 Flip.getState로 이전 기하를 저장한 뒤 data-size-grid와 활성 버튼을 갱신합니다. animated 잠금은 Flip의 onComplete에서만 풀립니다.