Codrops 원본
Ideas for Image Motion Trail Animations
섹션 · MIT
갤러리 안에서는 화면을 벗어나거나 움직임을 멈추면 예제도 닫힙니다. 다시 재생할 때는 처음부터 시작해요.
SOURCE FILES
원본 코드 읽기
수집한 원본 소스와 실행 안내를 함께 제공합니다.
css/base.css
*,
*::after,
*::before {
box-sizing: border-box;
}
/* https://vegaprotocol.github.io/alpha-lyrae/ */
@font-face {
font-family: 'AlphaLyrae';
src: url('../fonts/AlphaLyrae-Medium.woff2') format('woff2'),
url('../fonts/AlphaLyrae-Medium.woff') format('woff');
font-style: normal;
}
@font-feature-values 'AlphaLyrae' {
@styleset { ss01: 1; ss02: 2; ss03: 3; ss04: 4; ss05: 5 }
}
:root {
font-size: 13px;
--color-text: #fff;
--color-bg: #000;
--color-link: #fff;
--color-link-hover: #fff;
--img-width: 190px;
--img-ratio: 1.1;
--img-offset-x: 20px;
--img-offset-y: 20px;
--img-border-radius: 7px;
--color-bg-content: rgba(255,255,255,0.05);
--color-bg-demos: rgba(255,255,255,0.05);
}
body {
margin: 0;
color: var(--color-text);
background-color: var(--color-bg);
font-family: 'AlphaLyrae', sans-serif;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
min-height: 100vh;
/* mobile viewport bug fix */
min-height: -webkit-fill-available;
}
html {
height: -webkit-fill-available;
}
.demo-3 {
--img-width: 160px;
--img-ratio: 0.7;
}
.demo-4 {
--img-ratio: 1;
}
.demo-5 {
--img-width: 230px;
--img-ratio: 1.2;
}
.demo-6 {
--color-bg: #000;
--img-ratio: 0.85;
--img-border-radius: 0px;
}
.demo-7 {
--img-ratio: 1;
--img-border-radius: 4px;
}
.demo-8 {
--img-width: 175px;
--img-ratio: 1;
--img-border-radius: 4px;
}
.demo-9 {
--img-width: 260px;
--img-ratio: 1;
}
/* Page Loader */
.js .loading::before,
.js .loading::after {
content: '';
position: fixed;
z-index: 2000;
}
.js .loading::before {
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--color-bg);
}
.js .loading::after {
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin: -30px 0 0 -30px;
border-radius: 50%;
opacity: 0.4;
background: var(--color-link);
animation: loaderAnim 0.7s linear infinite alternate forwards;
}
@keyframes loaderAnim {
to {
opacity: 1;
transform: scale3d(0.5,0.5,1);
}
}
a {
text-decoration: none;
color: var(--color-link);
outline: none;
cursor: pointer;
}
a:hover {
color: var(--color-link-hover);
outline: none;
}
/* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
a:focus {
/* Provide a fallback style for browsers
that don't support :focus-visible */
outline: none;
background: lightgrey;
}
a:focus:not(:focus-visible) {
/* Remove the focus indicator on mouse-focus for browsers
that do support :focus-visible */
background: inherit;
}
a:focus-visible {
/* Draw a very noticeable focus style for
keyboard-focus on browsers that do support
:focus-visible */
outline: 2px solid red;
background: transparent;
}
.unbutton {
background: none;
border: 0;
padding: 0;
margin: 0;
font: inherit;
cursor: pointer;
}
.unbutton:focus {
outline: none;
}
main {
padding: 1.25rem;
display: grid;
height: 100vh;
width: 100%;
grid-row-gap: 1.25rem;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto auto;
grid-template-areas: 'frame' 'content' 'meta' 'demos';
}
.meta {
grid-area: meta;
}
.meta__title {
margin: 0;
font-size: clamp(2rem,5vw,5rem);
font-weight: 300;
}
.meta__subtitle {
margin: 0;
}
.demos {
position: relative;
text-align: right;
grid-area: demos;
background: var(--color-bg-demos);
border-radius: 8px;
padding: 0.5rem;
display: flex;
grid-column-gap: 0.5rem;
grid-row-gap: 0.5rem;
align-items: flex-end;
align-content: flex-end;
flex-wrap: wrap;
justify-content: flex-end;
z-index: 200;
}
.demos span {
width: 100%;
}
.demo {
background: var(--color-bg);
aspect-ratio: 1;
flex: none;
width: 3rem;
display: grid;
place-items: center;
text-align: center;
border-radius: 5px;
}
.demo--current {
color: rgba(255,255,255,0.5);
}
.frame {
grid-area: frame;
z-index: 1000;
position: relative;
display: grid;
grid-template-columns: auto auto;
grid-template-areas: 'title title' 'prev back' 'sponsor sponsor';
grid-gap: 0.5rem;
}
body #cdawrap {
justify-self: start;
}
.frame a {
pointer-events: auto;
}
.frame__title {
grid-area: title;
font-size: inherit;
margin: 0;
font-weight: inherit;
}
.frame__back {
grid-area: back;
}
.frame__prev {
grid-area: prev;
}
.content {
grid-area: content;
border-radius: 8px;
background: var(--color-bg-content);
position: relative;
z-index: 100;
}
.content__img {
width: var(--img-width);
aspect-ratio: var(--img-ratio);
border-radius: var(--img-border-radius);
position: absolute;
top: 0;
left: 0;
opacity: 0;
overflow: hidden;
will-change: transform, filter;
}
.demo-7 .content__img {
mix-blend-mode: screen;
}
.demo-8 .content__img {
overflow: visible;
}
.content__img-inner {
background-position: 50% 50%;
width: calc(100% + var(--img-offset-x));
height: calc(100% + var(--img-offset-y));
background-size: cover;
position: absolute;
top: calc( -1 * var(--img-offset-y) / 2 );
left: calc( -1 * var(--img-offset-x) / 2 );
}
@supports(font-variant-alternates: styleset(ss02)) {
.show-if-variant-alternates-supported {
color: #f00;
}
.hide-if-variant-alternates-supported {
display: none;
}
.show-if-no-variant-alternates-supported {
display: none;
}
}
@supports not (font-variant-alternates: styleset(ss02)) {
.hide-if-no-variant-alternates-support {
display: none;
}
.show-if-no-variant-alternates-supported {
color: #f00;
}
}
.ss01 {
font-variant-alternates: styleset(ss01);
}
.ss02 {
font-variant-alternates: styleset(ss02);
}
.ss03 {
font-variant-alternates: styleset(ss03);
}
.ss04 {
font-variant-alternates: styleset(ss04);
}
.ss05 {
font-variant-alternates: styleset(ss05);
}
@media screen and (min-width: 53em) {
main {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas: 'frame frame' 'content content' 'meta demos';
}
.frame {
grid-template-columns: auto auto auto 1fr;
grid-template-areas: 'title back prev sponsor';
align-content: space-between;
align-items: end;
grid-gap: 2rem;
}
.frame__title::after {
content: '_';
}
.frame__title::before {
content: '_';
}
.demos {
justify-self: end;
grid-column-gap: 0.5rem;
grid-row-gap: 1rem;
padding: 1rem;
}
body #cdawrap {
justify-self: end;
}
}
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>Motion Trail Animations | Demo 1 | Codrops</title>
<meta name="description" content="Ideas for Motion Trail Animations on Images" />
<meta name="keywords" content="motion trail, image animation, gsap, javascript, mouse trail" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script>document.documentElement.className="js";</script>
</head>
<body class="demo-1 loading">
<main>
<div class="frame">
<h1 class="frame__title">Motion Trail Animations</h1>
<a class="frame__prev" href="https://tympanus.net/Tutorials/WebGLLensRefraction/">Previous demo</a>
<a class="frame__back" href="https://tympanus.net/codrops/?p=74079">Article</a>
</div>
<nav class="demos">
<span>Variations </span>
<a href="index.html" class="demo demo--current">1</a>
<a href="index2.html" class="demo">2</a>
<a href="index3.html" class="demo">3</a>
<a href="index4.html" class="demo">4</a>
<a href="index5.html" class="demo">5</a>
<a href="index6.html" class="demo">6</a>
<a href="index7.html" class="demo">7</a>
<a href="index8.html" class="demo">8</a>
<a href="index9.html" class="demo">9</a>
</nav>
<div class="meta">
<h2 class="meta__title">Classic</h2>
<p class="meta__subtitle">Images appear and scale/fade out</p>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/31.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/32.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/33.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/34.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/35.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/36.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/37.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/38.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/39.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/40.jpg)"></div>
</div>
</div><!--/content-->
</main>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/gsap.min.js"></script>
<script type="module" src="js/demo1/index.js"></script>
</body>
</html>
함께 쓰는 파일 33개 보기
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>Motion Trail Animations | Demo 2 | Codrops</title>
<meta name="description" content="Ideas for Motion Trail Animations on Images" />
<meta name="keywords" content="motion trail, image animation, gsap, javascript, mouse trail" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script>document.documentElement.className="js";</script>
</head>
<body class="demo-2 loading">
<main>
<div class="frame">
<h1 class="frame__title">Motion Trail Animations</h1>
<a class="frame__prev" href="https://tympanus.net/Tutorials/WebGLLensRefraction/">Previous demo</a>
<a class="frame__back" href="https://tympanus.net/codrops/?p=74079">Article</a>
</div>
<nav class="demos">
<span>Variations </span>
<a href="index.html" class="demo">1</a>
<a href="index2.html" class="demo demo--current">2</a>
<a href="index3.html" class="demo">3</a>
<a href="index4.html" class="demo">4</a>
<a href="index5.html" class="demo">5</a>
<a href="index6.html" class="demo">6</a>
<a href="index7.html" class="demo">7</a>
<a href="index8.html" class="demo">8</a>
<a href="index9.html" class="demo">9</a>
</nav>
<div class="meta">
<h2 class="meta__title">Innerscape</h2>
<p class="meta__subtitle">Similar to classic with movement of inner image</p>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/50.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/49.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/48.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/47.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/46.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/45.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/44.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/43.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/42.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/41.jpg)"></div>
</div>
</div><!--/content-->
</main>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/gsap.min.js"></script>
<script type="module" src="js/demo2/index.js"></script>
</body>
</html>
index3.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>Motion Trail Animations | Demo 3 | Codrops</title>
<meta name="description" content="Ideas for Motion Trail Animations on Images" />
<meta name="keywords" content="motion trail, image animation, gsap, javascript, mouse trail" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script>document.documentElement.className="js";</script>
</head>
<body class="demo-3 loading">
<main>
<div class="frame">
<h1 class="frame__title">Motion Trail Animations</h1>
<a class="frame__prev" href="https://tympanus.net/Tutorials/WebGLLensRefraction/">Previous demo</a>
<a class="frame__back" href="https://tympanus.net/codrops/?p=74079">Article</a>
</div>
<nav class="demos">
<span>Variations </span>
<a href="index.html" class="demo">1</a>
<a href="index2.html" class="demo">2</a>
<a href="index3.html" class="demo demo--current">3</a>
<a href="index4.html" class="demo">4</a>
<a href="index5.html" class="demo">5</a>
<a href="index6.html" class="demo">6</a>
<a href="index7.html" class="demo">7</a>
<a href="index8.html" class="demo">8</a>
<a href="index9.html" class="demo">9</a>
</nav>
<div class="meta">
<h2 class="meta__title">Exiting</h2>
<p class="meta__subtitle">Special exit direction</p>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/11.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/12.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/13.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/14.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/15.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/16.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/17.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/18.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/19.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/20.jpg)"></div>
</div>
</div><!--/content-->
</main>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/gsap.min.js"></script>
<script type="module" src="js/demo3/index.js"></script>
</body>
</html>
index4.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>Motion Trail Animations | Demo 4 | Codrops</title>
<meta name="description" content="Ideas for Motion Trail Animations on Images" />
<meta name="keywords" content="motion trail, image animation, gsap, javascript, mouse trail" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script>document.documentElement.className="js";</script>
</head>
<body class="demo-4 loading">
<main>
<div class="frame">
<h1 class="frame__title">Motion Trail Animations</h1>
<a class="frame__prev" href="https://tympanus.net/Tutorials/WebGLLensRefraction/">Previous demo</a>
<a class="frame__back" href="https://tympanus.net/codrops/?p=74079">Article</a>
</div>
<nav class="demos">
<span>Variations </span>
<a href="index.html" class="demo">1</a>
<a href="index2.html" class="demo">2</a>
<a href="index3.html" class="demo">3</a>
<a href="index4.html" class="demo demo--current">4</a>
<a href="index5.html" class="demo">5</a>
<a href="index6.html" class="demo">6</a>
<a href="index7.html" class="demo">7</a>
<a href="index8.html" class="demo">8</a>
<a href="index9.html" class="demo">9</a>
</nav>
<div class="meta">
<h2 class="meta__title">Flow Follow</h2>
<p class="meta__subtitle">Following mouse movement enhanced with filter</p>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/41.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/42.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/43.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/44.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/45.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/46.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/47.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/48.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/49.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/50.jpg)"></div>
</div>
</div><!--/content-->
</main>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/gsap.min.js"></script>
<script type="module" src="js/demo4/index.js"></script>
</body>
</html>
index5.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>Motion Trail Animations | Demo 5 | Codrops</title>
<meta name="description" content="Ideas for Motion Trail Animations on Images" />
<meta name="keywords" content="motion trail, image animation, gsap, javascript, mouse trail" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script>document.documentElement.className="js";</script>
</head>
<body class="demo-5 loading">
<main>
<div class="frame">
<h1 class="frame__title">Motion Trail Animations</h1>
<a class="frame__prev" href="https://tympanus.net/Tutorials/WebGLLensRefraction/">Previous demo</a>
<a class="frame__back" href="https://tympanus.net/codrops/?p=74079">Article</a>
</div>
<nav class="demos">
<span>Variations </span>
<a href="index.html" class="demo">1</a>
<a href="index2.html" class="demo">2</a>
<a href="index3.html" class="demo">3</a>
<a href="index4.html" class="demo">4</a>
<a href="index5.html" class="demo demo--current">5</a>
<a href="index6.html" class="demo">6</a>
<a href="index7.html" class="demo">7</a>
<a href="index8.html" class="demo">8</a>
<a href="index9.html" class="demo">9</a>
</nav>
<div class="meta">
<h2 class="meta__title">Spintrail</h2>
<p class="meta__subtitle">Rotation in the trail motion</p>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/51.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/52.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/53.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/54.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/55.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/56.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/57.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/58.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/59.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/60.jpg)"></div>
</div>
</div><!--/content-->
</main>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/gsap.min.js"></script>
<script type="module" src="js/demo5/index.js"></script>
</body>
</html>
index6.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>Motion Trail Animations | Demo 6 | Codrops</title>
<meta name="description" content="Ideas for Motion Trail Animations on Images" />
<meta name="keywords" content="motion trail, image animation, gsap, javascript, mouse trail" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script>document.documentElement.className="js";</script>
</head>
<body class="demo-6 loading">
<main>
<div class="frame">
<h1 class="frame__title">Motion Trail Animations</h1>
<a class="frame__prev" href="https://tympanus.net/Tutorials/WebGLLensRefraction/">Previous demo</a>
<a class="frame__back" href="https://tympanus.net/codrops/?p=74079">Article</a>
</div>
<nav class="demos">
<span>Variations </span>
<a href="index.html" class="demo">1</a>
<a href="index2.html" class="demo">2</a>
<a href="index3.html" class="demo">3</a>
<a href="index4.html" class="demo">4</a>
<a href="index5.html" class="demo">5</a>
<a href="index6.html" class="demo demo--current">6</a>
<a href="index7.html" class="demo">7</a>
<a href="index8.html" class="demo">8</a>
<a href="index9.html" class="demo">9</a>
</nav>
<div class="meta">
<h2 class="meta__title">Velocity</h2>
<p class="meta__subtitle">Image appearance & effect is speed-aware</p>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/1.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/2.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/3.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/4.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/5.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/6.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/7.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/8.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/9.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/10.jpg)"></div>
</div>
</div><!--/content-->
</main>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/gsap.min.js"></script>
<script type="module" src="js/demo6/index.js"></script>
</body>
</html>
index7.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>Motion Trail Animations | Demo 7 | Codrops</title>
<meta name="description" content="Ideas for Motion Trail Animations on Images" />
<meta name="keywords" content="motion trail, image animation, gsap, javascript, mouse trail" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script>document.documentElement.className="js";</script>
</head>
<body class="demo-7 loading">
<main>
<div class="frame">
<h1 class="frame__title">Motion Trail Animations</h1>
<a class="frame__prev" href="https://tympanus.net/Tutorials/WebGLLensRefraction/">Previous demo</a>
<a class="frame__back" href="https://tympanus.net/codrops/?p=74079">Article</a>
</div>
<nav class="demos">
<span>Variations </span>
<a href="index.html" class="demo">1</a>
<a href="index2.html" class="demo">2</a>
<a href="index3.html" class="demo">3</a>
<a href="index4.html" class="demo">4</a>
<a href="index5.html" class="demo">5</a>
<a href="index6.html" class="demo">6</a>
<a href="index7.html" class="demo demo--current">7</a>
<a href="index8.html" class="demo">8</a>
<a href="index9.html" class="demo">9</a>
</nav>
<div class="meta">
<h2 class="meta__title">Persistance</h2>
<p class="meta__subtitle">Using a blend mode with images remaining</p>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/41.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/42.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/43.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/44.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/45.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/46.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/47.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/48.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/49.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/50.jpg)"></div>
</div>
</div><!--/content-->
</main>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/gsap.min.js"></script>
<script type="module" src="js/demo7/index.js"></script>
</body>
</html>
index8.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>Motion Trail Animations | Demo 8 | Codrops</title>
<meta name="description" content="Ideas for Motion Trail Animations on Images" />
<meta name="keywords" content="motion trail, image animation, gsap, javascript, mouse trail" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script>document.documentElement.className="js";</script>
</head>
<body class="demo-8 loading">
<main>
<div class="frame">
<h1 class="frame__title">Motion Trail Animations</h1>
<a class="frame__prev" href="https://tympanus.net/Tutorials/WebGLLensRefraction/">Previous demo</a>
<a class="frame__back" href="https://tympanus.net/codrops/?p=74079">Article</a>
</div>
<nav class="demos">
<span>Variations </span>
<a href="index.html" class="demo">1</a>
<a href="index2.html" class="demo">2</a>
<a href="index3.html" class="demo">3</a>
<a href="index4.html" class="demo">4</a>
<a href="index5.html" class="demo">5</a>
<a href="index6.html" class="demo">6</a>
<a href="index7.html" class="demo">7</a>
<a href="index8.html" class="demo demo--current">8</a>
<a href="index9.html" class="demo">9</a>
</nav>
<div class="meta">
<h2 class="meta__title">Tile Apart</h2>
<p class="meta__subtitle">Images break apart using clip paths</p>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/61.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/62.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/63.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/64.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/65.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/66.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/67.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/68.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/69.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/70.jpg)"></div>
</div>
</div><!--/content-->
</main>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/gsap.min.js"></script>
<script type="module" src="js/demo8/index.js"></script>
</body>
</html>
index9.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>Motion Trail Animations | Demo 9 | Codrops</title>
<meta name="description" content="Ideas for Motion Trail Animations on Images" />
<meta name="keywords" content="motion trail, image animation, gsap, javascript, mouse trail" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script>document.documentElement.className="js";</script>
</head>
<body class="demo-9 loading">
<main>
<div class="frame">
<h1 class="frame__title">Motion Trail Animations</h1>
<a class="frame__prev" href="https://tympanus.net/Tutorials/WebGLLensRefraction/">Previous demo</a>
<a class="frame__back" href="https://tympanus.net/codrops/?p=74079">Article</a>
</div>
<nav class="demos">
<span>Variations </span>
<a href="index.html" class="demo">1</a>
<a href="index2.html" class="demo">2</a>
<a href="index3.html" class="demo">3</a>
<a href="index4.html" class="demo">4</a>
<a href="index5.html" class="demo">5</a>
<a href="index6.html" class="demo">6</a>
<a href="index7.html" class="demo">7</a>
<a href="index8.html" class="demo">8</a>
<a href="index9.html" class="demo demo--current">9</a>
</nav>
<div class="meta">
<h2 class="meta__title">Perspective</h2>
<p class="meta__subtitle">Motion in 3D space</p>
</div>
<div class="content">
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/50.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/49.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/48.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/47.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/46.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/45.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/44.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/43.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/42.jpg)"></div>
</div>
<div class="content__img">
<div class="content__img-inner" style="background-image:url(img/41.jpg)"></div>
</div>
</div><!--/content-->
</main>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/gsap.min.js"></script>
<script type="module" src="js/demo9/index.js"></script>
</body>
</html>
js/demo1/imageTrail.js
// Importing utility functions from 'utils.js'
import { getPointerPos, getMouseDistance, lerp } from '../utils.js';
import { Image } from '../image.js';
// Initial declaration of mouse position variables with default values
let mousePos, lastMousePos, cacheMousePos;
mousePos = {x: 0, y: 0}; // current mouse position
cacheMousePos = {...mousePos}; // previous mouse position
lastMousePos = {...mousePos}; // stores the position of the mouse at the time the most recent image was displayed, serving as a reference point for calculating the distance the cursor has moved in subsequent frames
// This function will be used to handle both mouse and touch events
const handlePointerMove = (ev) => {
// If it's a touch event, we'll use the first touch point
if (ev.touches) {
mousePos = getPointerPos(ev.touches[0]);
} else {
// If it's a mouse event, proceed as usual
mousePos = getPointerPos(ev);
}
};
// Adding an event listener to the window to update mouse position on mousemove event
window.addEventListener('mousemove', handlePointerMove);
window.addEventListener('touchmove', handlePointerMove);
export class ImageTrail {
// Class properties initialization
DOM = {el: null}; // Object to hold DOM elements
images = []; // Array to store Image objects
imagesTotal = 0; // Variable to store total number of images
imgPosition = 0; // Variable to store the position of the upcoming image
zIndexVal = 1; // z-index value for the upcoming image
activeImagesCount = 0; // Counter for active images
isIdle = true; // Flag to check if all images are inactive
// Mouse distance from the previous trigger, required to show the next image
threshold = 80;
/**
* Constructor for the ImageTrail class.
* Initializes the instance, sets up the DOM elements, creates Image objects for each image element, and starts the rendering loop.
* @param {HTMLElement} DOM_el - The parent DOM element containing all image elements.
*/
constructor(DOM_el) {
// Store the reference to the parent DOM element.
this.DOM.el = DOM_el;
// Create and store Image objects for each image element found within the parent DOM element.
this.images = [...this.DOM.el.querySelectorAll('.content__img')].map(img => new Image(img));
// Store the total number of images.
this.imagesTotal = this.images.length;
const onPointerMoveEv = () => {
// Initialize cacheMousePos with the current mousePos values.
// This is necessary to have a reference point for the initial mouse position.
cacheMousePos = {...mousePos};
// Initiate the rendering loop.
requestAnimationFrame(() => this.render());
// Remove this mousemove event listener after it runs once to avoid reinitialization.
window.removeEventListener('mousemove', onPointerMoveEv);
window.removeEventListener('touchmove', onPointerMoveEv);
};
// Set up an initial mousemove event listener to run onMouseMoveEv once.
window.addEventListener('mousemove', onPointerMoveEv);
window.addEventListener('touchmove', onPointerMoveEv);
}
/**
* The `render` function is the main rendering loop for the `ImageTrail` class, updating images based on mouse movement.
* It calculates the distance between the current and the last mouse position, then decides whether to show the next image.
* @returns {void}
*/
render() {
// Calculate distance between current mouse position and last recorded mouse position.
let distance = getMouseDistance(mousePos, lastMousePos);
// Smoothly interpolate between cached mouse position and current mouse position for smoother visual effects.
cacheMousePos.x = lerp(cacheMousePos.x || mousePos.x, mousePos.x, 0.1);
cacheMousePos.y = lerp(cacheMousePos.y || mousePos.y, mousePos.y, 0.1);
// If the calculated distance is greater than the defined threshold, show the next image and update lastMousePos.
if ( distance > this.threshold ) {
this.showNextImage();
lastMousePos = mousePos;
}
// If all images are inactive (isIdle is true) and zIndexVal is not 1, reset zIndexVal to avoid endless incrementation.
if ( this.isIdle && this.zIndexVal !== 1 ) {
this.zIndexVal = 1;
}
// Request the next animation frame, creating a recursive loop for continuous rendering.
requestAnimationFrame(() => this.render());
}
/**
* The `showNextImage` function is responsible for displaying, animating, and managing the next image in the sequence.
* It increments the zIndexVal, selects the next image, stops ongoing animations, and defines a series of GSAP animations.
* @returns {void}
*/
showNextImage() {
// Increment zIndexVal for next image.
++this.zIndexVal;
// Select the next image in the sequence, or revert to the first image if at the end of the sequence.
this.imgPosition = this.imgPosition < this.imagesTotal-1 ? this.imgPosition+1 : 0;
// Retrieve the Image object for the selected position.
const img = this.images[this.imgPosition];
// Stop any ongoing GSAP animations on the target image element to prepare for new animations.
gsap.killTweensOf(img.DOM.el);
// Define GSAP timeline.
img.timeline = gsap.timeline({
onStart: () => this.onImageActivated(),
onComplete: () => this.onImageDeactivated()
})
// Animate position
.fromTo(img.DOM.el, {
opacity: 1,
scale: 1,
zIndex: this.zIndexVal,
x: cacheMousePos.x - img.rect.width/2 ,
y: cacheMousePos.y - img.rect.height/2
}, {
duration: 0.4,
ease: 'power1',
x: mousePos.x - img.rect.width/2,
y: mousePos.y - img.rect.height/2
}, 0)
// then make it disappear
.to(img.DOM.el, {
duration: 0.4,
ease: 'power3',
opacity: 0,
scale: 0.2
}, 0.4)
}
/**
* onImageActivated function is called when an image's activation (display) animation begins.
* It increments the activeImagesCount and sets isIdle flag to false.
* @returns {void}
*/
onImageActivated = () => {
// Increment the counter for active images.
this.activeImagesCount++;
// Set the isIdle flag to false as there's at least one active image.
this.isIdle = false;
}
/**
* onImageDeactivated function is called when an image's deactivation (disappearance) animation ends.
* It decrements the activeImagesCount and sets isIdle flag to true if no images are active.
* @returns {void}
*/
onImageDeactivated = () => {
// Decrement the counter for active images.
this.activeImagesCount--;
// If there are no active images, set the isIdle flag to true.
if (this.activeImagesCount === 0) {
this.isIdle = true;
}
}
}js/demo1/index.js
// 'preloadImages' is a utility function that handles the preloading of images to ensure they are fully loaded before being used.
import { preloadImages } from '../utils.js';
// 'ImageTrail' is a class designed to manage and animate a sequence of images, reacting to mouse movements.
import { ImageTrail } from './imageTrail.js';
// Preload all images
preloadImages('.content__img-inner').then(() => {
// Once all images are preloaded, remove the 'loading' class from the body element.
document.body.classList.remove('loading');
// Instantiate a new ImageTrail object, initializing it with the element that has the class 'content'.
// The ImageTrail instance starts managing and animating the sequence of images within the specified element, reacting to mouse movements.
new ImageTrail(document.querySelector('.content'));
});
js/demo2/imageTrail.js
// Importing utility functions from 'utils.js'
import { getPointerPos, getMouseDistance, lerp } from '../utils.js';
import { Image } from '../image.js';
// Initial declaration of mouse position variables with default values
let mousePos, lastMousePos, cacheMousePos;
mousePos = {x: 0, y: 0}; // current mouse position
cacheMousePos = {...mousePos}; // previous mouse position
lastMousePos = {...mousePos}; // stores the position of the mouse at the time the most recent image was displayed, serving as a reference point for calculating the distance the cursor has moved in subsequent frames
// This function will be used to handle both mouse and touch events
const handlePointerMove = (ev) => {
// If it's a touch event, we'll use the first touch point
if (ev.touches) {
mousePos = getPointerPos(ev.touches[0]);
} else {
// If it's a mouse event, proceed as usual
mousePos = getPointerPos(ev);
}
};
// Adding an event listener to the window to update mouse position on mousemove event
window.addEventListener('mousemove', handlePointerMove);
window.addEventListener('touchmove', handlePointerMove);
export class ImageTrail {
// Class properties initialization
DOM = {el: null}; // Object to hold DOM elements
images = []; // Array to store Image objects
imagesTotal = 0; // Variable to store total number of images
imgPosition = 0; // Variable to store the position of the upcoming image
zIndexVal = 1; // z-index value for the upcoming image
activeImagesCount = 0; // Counter for active images
isIdle = true; // Flag to check if all images are inactive
// Mouse distance from the previous trigger, required to show the next image
threshold = 80;
/**
* Constructor for the ImageTrail class.
* Initializes the instance, sets up the DOM elements, creates Image objects for each image element, and starts the rendering loop.
* @param {HTMLElement} DOM_el - The parent DOM element containing all image elements.
*/
constructor(DOM_el) {
// Store the reference to the parent DOM element.
this.DOM.el = DOM_el;
// Create and store Image objects for each image element found within the parent DOM element.
this.images = [...this.DOM.el.querySelectorAll('.content__img')].map(img => new Image(img));
// Store the total number of images.
this.imagesTotal = this.images.length;
const onPointerMoveEv = () => {
// Initialize cacheMousePos with the current mousePos values.
// This is necessary to have a reference point for the initial mouse position.
cacheMousePos = {...mousePos};
// Initiate the rendering loop.
requestAnimationFrame(() => this.render());
// Remove this mousemove event listener after it runs once to avoid reinitialization.
window.removeEventListener('mousemove', onPointerMoveEv);
window.removeEventListener('touchmove', onPointerMoveEv);
};
// Set up an initial mousemove event listener to run onMouseMoveEv once.
window.addEventListener('mousemove', onPointerMoveEv);
window.addEventListener('touchmove', onPointerMoveEv);
}
/**
* The `render` function is the main rendering loop for the `ImageTrail` class, updating images based on mouse movement.
* It calculates the distance between the current and the last mouse position, then decides whether to show the next image.
* @returns {void}
*/
render() {
// Calculate distance between current mouse position and last recorded mouse position.
let distance = getMouseDistance(mousePos, lastMousePos);
// Smoothly interpolate between cached mouse position and current mouse position for smoother visual effects.
cacheMousePos.x = lerp(cacheMousePos.x || mousePos.x, mousePos.x, 0.1);
cacheMousePos.y = lerp(cacheMousePos.y || mousePos.y, mousePos.y, 0.1);
// If the calculated distance is greater than the defined threshold, show the next image and update lastMousePos.
if ( distance > this.threshold ) {
this.showNextImage();
lastMousePos = mousePos;
}
// If all images are inactive (isIdle is true) and zIndexVal is not 1, reset zIndexVal to avoid endless incrementation.
if ( this.isIdle && this.zIndexVal !== 1 ) {
this.zIndexVal = 1;
}
// Request the next animation frame, creating a recursive loop for continuous rendering.
requestAnimationFrame(() => this.render());
}
/**
* The `showNextImage` function is responsible for displaying, animating, and managing the next image in the sequence.
* It increments the zIndexVal, selects the next image, stops ongoing animations, and defines a series of GSAP animations.
* @returns {void}
*/
showNextImage() {
// Increment zIndexVal for next image.
++this.zIndexVal;
// Select the next image in the sequence, or revert to the first image if at the end of the sequence.
this.imgPosition = this.imgPosition < this.imagesTotal-1 ? this.imgPosition+1 : 0;
// Retrieve the Image object for the selected position.
const img = this.images[this.imgPosition];
// Stop any ongoing GSAP animations on the target image element to prepare for new animations.
gsap.killTweensOf(img.DOM.el);
// Define GSAP timeline.
img.timeline = gsap.timeline({
onStart: () => this.onImageActivated(),
onComplete: () => this.onImageDeactivated()
})
.fromTo(img.DOM.el, {
opacity: 1,
scale: 0,
zIndex: this.zIndexVal,
x: cacheMousePos.x - img.rect.width/2 ,
y: cacheMousePos.y - img.rect.height/2
}, {
duration: 0.4,
ease: 'power1',
scale: 1,
x: mousePos.x - img.rect.width/2,
y: mousePos.y - img.rect.height/2
}, 0)
/* Inner image */
.fromTo(img.DOM.inner, {
scale: 2.8,
filter: 'brightness(250%)'
}, {
duration: 0.4,
ease: 'power1',
scale: 1,
filter: 'brightness(100%)'
}, 0)
/* Inner image */
// then make it disappear
.to(img.DOM.el, {
duration: 0.4,
ease: 'power2',
opacity: 0,
scale: 0.2
}, 0.45)
}
/**
* onImageActivated function is called when an image's activation (display) animation begins.
* It increments the activeImagesCount and sets isIdle flag to false.
* @returns {void}
*/
onImageActivated = () => {
// Increment the counter for active images.
this.activeImagesCount++;
// Set the isIdle flag to false as there's at least one active image.
this.isIdle = false;
}
/**
* onImageDeactivated function is called when an image's deactivation (disappearance) animation ends.
* It decrements the activeImagesCount and sets isIdle flag to true if no images are active.
* @returns {void}
*/
onImageDeactivated = () => {
// Decrement the counter for active images.
this.activeImagesCount--;
// If there are no active images, set the isIdle flag to true.
if (this.activeImagesCount === 0) {
this.isIdle = true;
}
}
}js/demo2/index.js
// 'preloadImages' is a utility function that handles the preloading of images to ensure they are fully loaded before being used.
import { preloadImages } from '../utils.js';
// 'ImageTrail' is a class designed to manage and animate a sequence of images, reacting to mouse movements.
import { ImageTrail } from './imageTrail.js';
// Preload all images
preloadImages('.content__img-inner').then(() => {
// Once all images are preloaded, remove the 'loading' class from the body element.
document.body.classList.remove('loading');
// Instantiate a new ImageTrail object, initializing it with the element that has the class 'content'.
// The ImageTrail instance starts managing and animating the sequence of images within the specified element, reacting to mouse movements.
new ImageTrail(document.querySelector('.content'));
});
js/demo3/imageTrail.js
// Importing utility functions from 'utils.js'
import { getPointerPos, getMouseDistance, lerp } from '../utils.js';
import { Image } from '../image.js';
// Initial declaration of mouse position variables with default values
let mousePos, lastMousePos, cacheMousePos;
mousePos = {x: 0, y: 0}; // current mouse position
cacheMousePos = {...mousePos}; // previous mouse position
lastMousePos = {...mousePos}; // stores the position of the mouse at the time the most recent image was displayed, serving as a reference point for calculating the distance the cursor has moved in subsequent frames
// This function will be used to handle both mouse and touch events
const handlePointerMove = (ev) => {
// If it's a touch event, we'll use the first touch point
if (ev.touches) {
mousePos = getPointerPos(ev.touches[0]);
} else {
// If it's a mouse event, proceed as usual
mousePos = getPointerPos(ev);
}
};
// Adding an event listener to the window to update mouse position on mousemove event
window.addEventListener('mousemove', handlePointerMove);
window.addEventListener('touchmove', handlePointerMove);
export class ImageTrail {
// Class properties initialization
DOM = {el: null}; // Object to hold DOM elements
images = []; // Array to store Image objects
imagesTotal = 0; // Variable to store total number of images
imgPosition = 0; // Variable to store the position of the upcoming image
zIndexVal = 1; // z-index value for the upcoming image
activeImagesCount = 0; // Counter for active images
isIdle = true; // Flag to check if all images are inactive
// Mouse distance from the previous trigger, required to show the next image
threshold = 80;
/**
* Constructor for the ImageTrail class.
* Initializes the instance, sets up the DOM elements, creates Image objects for each image element, and starts the rendering loop.
* @param {HTMLElement} DOM_el - The parent DOM element containing all image elements.
*/
constructor(DOM_el) {
// Store the reference to the parent DOM element.
this.DOM.el = DOM_el;
// Create and store Image objects for each image element found within the parent DOM element.
this.images = [...this.DOM.el.querySelectorAll('.content__img')].map(img => new Image(img));
// Store the total number of images.
this.imagesTotal = this.images.length;
const onPointerMoveEv = () => {
// Initialize cacheMousePos with the current mousePos values.
// This is necessary to have a reference point for the initial mouse position.
cacheMousePos = {...mousePos};
// Initiate the rendering loop.
requestAnimationFrame(() => this.render());
// Remove this mousemove event listener after it runs once to avoid reinitialization.
window.removeEventListener('mousemove', onPointerMoveEv);
window.removeEventListener('touchmove', onPointerMoveEv);
};
// Set up an initial mousemove event listener to run onMouseMoveEv once.
window.addEventListener('mousemove', onPointerMoveEv);
window.addEventListener('touchmove', onPointerMoveEv);
}
/**
* The `render` function is the main rendering loop for the `ImageTrail` class, updating images based on mouse movement.
* It calculates the distance between the current and the last mouse position, then decides whether to show the next image.
* @returns {void}
*/
render() {
// Calculate distance between current mouse position and last recorded mouse position.
let distance = getMouseDistance(mousePos, lastMousePos);
// Smoothly interpolate between cached mouse position and current mouse position for smoother visual effects.
cacheMousePos.x = lerp(cacheMousePos.x || mousePos.x, mousePos.x, 0.1);
cacheMousePos.y = lerp(cacheMousePos.y || mousePos.y, mousePos.y, 0.1);
// If the calculated distance is greater than the defined threshold, show the next image and update lastMousePos.
if ( distance > this.threshold ) {
this.showNextImage();
lastMousePos = mousePos;
}
// If all images are inactive (isIdle is true) and zIndexVal is not 1, reset zIndexVal to avoid endless incrementation.
if ( this.isIdle && this.zIndexVal !== 1 ) {
this.zIndexVal = 1;
}
// Request the next animation frame, creating a recursive loop for continuous rendering.
requestAnimationFrame(() => this.render());
}
/**
* The `showNextImage` function is responsible for displaying, animating, and managing the next image in the sequence.
* It increments the zIndexVal, selects the next image, stops ongoing animations, and defines a series of GSAP animations.
* @returns {void}
*/
showNextImage() {
// Increment zIndexVal for next image.
++this.zIndexVal;
// Select the next image in the sequence, or revert to the first image if at the end of the sequence.
this.imgPosition = this.imgPosition < this.imagesTotal-1 ? this.imgPosition+1 : 0;
// Retrieve the Image object for the selected position.
const img = this.images[this.imgPosition];
// Stop any ongoing GSAP animations on the target image element to prepare for new animations.
gsap.killTweensOf(img.DOM.el);
// Define GSAP timeline.
img.timeline = gsap.timeline({
onStart: () => this.onImageActivated(),
onComplete: () => this.onImageDeactivated()
})
.fromTo(img.DOM.el, {
opacity: 1,
scale: 0,
zIndex: this.zIndexVal,
xPercent: 0,
yPercent: 0,
x: cacheMousePos.x - img.rect.width/2,
y: cacheMousePos.y - img.rect.height/2
}, {
duration: 0.4,
ease: 'power1',
scale: 1,
x: mousePos.x - img.rect.width/2,
y: mousePos.y - img.rect.height/2
}, 0)
/* Inner image */
.fromTo(img.DOM.inner, {
scale: 1.2
}, {
duration: 0.4,
ease: 'power1',
scale: 1
}, 0)
/* Inner image */
// then make it disappear
.to(img.DOM.el, {
duration: .6,
ease: 'power2',
opacity: 0,
scale: 0.2,
xPercent: () => gsap.utils.random(-30,30),
yPercent: -200,
}, 0.6)
}
/**
* onImageActivated function is called when an image's activation (display) animation begins.
* It increments the activeImagesCount and sets isIdle flag to false.
* @returns {void}
*/
onImageActivated = () => {
// Increment the counter for active images.
this.activeImagesCount++;
// Set the isIdle flag to false as there's at least one active image.
this.isIdle = false;
}
/**
* onImageDeactivated function is called when an image's deactivation (disappearance) animation ends.
* It decrements the activeImagesCount and sets isIdle flag to true if no images are active.
* @returns {void}
*/
onImageDeactivated = () => {
// Decrement the counter for active images.
this.activeImagesCount--;
// If there are no active images, set the isIdle flag to true.
if (this.activeImagesCount === 0) {
this.isIdle = true;
}
}
}js/demo3/index.js
// 'preloadImages' is a utility function that handles the preloading of images to ensure they are fully loaded before being used.
import { preloadImages } from '../utils.js';
// 'ImageTrail' is a class designed to manage and animate a sequence of images, reacting to mouse movements.
import { ImageTrail } from './imageTrail.js';
// Preload all images
preloadImages('.content__img-inner').then(() => {
// Once all images are preloaded, remove the 'loading' class from the body element.
document.body.classList.remove('loading');
// Instantiate a new ImageTrail object, initializing it with the element that has the class 'content'.
// The ImageTrail instance starts managing and animating the sequence of images within the specified element, reacting to mouse movements.
new ImageTrail(document.querySelector('.content'));
});
js/demo4/imageTrail.js
// Importing utility functions from 'utils.js'
import { getPointerPos, getMouseDistance, lerp } from '../utils.js';
import { Image } from '../image.js';
// Initial declaration of mouse position variables with default values
let mousePos, lastMousePos, cacheMousePos;
mousePos = {x: 0, y: 0}; // current mouse position
cacheMousePos = {...mousePos}; // previous mouse position
lastMousePos = {...mousePos}; // stores the position of the mouse at the time the most recent image was displayed, serving as a reference point for calculating the distance the cursor has moved in subsequent frames
// This function will be used to handle both mouse and touch events
const handlePointerMove = (ev) => {
// If it's a touch event, we'll use the first touch point
if (ev.touches) {
mousePos = getPointerPos(ev.touches[0]);
} else {
// If it's a mouse event, proceed as usual
mousePos = getPointerPos(ev);
}
};
// Adding an event listener to the window to update mouse position on mousemove event
window.addEventListener('mousemove', handlePointerMove);
window.addEventListener('touchmove', handlePointerMove);
export class ImageTrail {
// Class properties initialization
DOM = {el: null}; // Object to hold DOM elements
images = []; // Array to store Image objects
imagesTotal = 0; // Variable to store total number of images
imgPosition = 0; // Variable to store the position of the upcoming image
zIndexVal = 1; // z-index value for the upcoming image
activeImagesCount = 0; // Counter for active images
isIdle = true; // Flag to check if all images are inactive
// Mouse distance from the previous trigger, required to show the next image
threshold = 80;
/**
* Constructor for the ImageTrail class.
* Initializes the instance, sets up the DOM elements, creates Image objects for each image element, and starts the rendering loop.
* @param {HTMLElement} DOM_el - The parent DOM element containing all image elements.
*/
constructor(DOM_el) {
// Store the reference to the parent DOM element.
this.DOM.el = DOM_el;
// Create and store Image objects for each image element found within the parent DOM element.
this.images = [...this.DOM.el.querySelectorAll('.content__img')].map(img => new Image(img));
// Store the total number of images.
this.imagesTotal = this.images.length;
const onPointerMoveEv = () => {
// Initialize cacheMousePos with the current mousePos values.
// This is necessary to have a reference point for the initial mouse position.
cacheMousePos = {...mousePos};
// Initiate the rendering loop.
requestAnimationFrame(() => this.render());
// Remove this mousemove event listener after it runs once to avoid reinitialization.
window.removeEventListener('mousemove', onPointerMoveEv);
window.removeEventListener('touchmove', onPointerMoveEv);
};
// Set up an initial mousemove event listener to run onMouseMoveEv once.
window.addEventListener('mousemove', onPointerMoveEv);
window.addEventListener('touchmove', onPointerMoveEv);
}
/**
* The `render` function is the main rendering loop for the `ImageTrail` class, updating images based on mouse movement.
* It calculates the distance between the current and the last mouse position, then decides whether to show the next image.
* @returns {void}
*/
render() {
// Calculate distance between current mouse position and last recorded mouse position.
let distance = getMouseDistance(mousePos, lastMousePos);
// If the calculated distance is greater than the defined threshold, show the next image and update lastMousePos.
if ( distance > this.threshold ) {
this.showNextImage();
lastMousePos = mousePos;
}
// Smoothly interpolate between cached mouse position and current mouse position for smoother visual effects.
cacheMousePos.x = lerp(cacheMousePos.x || mousePos.x, mousePos.x, 0.1);
cacheMousePos.y = lerp(cacheMousePos.y || mousePos.y, mousePos.y, 0.1);
// If all images are inactive (isIdle is true) and zIndexVal is not 1, reset zIndexVal to avoid endless incrementation.
if ( this.isIdle && this.zIndexVal !== 1 ) {
this.zIndexVal = 1;
}
// Request the next animation frame, creating a recursive loop for continuous rendering.
requestAnimationFrame(() => this.render());
}
/**
* The `showNextImage` function is responsible for displaying, animating, and managing the next image in the sequence.
* It increments the zIndexVal, selects the next image, stops ongoing animations, and defines a series of GSAP animations.
* @returns {void}
*/
showNextImage() {
// Increment zIndexVal for next image.
++this.zIndexVal;
// Select the next image in the sequence, or revert to the first image if at the end of the sequence.
this.imgPosition = this.imgPosition < this.imagesTotal-1 ? this.imgPosition+1 : 0;
// Retrieve the Image object for the selected position.
const img = this.images[this.imgPosition];
// Stop any ongoing GSAP animations on the target image element to prepare for new animations.
gsap.killTweensOf(img.DOM.el);
// Calculate the horizontal and vertical distances between the current and last mouse positions.
let dx = mousePos.x - cacheMousePos.x;
let dy = mousePos.y - cacheMousePos.y;
// Compute the Euclidean distance between the current and last mouse positions. This represents the direct line distance regardless of direction.
let distance = Math.sqrt(dx * dx + dy * dy);
// The next steps involve "normalizing" the distance vector. Normalization refers to adjusting the length of a vector to 1 while keeping its direction constant.
// This is especially useful for simplifying calculations when you're only interested in vector direction and not its magnitude.
// Check to avoid division by zero if the distance is not zero.
if (distance !== 0) {
dx /= distance; // Normalize the x component of the distance vector.
dy /= distance; // Normalize the y component of the distance vector.
}
// The x and y components are now parts of a unit vector in the direction of the mouse movement.
// However, we want the animation to be perceptible, so we scale the components by a factor.
// Here, the factor is calculated based on the original distance, dividing it by a constant to lessen the effect, to avoid overly rapid movement.
// Adjust the x and y components of the unit vector by scaling.
// The scaling factor is the original distance divided by 150, ensuring the movement is noticeable yet smooth.
dx *= distance/100; // Scale the normalized x component.
dy *= distance/100; // Scale the normalized y component.
// Define GSAP timeline.
img.timeline = gsap.timeline({
onStart: () => this.onImageActivated(),
onComplete: () => this.onImageDeactivated()
})
.fromTo(img.DOM.el, {
opacity: 1,
scale: 0,
zIndex: this.zIndexVal,
x: cacheMousePos.x - img.rect.width/2 ,
y: cacheMousePos.y - img.rect.height/2
}, {
duration: 0.4,
ease: 'power1',
scale: 1,
x: mousePos.x - img.rect.width/2,
y: mousePos.y - img.rect.height/2
}, 0)
/* Inner image */
.fromTo(img.DOM.inner, {
scale: 2,
filter: `brightness(${ Math.max(400*distance/100, 100) }%) contrast(${ Math.max(400*distance/100, 100) }%)`
}, {
duration: 0.4,
ease: 'power1',
scale: 1,
filter: 'brightness(100%) contrast(100%)'
}, 0)
/* Inner image */
// then make it disappear
.to(img.DOM.el, {
duration: 0.4,
ease: 'power3',
opacity: 0
}, 0.4)
.to(img.DOM.el, {
duration: 1.5,
ease: 'power4',
x: "+=" + (dx * 110), // Adjust the multiplier as needed
y: "+=" + (dy * 110) // Adjust the multiplier as needed
}, 0.05)
}
/**
* onImageActivated function is called when an image's activation (display) animation begins.
* It increments the activeImagesCount and sets isIdle flag to false.
* @returns {void}
*/
onImageActivated = () => {
// Increment the counter for active images.
this.activeImagesCount++;
// Set the isIdle flag to false as there's at least one active image.
this.isIdle = false;
}
/**
* onImageDeactivated function is called when an image's deactivation (disappearance) animation ends.
* It decrements the activeImagesCount and sets isIdle flag to true if no images are active.
* @returns {void}
*/
onImageDeactivated = () => {
// Decrement the counter for active images.
this.activeImagesCount--;
// If there are no active images, set the isIdle flag to true.
if (this.activeImagesCount === 0) {
this.isIdle = true;
}
}
}js/demo4/index.js
// 'preloadImages' is a utility function that handles the preloading of images to ensure they are fully loaded before being used.
import { preloadImages } from '../utils.js';
// 'ImageTrail' is a class designed to manage and animate a sequence of images, reacting to mouse movements.
import { ImageTrail } from './imageTrail.js';
// Preload all images
preloadImages('.content__img-inner').then(() => {
// Once all images are preloaded, remove the 'loading' class from the body element.
document.body.classList.remove('loading');
// Instantiate a new ImageTrail object, initializing it with the element that has the class 'content'.
// The ImageTrail instance starts managing and animating the sequence of images within the specified element, reacting to mouse movements.
new ImageTrail(document.querySelector('.content'));
});
js/demo5/imageTrail.js
// Importing utility functions from 'utils.js'
import { getPointerPos, getMouseDistance, lerp } from '../utils.js';
import { Image } from '../image.js';
// Initial declaration of mouse position variables with default values
let mousePos, lastMousePos, cacheMousePos;
mousePos = {x: 0, y: 0}; // current mouse position
cacheMousePos = {...mousePos}; // previous mouse position
lastMousePos = {...mousePos}; // stores the position of the mouse at the time the most recent image was displayed, serving as a reference point for calculating the distance the cursor has moved in subsequent frames
// This function will be used to handle both mouse and touch events
const handlePointerMove = (ev) => {
// If it's a touch event, we'll use the first touch point
if (ev.touches) {
mousePos = getPointerPos(ev.touches[0]);
} else {
// If it's a mouse event, proceed as usual
mousePos = getPointerPos(ev);
}
};
// Adding an event listener to the window to update mouse position on mousemove event
window.addEventListener('mousemove', handlePointerMove);
window.addEventListener('touchmove', handlePointerMove);
export class ImageTrail {
// Class properties initialization
DOM = {el: null}; // Object to hold DOM elements
images = []; // Array to store Image objects
imagesTotal = 0; // Variable to store total number of images
imgPosition = 0; // Variable to store the position of the upcoming image
zIndexVal = 1; // z-index value for the upcoming image
activeImagesCount = 0; // Counter for active images
isIdle = true; // Flag to check if all images are inactive
lastAngle = 0; // track last image's angle
// Mouse distance from the previous trigger, required to show the next image
threshold = 80;
/**
* Constructor for the ImageTrail class.
* Initializes the instance, sets up the DOM elements, creates Image objects for each image element, and starts the rendering loop.
* @param {HTMLElement} DOM_el - The parent DOM element containing all image elements.
*/
constructor(DOM_el) {
// Store the reference to the parent DOM element.
this.DOM.el = DOM_el;
// Create and store Image objects for each image element found within the parent DOM element.
this.images = [...this.DOM.el.querySelectorAll('.content__img')].map(img => new Image(img));
// Store the total number of images.
this.imagesTotal = this.images.length;
const onPointerMoveEv = () => {
// Initialize cacheMousePos with the current mousePos values.
// This is necessary to have a reference point for the initial mouse position.
cacheMousePos = {...mousePos};
// Initiate the rendering loop.
requestAnimationFrame(() => this.render());
// Remove this mousemove event listener after it runs once to avoid reinitialization.
window.removeEventListener('mousemove', onPointerMoveEv);
window.removeEventListener('touchmove', onPointerMoveEv);
};
// Set up an initial mousemove event listener to run onMouseMoveEv once.
window.addEventListener('mousemove', onPointerMoveEv);
window.addEventListener('touchmove', onPointerMoveEv);
}
/**
* The `render` function is the main rendering loop for the `ImageTrail` class, updating images based on mouse movement.
* It calculates the distance between the current and the last mouse position, then decides whether to show the next image.
* @returns {void}
*/
render() {
// Calculate distance between current mouse position and last recorded mouse position.
let distance = getMouseDistance(mousePos, lastMousePos);
// If the calculated distance is greater than the defined threshold, show the next image and update lastMousePos.
if ( distance > this.threshold ) {
this.showNextImage();
lastMousePos = mousePos;
}
// Smoothly interpolate between cached mouse position and current mouse position for smoother visual effects.
cacheMousePos.x = lerp(cacheMousePos.x || mousePos.x, mousePos.x, 0.1);
cacheMousePos.y = lerp(cacheMousePos.y || mousePos.y, mousePos.y, 0.1);
// If all images are inactive (isIdle is true) and zIndexVal is not 1, reset zIndexVal to avoid endless incrementation.
if ( this.isIdle && this.zIndexVal !== 1 ) {
this.zIndexVal = 1;
}
// Request the next animation frame, creating a recursive loop for continuous rendering.
requestAnimationFrame(() => this.render());
}
/**
* The `showNextImage` function is responsible for displaying, animating, and managing the next image in the sequence.
* It increments the zIndexVal, selects the next image, stops ongoing animations, and defines a series of GSAP animations.
* @returns {void}
*/
showNextImage() {
// Calculate the horizontal and vertical distances between the current and last mouse positions.
let dx = mousePos.x - cacheMousePos.x;
let dy = mousePos.y - cacheMousePos.y;
// Calculate angle in degrees
this.angle = Math.atan2(dy, dx) * (180 / Math.PI);
// Adjust angle here if necessary
if (this.angle < 0) {
this.angle += 360; // Normalize negative angles
}
// Optionally, adjust angles in specific quadrants if needed
if (this.angle > 90 && this.angle <= 270) {
this.angle += 180; // Flip the image if it is in the 2nd or 3rd quadrant
}
// Determine the movement direction
const isMovingClockwise = this.angle >= this.lastAngle;
// Store the current angle for the next mouse move event
this.lastAngle = this.angle;
// Adjust the startAngle based on movement direction
let startAngle = isMovingClockwise ? this.angle - 10 : this.angle + 10;
// Compute the Euclidean distance between the current and last mouse positions. This represents the direct line distance regardless of direction.
let distance = Math.sqrt(dx * dx + dy * dy); // Calculate the distance
// The next steps involve "normalizing" the distance vector. Normalization refers to adjusting the length of a vector to 1 while keeping its direction constant.
// This is especially useful for simplifying calculations when you're only interested in vector direction and not its magnitude.
// Check to avoid division by zero if the distance is not zero.
if (distance !== 0) {
dx /= distance; // Normalize the x component of the distance vector.
dy /= distance; // Normalize the y component of the distance vector.
}
// The x and y components are now parts of a unit vector in the direction of the mouse movement.
// However, we want the animation to be perceptible, so we scale the components by a factor.
// Here, the factor is calculated based on the original distance, dividing it by a constant to lessen the effect, to avoid overly rapid movement.
// Adjust the x and y components of the unit vector by scaling.
// The scaling factor is the original distance divided by 150, ensuring the movement is noticeable yet smooth.
dx *= distance/150; // Scale the normalized x component.
dy *= distance/150; // Scale the normalized y component.
// Increment zIndexVal for next image.
++this.zIndexVal;
// Select the next image in the sequence, or revert to the first image if at the end of the sequence.
this.imgPosition = this.imgPosition < this.imagesTotal-1 ? this.imgPosition+1 : 0;
// Retrieve the Image object for the selected position.
const img = this.images[this.imgPosition];
// Stop any ongoing GSAP animations on the target image element to prepare for new animations.
gsap.killTweensOf(img.DOM.el);
// Define GSAP timeline.
img.timeline = gsap.timeline({
onStart: () => this.onImageActivated(),
onComplete: () => this.onImageDeactivated()
})
.fromTo(img.DOM.el, {
opacity: 1,
filter: 'brightness(80%)',
scale: 0.1,
zIndex: this.zIndexVal,
x: cacheMousePos.x - img.rect.width/2 ,
y: cacheMousePos.y - img.rect.height/2,
rotation: startAngle
}, {
duration: 1,
ease: 'power2',
scale: 1,
filter: 'brightness(100%)',
x: mousePos.x - img.rect.width/2 + (dx*70),
y: mousePos.y - img.rect.height/2 + (dy*70),
rotation: this.lastAngle
}, 0)
// then make it disappear
.to(img.DOM.el, {
duration: 0.4,
ease: 'expo',
opacity: 0
}, 0.5)
.to(img.DOM.el, {
duration: 1.5,
ease: 'power4',
x: "+=" + (dx * 120), // Adjust the multiplier as needed
y: "+=" + (dy * 120), // Adjust the multiplier as needed
}, 0.05)
}
/**
* onImageActivated function is called when an image's activation (display) animation begins.
* It increments the activeImagesCount and sets isIdle flag to false.
* @returns {void}
*/
onImageActivated = () => {
// Increment the counter for active images.
this.activeImagesCount++;
// Set the isIdle flag to false as there's at least one active image.
this.isIdle = false;
}
/**
* onImageDeactivated function is called when an image's deactivation (disappearance) animation ends.
* It decrements the activeImagesCount and sets isIdle flag to true if no images are active.
* @returns {void}
*/
onImageDeactivated = () => {
// Decrement the counter for active images.
this.activeImagesCount--;
// If there are no active images, set the isIdle flag to true.
if (this.activeImagesCount === 0) {
this.isIdle = true;
}
}
}js/demo5/index.js
// 'preloadImages' is a utility function that handles the preloading of images to ensure they are fully loaded before being used.
import { preloadImages } from '../utils.js';
// 'ImageTrail' is a class designed to manage and animate a sequence of images, reacting to mouse movements.
import { ImageTrail } from './imageTrail.js';
// Preload all images
preloadImages('.content__img-inner').then(() => {
// Once all images are preloaded, remove the 'loading' class from the body element.
document.body.classList.remove('loading');
// Instantiate a new ImageTrail object, initializing it with the element that has the class 'content'.
// The ImageTrail instance starts managing and animating the sequence of images within the specified element, reacting to mouse movements.
new ImageTrail(document.querySelector('.content'));
});
js/demo6/imageTrail.js
// Importing utility functions from 'utils.js'
import { getPointerPos, getMouseDistance, lerp } from '../utils.js';
import { Image } from '../image.js';
// Initial declaration of mouse position variables with default values
let mousePos, lastMousePos, cacheMousePos;
mousePos = {x: 0, y: 0}; // current mouse position
cacheMousePos = {...mousePos}; // previous mouse position
lastMousePos = {...mousePos}; // stores the position of the mouse at the time the most recent image was displayed, serving as a reference point for calculating the distance the cursor has moved in subsequent frames
// This function will be used to handle both mouse and touch events
const handlePointerMove = (ev) => {
// If it's a touch event, we'll use the first touch point
if (ev.touches) {
mousePos = getPointerPos(ev.touches[0]);
} else {
// If it's a mouse event, proceed as usual
mousePos = getPointerPos(ev);
}
};
// Adding an event listener to the window to update mouse position on mousemove event
window.addEventListener('mousemove', handlePointerMove);
window.addEventListener('touchmove', handlePointerMove);
export class ImageTrail {
// Class properties initialization
DOM = {el: null}; // Object to hold DOM elements
images = []; // Array to store Image objects
imagesTotal = 0; // Variable to store total number of images
imgPosition = 0; // Variable to store the position of the upcoming image
zIndexVal = 1; // z-index value for the upcoming image
activeImagesCount = 0; // Counter for active images
isIdle = true; // Flag to check if all images are inactive
// Mouse distance from the previous trigger, required to show the next image
threshold = 80;
/**
* Constructor for the ImageTrail class.
* Initializes the instance, sets up the DOM elements, creates Image objects for each image element, and starts the rendering loop.
* @param {HTMLElement} DOM_el - The parent DOM element containing all image elements.
*/
constructor(DOM_el) {
// Store the reference to the parent DOM element.
this.DOM.el = DOM_el;
// Create and store Image objects for each image element found within the parent DOM element.
this.images = [...this.DOM.el.querySelectorAll('.content__img')].map(img => new Image(img));
// Store the total number of images.
this.imagesTotal = this.images.length;
const onPointerMoveEv = () => {
// Initialize cacheMousePos with the current mousePos values.
// This is necessary to have a reference point for the initial mouse position.
cacheMousePos = {...mousePos};
// Initiate the rendering loop.
requestAnimationFrame(() => this.render());
// Remove this mousemove event listener after it runs once to avoid reinitialization.
window.removeEventListener('mousemove', onPointerMoveEv);
window.removeEventListener('touchmove', onPointerMoveEv);
};
// Set up an initial mousemove event listener to run onMouseMoveEv once.
window.addEventListener('mousemove', onPointerMoveEv);
window.addEventListener('touchmove', onPointerMoveEv);
}
/**
* The `render` function is the main rendering loop for the `ImageTrail` class, updating images based on mouse movement.
* It calculates the distance between the current and the last mouse position, then decides whether to show the next image.
* @returns {void}
*/
render() {
// Calculate distance between current mouse position and last recorded mouse position.
let distance = getMouseDistance(mousePos, lastMousePos);
// Smoothly interpolate between cached mouse position and current mouse position for smoother visual effects.
cacheMousePos.x = lerp(cacheMousePos.x || mousePos.x, mousePos.x, 0.3);
cacheMousePos.y = lerp(cacheMousePos.y || mousePos.y, mousePos.y, 0.3);
// If the calculated distance is greater than the defined threshold, show the next image and update lastMousePos.
if ( distance > this.threshold ) {
this.showNextImage();
lastMousePos = mousePos;
}
// If all images are inactive (isIdle is true) and zIndexVal is not 1, reset zIndexVal to avoid endless incrementation.
if ( this.isIdle && this.zIndexVal !== 1 ) {
this.zIndexVal = 1;
}
// Request the next animation frame, creating a recursive loop for continuous rendering.
requestAnimationFrame(() => this.render());
}
/**
* Based on the speed of the mouse, calculates a size value within a specific range.
* The function maps the speed to a size multiplier, ensuring that higher speeds result in larger sizes.
* It uses a maximum speed threshold to normalize the size adjustment.
*
* @param {number} speed - The current speed of the mouse movement.
* @param {number} minSize - The minimum size limit for the transformation.
* @param {number} maxSize - The maximum size limit for the transformation.
* @returns {number} - The adjusted size value.
*/
mapSpeedToSize(speed, minSize, maxSize) {
const maxSpeed = 200;
return minSize + (maxSize - minSize) * Math.min(speed / maxSpeed, 1);
}
/**
* Determines the brightness level based on the mouse speed, staying within defined limits.
* The faster the mouse movement, the higher the brightness, with a maximum speed threshold for normalization.
*
* @param {number} speed - Current speed of the mouse movement.
* @param {number} minBrightness - Minimum brightness level allowed.
* @param {number} maxBrightness - Maximum brightness level allowed.
* @returns {number} - The calculated brightness level.
*/
mapSpeedToBrightness(speed, minBrightness, maxBrightness) {
const maxSpeed = 70;
return minBrightness + (maxBrightness - minBrightness) * Math.min(speed / maxSpeed, 1);
};
/**
* Adjusts the blur effect based on the current speed of the mouse, ensuring it remains within a specific range.
* Higher speeds result in more blur. A maximum speed threshold is used for normalization purposes.
*
* @param {number} speed - The current speed of the mouse movement.
* @param {number} minBlur - The minimum blur effect allowed.
* @param {number} maxBlur - The maximum blur effect allowed.
* @returns {number} - The computed blur value.
*/
mapSpeedToBlur(speed, minBlur, maxBlur) {
const maxSpeed = 90;
return minBlur + (maxBlur - minBlur) * Math.min(speed / maxSpeed, 1);
};
/**
* Modifies the grayscale level of an image based on the mouse's speed, within set minimum and maximum boundaries.
* Faster movements lead to higher grayscale levels. A maximum speed is defined to normalize the grayscale adjustment.
*
* @param {number} speed - The detected speed of the mouse movement.
* @param {number} minGrayscale - The lowest permissible grayscale level.
* @param {number} maxGrayscale - The highest permissible grayscale level.
* @returns {number} - The adjusted grayscale level.
*/
mapSpeedToGrayscale(speed, minGrayscale, maxGrayscale) {
const maxSpeed = 90;
return minGrayscale + (maxGrayscale - minGrayscale) * Math.min(speed / maxSpeed, 1);
};
/**
* The `showNextImage` function is responsible for displaying, animating, and managing the next image in the sequence.
* It increments the zIndexVal, selects the next image, stops ongoing animations, and defines a series of GSAP animations.
* @returns {void}
*/
showNextImage() {
// Calculate the horizontal and vertical distances between the current and last mouse positions.
let dx = mousePos.x - cacheMousePos.x;
let dy = mousePos.y - cacheMousePos.y;
// Compute the Euclidean distance between the current and last mouse positions. This represents the direct line distance regardless of direction.
let speed = Math.sqrt(dx * dx + dy * dy);
// Increment zIndexVal for next image.
++this.zIndexVal;
// Select the next image in the sequence, or revert to the first image if at the end of the sequence.
this.imgPosition = this.imgPosition < this.imagesTotal-1 ? this.imgPosition+1 : 0;
// Retrieve the Image object for the selected position.
const img = this.images[this.imgPosition];
let scaleFactor = this.mapSpeedToSize(speed, 0.3, 2); // Assuming min scale of 0.3 and max scale of 2
let brightnessValue = this.mapSpeedToBrightness(speed, 0, 1.3); // Assuming min brightness of 0 (0%) and max brightness of 1.3 (130%)
let blurValue = this.mapSpeedToBlur(speed, 20, 0);
let grayscaleValue = this.mapSpeedToGrayscale(speed, 600, 0);
// Stop any ongoing GSAP animations on the target image element to prepare for new animations.
gsap.killTweensOf(img.DOM.el);
// Define GSAP timeline.
img.timeline = gsap.timeline({
onStart: () => this.onImageActivated(),
onComplete: () => this.onImageDeactivated()
})
.fromTo(img.DOM.el, {
opacity: 1,
scale: 0,
zIndex: this.zIndexVal,
x: cacheMousePos.x - img.rect.width/2 ,
y: cacheMousePos.y - img.rect.height/2
}, {
duration: 0.8,
ease: 'power3',
scale: scaleFactor,
filter: `grayscale(${grayscaleValue*100}%) brightness(${brightnessValue*100}%) blur(${blurValue}px)`,
x: mousePos.x - img.rect.width/2,
y: mousePos.y - img.rect.height/2
}, 0)
/* Inner image */
.fromTo(img.DOM.inner, {
scale: 2
}, {
duration: 0.8,
ease: 'power3',
scale: 1
}, 0)
/* Inner image */
// then make it disappear
.to(img.DOM.el, {
duration: 0.4,
ease: 'power3.in',
opacity: 0,
scale: 0.2
}, 0.45);
}
/**
* onImageActivated function is called when an image's activation (display) animation begins.
* It increments the activeImagesCount and sets isIdle flag to false.
* @returns {void}
*/
onImageActivated = () => {
// Increment the counter for active images.
this.activeImagesCount++;
// Set the isIdle flag to false as there's at least one active image.
this.isIdle = false;
}
/**
* onImageDeactivated function is called when an image's deactivation (disappearance) animation ends.
* It decrements the activeImagesCount and sets isIdle flag to true if no images are active.
* @returns {void}
*/
onImageDeactivated = () => {
// Decrement the counter for active images.
this.activeImagesCount--;
// If there are no active images, set the isIdle flag to true.
if (this.activeImagesCount === 0) {
this.isIdle = true;
}
}
}js/demo6/index.js
// 'preloadImages' is a utility function that handles the preloading of images to ensure they are fully loaded before being used.
import { preloadImages } from '../utils.js';
// 'ImageTrail' is a class designed to manage and animate a sequence of images, reacting to mouse movements.
import { ImageTrail } from './imageTrail.js';
// Preload all images
preloadImages('.content__img-inner').then(() => {
// Once all images are preloaded, remove the 'loading' class from the body element.
document.body.classList.remove('loading');
// Instantiate a new ImageTrail object, initializing it with the element that has the class 'content'.
// The ImageTrail instance starts managing and animating the sequence of images within the specified element, reacting to mouse movements.
new ImageTrail(document.querySelector('.content'));
});
js/demo7/imageTrail.js
// Importing utility functions from 'utils.js'
import { getPointerPos, getMouseDistance, getNewPosition, lerp } from '../utils.js';
import { Image } from '../image.js';
// Initial declaration of mouse position variables with default values
let mousePos, lastMousePos, cacheMousePos;
mousePos = {x: 0, y: 0}; // current mouse position
cacheMousePos = {...mousePos}; // previous mouse position
lastMousePos = {...mousePos}; // stores the position of the mouse at the time the most recent image was displayed, serving as a reference point for calculating the distance the cursor has moved in subsequent frames
// This function will be used to handle both mouse and touch events
const handlePointerMove = (ev) => {
// If it's a touch event, we'll use the first touch point
if (ev.touches) {
mousePos = getPointerPos(ev.touches[0]);
} else {
// If it's a mouse event, proceed as usual
mousePos = getPointerPos(ev);
}
};
// Adding an event listener to the window to update mouse position on mousemove event
window.addEventListener('mousemove', handlePointerMove);
window.addEventListener('touchmove', handlePointerMove);
export class ImageTrail {
// Class properties initialization
DOM = {el: null}; // Object to hold DOM elements
images = []; // Array to store Image objects
imagesTotal = 0; // Variable to store total number of images
imgPosition = 0; // Variable to store the position of the upcoming image
zIndexVal = 1; // z-index value for the upcoming image
activeImagesCount = 0; // Counter for active images
isIdle = true; // Flag to check if all images are inactive
visibleImagesCount = 0;
// Mouse distance from the previous trigger, required to show the next image
threshold = 80;
// The total number of visible images
visibleImagesTotal = 9;
/**
* Constructor for the ImageTrail class.
* Initializes the instance, sets up the DOM elements, creates Image objects for each image element, and starts the rendering loop.
* @param {HTMLElement} DOM_el - The parent DOM element containing all image elements.
*/
constructor(DOM_el) {
// Store the reference to the parent DOM element.
this.DOM.el = DOM_el;
// Create and store Image objects for each image element found within the parent DOM element.
this.images = [...this.DOM.el.querySelectorAll('.content__img')].map(img => new Image(img));
// Store the total number of images.
this.imagesTotal = this.images.length;
// Restriction on maximum visible images
this.visibleImagesTotal = Math.min(this.visibleImagesTotal, this.imagesTotal-1)
const onPointerMoveEv = () => {
// Initialize cacheMousePos with the current mousePos values.
// This is necessary to have a reference point for the initial mouse position.
cacheMousePos = {...mousePos};
// Initiate the rendering loop.
requestAnimationFrame(() => this.render());
// Remove this mousemove event listener after it runs once to avoid reinitialization.
window.removeEventListener('mousemove', onPointerMoveEv);
window.removeEventListener('touchmove', onPointerMoveEv);
};
// Set up an initial mousemove event listener to run onMouseMoveEv once.
window.addEventListener('mousemove', onPointerMoveEv);
window.addEventListener('touchmove', onPointerMoveEv);
}
/**
* The `render` function is the main rendering loop for the `ImageTrail` class, updating images based on mouse movement.
* It calculates the distance between the current and the last mouse position, then decides whether to show the next image.
* @returns {void}
*/
render() {
// Calculate distance between current mouse position and last recorded mouse position.
let distance = getMouseDistance(mousePos, lastMousePos);
// Smoothly interpolate between cached mouse position and current mouse position for smoother visual effects.
cacheMousePos.x = lerp(cacheMousePos.x || mousePos.x, mousePos.x, 0.3);
cacheMousePos.y = lerp(cacheMousePos.y || mousePos.y, mousePos.y, 0.3);
// If the calculated distance is greater than the defined threshold, show the next image and update lastMousePos.
if ( distance > this.threshold ) {
this.showNextImage();
lastMousePos = mousePos;
}
// If all images are inactive (isIdle is true) and zIndexVal is not 1, reset zIndexVal to avoid endless incrementation.
if ( this.isIdle && this.zIndexVal !== 1 ) {
this.zIndexVal = 1;
}
// Request the next animation frame, creating a recursive loop for continuous rendering.
requestAnimationFrame(() => this.render());
}
/**
* The `showNextImage` function is responsible for displaying, animating, and managing the next image in the sequence.
* It increments the zIndexVal, selects the next image, stops ongoing animations, and defines a series of GSAP animations.
* @returns {void}
*/
showNextImage() {
// Increment zIndexVal for next image.
++this.zIndexVal;
// Select the next image in the sequence, or revert to the first image if at the end of the sequence.
this.imgPosition = this.imgPosition < this.imagesTotal-1 ? this.imgPosition+1 : 0;
// Retrieve the Image object for the selected position.
const img = this.images[this.imgPosition];
++this.visibleImagesCount;
// Stop any ongoing GSAP animations on the target image element to prepare for new animations.
gsap.killTweensOf(img.DOM.el);
// Random scale value
const scaleValue = gsap.utils.random(0.5, 1.6,);
img.timeline = gsap.timeline({
onStart: () => this.onImageActivated(),
onComplete: () => this.onImageDeactivated(),
})
.fromTo(img.DOM.el, {
scale: scaleValue - Math.max(gsap.utils.random(0.2,0.6), 0),
rotationZ: 0,
opacity: 1,
zIndex: this.zIndexVal,
x: cacheMousePos.x - img.rect.width/2 ,
y: cacheMousePos.y - img.rect.height/2
}, {
duration: 0.4,
ease: 'power3',
scale: scaleValue,
rotationZ: gsap.utils.random(-3, 3),
x: mousePos.x - img.rect.width/2,
y: mousePos.y - img.rect.height/2
}, 0);
// This block of code handles the situation where the number of images currently visible on the screen exceeds a predefined limit,
// which is set in [settings.visibleImagesTotal]. When there are too many images, it ensures that the oldest image (the "last in queue")
// is hidden to maintain the desired number of visible images.
// Check if the count of visible images has exceeded the specified limit.
if ( this.visibleImagesCount >= this.visibleImagesTotal ) {
// Calculate the position of the image that is last in the visibility queue.
// It's the oldest visible image and needs to be hidden next.
const lastInQueue = getNewPosition(this.imgPosition, this.visibleImagesTotal, this.images);
// Retrieve the Image object that needs to be hidden.
const img = this.images[lastInQueue];
// Animate the oldest visible image to gradually disappear, making room for new images in the scene.
gsap.to(img.DOM.el, {
duration: 0.4,
ease: 'power4',
opacity: 0,
scale: 1.3,
onComplete: () => {
if (this.activeImagesCount === 0) {
this.isIdle = true;
}
}
});
}
}
/**
* onImageActivated function is called when an image's activation (display) animation begins.
* It increments the activeImagesCount and sets isIdle flag to false.
* @returns {void}
*/
onImageActivated = () => {
// Increment the counter for active images.
this.activeImagesCount++;
// Set the isIdle flag to false as there's at least one active image.
this.isIdle = false;
}
/**
* onImageDeactivated function is called when an image's deactivation (disappearance) animation ends.
* It decrements the activeImagesCount and sets isIdle flag to true if no images are active.
* @returns {void}
*/
onImageDeactivated = () => {
// Decrement the counter for active images.
this.activeImagesCount--;
}
}js/demo7/index.js
// 'preloadImages' is a utility function that handles the preloading of images to ensure they are fully loaded before being used.
import { preloadImages } from '../utils.js';
// 'ImageTrail' is a class designed to manage and animate a sequence of images, reacting to mouse movements.
import { ImageTrail } from './imageTrail.js';
// Preload all images
preloadImages('.content__img-inner').then(() => {
// Once all images are preloaded, remove the 'loading' class from the body element.
document.body.classList.remove('loading');
// Instantiate a new ImageTrail object, initializing it with the element that has the class 'content'.
// The ImageTrail instance starts managing and animating the sequence of images within the specified element, reacting to mouse movements.
new ImageTrail(document.querySelector('.content'));
});
js/demo8/image.js
import { setClipPath} from '../utils.js';
export class Image {
// Class property initialization with default values.
// The DOM property holds references to the main and inner elements of the image component.
DOM = {
el: null, // Holds the reference to the main DOM element with class 'content__img'.
inner: null, // Holds the reference to the inner DOM element with class 'content__img-inner'.
clipInnerElements: null // Holds the references to the inner clip DOM elements with class 'content__img-inner'.
};
// Default style properties for the image, initialized with initial values.
defaultStyle = {
scale: 1, // Scale factor of the image, initialized to 1 (original size).
x: 0, // Horizontal position of the image, initialized to 0.
y: 0, // Vertical position of the image, initialized to 0.
opacity: 0 // Opacity of the image, initialized to 0 (completely transparent).
};
// Property to hold the animation timeline for the image.
timeline = null;
// Holds the bounding rectangle of the image element.
rect = null;
// Number of clip path inner elements (rows and columns)
clipRows = 3;
clipColumns = 3
clipCount = this.clipRows*this.clipColumns;
/**
* Constructor for the Image class. Initializes the instance, sets up DOM references, and binds events.
* @param {HTMLElement} DOM_el - The main DOM element for the image, expected to have a child with class 'content__img-inner'.
*/
constructor(DOM_el) {
// Assign the provided DOM element to the 'el' property of the 'DOM' object.
this.DOM.el = DOM_el;
// Find and assign the inner element (with class 'content__img-inner') to the 'inner' property of the 'DOM' object.
this.DOM.inner = this.DOM.el.querySelector('.content__img-inner');
// Create [this.clipCount] inner elements: Repeat the inner elements [this.clipCount] times
for (let i = 1; i < this.clipCount; ++i) {
let clonedDiv = this.DOM.inner.cloneNode(true);
this.DOM.el.appendChild(clonedDiv);
}
this.DOM.el.classList.add('content__img--clip');
this.DOM.clipInnerElements = this.DOM.el.children;
setClipPath(this.DOM.clipInnerElements, this.clipRows, this.clipColumns)
// Call the getRect method to calculate and store the size and position of the image element.
this.getRect();
// Call the initEvents method to set up event listeners for the image element.
this.initEvents();
}
/**
* The initEvents method sets up event handlers for the image element, particularly for the window resize event.
* @returns {void}
*/
initEvents() {
// Define the resize method to reset image styles and recalculate its size and position on window resize.
this.resize = () => {
// Reset the image styles to default values using GSAP.
gsap.set(this.DOM.el, this.defaultStyle);
// Recalculate and update the size and position of the image element.
this.getRect();
};
// Add a window resize event listener that calls the defined resize method to handle image adjustments on window resize.
window.addEventListener('resize', () => this.resize());
}
/**
* The getRect method calculates and stores the size and position of the image element in the 'rect' property.
* @returns {void}
*/
getRect() {
// Use the getBoundingClientRect method to calculate and assign the size and position of the image element to the 'rect' property.
this.rect = this.DOM.el.getBoundingClientRect();
}
}js/demo8/imageTrail.js
// Importing utility functions from 'utils.js'
import { getPointerPos, getMouseDistance, lerp } from '../utils.js';
import { Image } from './image.js';
// Initial declaration of mouse position variables with default values
let mousePos, lastMousePos, cacheMousePos;
mousePos = {x: 0, y: 0}; // current mouse position
cacheMousePos = {...mousePos}; // previous mouse position
lastMousePos = {...mousePos}; // stores the position of the mouse at the time the most recent image was displayed, serving as a reference point for calculating the distance the cursor has moved in subsequent frames
// This function will be used to handle both mouse and touch events
const handlePointerMove = (ev) => {
// If it's a touch event, we'll use the first touch point
if (ev.touches) {
mousePos = getPointerPos(ev.touches[0]);
} else {
// If it's a mouse event, proceed as usual
mousePos = getPointerPos(ev);
}
};
// Adding an event listener to the window to update mouse position on mousemove event
window.addEventListener('mousemove', handlePointerMove);
window.addEventListener('touchmove', handlePointerMove);
export class ImageTrail {
// Class properties initialization
DOM = {el: null}; // Object to hold DOM elements
images = []; // Array to store Image objects
imagesTotal = 0; // Variable to store total number of images
imgPosition = 0; // Variable to store the position of the upcoming image
zIndexVal = 1; // z-index value for the upcoming image
activeImagesCount = 0; // Counter for active images
isIdle = true; // Flag to check if all images are inactive
// Mouse distance from the previous trigger, required to show the next image
threshold = 80;
/**
* Constructor for the ImageTrail class.
* Initializes the instance, sets up the DOM elements, creates Image objects for each image element, and starts the rendering loop.
* @param {HTMLElement} DOM_el - The parent DOM element containing all image elements.
*/
constructor(DOM_el) {
// Store the reference to the parent DOM element.
this.DOM.el = DOM_el;
// Create and store Image objects for each image element found within the parent DOM element.
this.images = [...this.DOM.el.querySelectorAll('.content__img')].map(img => new Image(img));
// Store the total number of images.
this.imagesTotal = this.images.length;
const onPointerMoveEv = () => {
// Initialize cacheMousePos with the current mousePos values.
// This is necessary to have a reference point for the initial mouse position.
cacheMousePos = {...mousePos};
// Initiate the rendering loop.
requestAnimationFrame(() => this.render());
// Remove this mousemove event listener after it runs once to avoid reinitialization.
window.removeEventListener('mousemove', onPointerMoveEv);
window.removeEventListener('touchmove', onPointerMoveEv);
};
// Set up an initial mousemove event listener to run onMouseMoveEv once.
window.addEventListener('mousemove', onPointerMoveEv);
window.addEventListener('touchmove', onPointerMoveEv);
}
/**
* The `render` function is the main rendering loop for the `ImageTrail` class, updating images based on mouse movement.
* It calculates the distance between the current and the last mouse position, then decides whether to show the next image.
* @returns {void}
*/
render() {
// Calculate distance between current mouse position and last recorded mouse position.
let distance = getMouseDistance(mousePos, lastMousePos);
// Smoothly interpolate between cached mouse position and current mouse position for smoother visual effects.
cacheMousePos.x = lerp(cacheMousePos.x || mousePos.x, mousePos.x, 0.3);
cacheMousePos.y = lerp(cacheMousePos.y || mousePos.y, mousePos.y, 0.3);
// If the calculated distance is greater than the defined threshold, show the next image and update lastMousePos.
if ( distance > this.threshold ) {
this.showNextImage();
lastMousePos = mousePos;
}
// If all images are inactive (isIdle is true) and zIndexVal is not 1, reset zIndexVal to avoid endless incrementation.
if ( this.isIdle && this.zIndexVal !== 1 ) {
this.zIndexVal = 1;
}
// Request the next animation frame, creating a recursive loop for continuous rendering.
requestAnimationFrame(() => this.render());
}
/**
* The `showNextImage` function is responsible for displaying, animating, and managing the next image in the sequence.
* It increments the zIndexVal, selects the next image, stops ongoing animations, and defines a series of GSAP animations.
* @returns {void}
*/
showNextImage() {
// Increment zIndexVal for next image.
++this.zIndexVal;
// Select the next image in the sequence, or revert to the first image if at the end of the sequence.
this.imgPosition = this.imgPosition < this.imagesTotal-1 ? this.imgPosition+1 : 0;
// Retrieve the Image object for the selected position.
const img = this.images[this.imgPosition];
// Stop any ongoing GSAP animations on the target image element to prepare for new animations.
gsap.killTweensOf(img.DOM.clipInnerElements);
// Define GSAP timeline.
img.timeline = gsap.timeline({
onStart: () => this.onImageActivated(),
onComplete: () => this.onImageDeactivated()
})
.set(img.DOM.el, {
opacity: 1,
zIndex: this.zIndexVal,
x: mousePos.x - img.rect.width/2,
y: mousePos.y - img.rect.height/2,
}, 0)
.set(img.DOM.clipInnerElements, {
x: 0,
y: 0,
scale: 1,
opacity: 1
}, 0)
.to(img.DOM.clipInnerElements, {
duration: 0.3,
ease: 'power3',
x: () => gsap.utils.random(-20,20),
y: () => gsap.utils.random(-20,20),
opacity: 0,
scale: () => gsap.utils.random(0.7,1),
stagger: {
each: 0.01,
from: 'random'
},
onComplete: () => {
gsap.set(img.DOM.el, {
opacity: 0
})
}
}, 0.05)
}
/**
* onImageActivated function is called when an image's activation (display) animation begins.
* It increments the activeImagesCount and sets isIdle flag to false.
* @returns {void}
*/
onImageActivated = () => {
// Increment the counter for active images.
this.activeImagesCount++;
// Set the isIdle flag to false as there's at least one active image.
this.isIdle = false;
}
/**
* onImageDeactivated function is called when an image's deactivation (disappearance) animation ends.
* It decrements the activeImagesCount and sets isIdle flag to true if no images are active.
* @returns {void}
*/
onImageDeactivated = () => {
// Decrement the counter for active images.
this.activeImagesCount--;
// If there are no active images, set the isIdle flag to true.
if (this.activeImagesCount === 0) {
this.isIdle = true;
}
}
}js/demo8/index.js
// 'preloadImages' is a utility function that handles the preloading of images to ensure they are fully loaded before being used.
import { preloadImages } from '../utils.js';
// 'ImageTrail' is a class designed to manage and animate a sequence of images, reacting to mouse movements.
import { ImageTrail } from './imageTrail.js';
// Preload all images
preloadImages('.content__img-inner').then(() => {
// Once all images are preloaded, remove the 'loading' class from the body element.
document.body.classList.remove('loading');
// Instantiate a new ImageTrail object, initializing it with the element that has the class 'content'.
// The ImageTrail instance starts managing and animating the sequence of images within the specified element, reacting to mouse movements.
new ImageTrail(document.querySelector('.content'));
});
js/demo9/imageTrail.js
// Importing utility functions from 'utils.js'
import { getPointerPos, getMouseDistance, lerp } from '../utils.js';
import { Image } from '../image.js';
// Initial declaration of mouse position variables with default values
let mousePos, lastMousePos, cacheMousePos;
mousePos = {x: 0, y: 0}; // current mouse position
cacheMousePos = {...mousePos}; // previous mouse position
lastMousePos = {...mousePos}; // stores the position of the mouse at the time the most recent image was displayed, serving as a reference point for calculating the distance the cursor has moved in subsequent frames
// This function will be used to handle both mouse and touch events
const handlePointerMove = (ev) => {
// If it's a touch event, we'll use the first touch point
if (ev.touches) {
mousePos = getPointerPos(ev.touches[0]);
} else {
// If it's a mouse event, proceed as usual
mousePos = getPointerPos(ev);
}
};
// Adding an event listener to the window to update mouse position on mousemove event
window.addEventListener('mousemove', handlePointerMove);
window.addEventListener('touchmove', handlePointerMove);
let winsize = {width: window.innerWidth, height: window.innerHeight};
window.addEventListener('resize', () => {
winsize = {width: window.innerWidth, height: window.innerHeight};
});
export class ImageTrail {
// Class properties initialization
DOM = {el: null}; // Object to hold DOM elements
images = []; // Array to store Image objects
imagesTotal = 0; // Variable to store total number of images
imgPosition = 0; // Variable to store the position of the upcoming image
zIndexVal = 1; // z-index value for the upcoming image
activeImagesCount = 0; // Counter for active images
isIdle = true; // Flag to check if all images are inactive
// Mouse distance from the previous trigger, required to show the next image
threshold = 80;
// Rotation and transform (z) values and cached values
rotation = {x: 0, y: 0};
cachedRotation = {...this.rotation};
zValue = 0;
cachedZValue = 0;
/**
* Constructor for the ImageTrail class.
* Initializes the instance, sets up the DOM elements, creates Image objects for each image element, and starts the rendering loop.
* @param {HTMLElement} DOM_el - The parent DOM element containing all image elements.
*/
constructor(DOM_el) {
// Store the reference to the parent DOM element.
this.DOM.el = DOM_el;
// Create and store Image objects for each image element found within the parent DOM element.
this.images = [...this.DOM.el.querySelectorAll('.content__img')].map(img => new Image(img));
// Store the total number of images.
this.imagesTotal = this.images.length;
const onPointerMoveEv = () => {
// Initialize cacheMousePos with the current mousePos values.
// This is necessary to have a reference point for the initial mouse position.
cacheMousePos = {...mousePos};
// Initiate the rendering loop.
requestAnimationFrame(() => this.render());
// Remove this mousemove event listener after it runs once to avoid reinitialization.
window.removeEventListener('mousemove', onPointerMoveEv);
window.removeEventListener('touchmove', onPointerMoveEv);
};
// Set up an initial mousemove event listener to run onMouseMoveEv once.
window.addEventListener('mousemove', onPointerMoveEv);
window.addEventListener('touchmove', onPointerMoveEv);
}
/**
* The `render` function is the main rendering loop for the `ImageTrail` class, updating images based on mouse movement.
* It calculates the distance between the current and the last mouse position, then decides whether to show the next image.
* @returns {void}
*/
render() {
// Calculate distance between current mouse position and last recorded mouse position.
let distance = getMouseDistance(mousePos, lastMousePos);
// Smoothly interpolate between cached mouse position and current mouse position for smoother visual effects.
cacheMousePos.x = lerp(cacheMousePos.x || mousePos.x, mousePos.x, 0.1);
cacheMousePos.y = lerp(cacheMousePos.y || mousePos.y, mousePos.y, 0.1);
// If the calculated distance is greater than the defined threshold, show the next image and update lastMousePos.
if ( distance > this.threshold ) {
this.showNextImage();
lastMousePos = mousePos;
}
// If all images are inactive (isIdle is true) and zIndexVal is not 1, reset zIndexVal to avoid endless incrementation.
if ( this.isIdle && this.zIndexVal !== 1 ) {
this.zIndexVal = 1;
}
// Request the next animation frame, creating a recursive loop for continuous rendering.
requestAnimationFrame(() => this.render());
}
/**
* The `showNextImage` function is responsible for displaying, animating, and managing the next image in the sequence.
* It increments the zIndexVal, selects the next image, stops ongoing animations, and defines a series of GSAP animations.
* @returns {void}
*/
showNextImage() {
// Get the window's center coordinates
const centerX = winsize.width / 2;
const centerY = winsize.height / 2;
// Calculate the mouse position relative to the center of the window
const relX = mousePos.x - centerX;
const relY = mousePos.y - centerY;
// Convert these distances into rotation values (these constants can be adjusted)
// Here we're saying the full width/height of the window corresponds to a 30 degree rotation
this.rotation.x = -(relY / centerY) * 30;
this.rotation.y = (relX / centerX) * 30;
// Cache these values
this.cachedRotation = { ...this.rotation };
// Calculate the distance of the mouse from the center.
const distanceFromCenter = Math.sqrt(relX * relX + relY * relY);
// Assuming the maximum distance is the diagonal of the screen.
const maxDistance = Math.sqrt(centerX * centerX + centerY * centerY);
// Calculate the proportion of the distance to the maximum possible (which is the diagonal).
const proportion = distanceFromCenter / maxDistance;
// Map this to the Z-axis range (-600 to 600). The overall range is 1200.
this.zValue = proportion * 1200 - 600;
// Cache this value
this.cachedZValue = this.zValue;
// Now, calculate brightness based on z-value. Assume the brightness should be between 0.5 and 1.5 for effect.
// Normalize the zValue from range -600 to 600 to a range of 0.5 to 1.5 for brightness.
// As the zValue increases, the brightness increases, meaning the object is closer and thus brighter.
const normalizedZ = (this.zValue + 600) / 1200; // This will convert the range from -600 - 600 to 0 - 1.
const brightness = 0.2 + (normalizedZ * 2.3); // This will map the 0 - 1 range into 0.5 - 2.5 (adjust if necessary).
// Increment zIndexVal for next image.
++this.zIndexVal;
// Select the next image in the sequence, or revert to the first image if at the end of the sequence.
this.imgPosition = this.imgPosition < this.imagesTotal-1 ? this.imgPosition+1 : 0;
// Retrieve the Image object for the selected position.
const img = this.images[this.imgPosition];
// Stop any ongoing GSAP animations on the target image element to prepare for new animations.
gsap.killTweensOf(img.DOM.el);
// Define GSAP timeline.
img.timeline = gsap.timeline({
onStart: () => this.onImageActivated(),
onComplete: () => this.onImageDeactivated()
})
.set(this.DOM.el, {
perspective: 1000
}, 0)
.fromTo(img.DOM.el, {
opacity: 1,
z: 0,
scale: 1 + (this.cachedZValue / 1000),
zIndex: this.zIndexVal,
x: cacheMousePos.x - img.rect.width/2 ,
y: cacheMousePos.y - img.rect.height/2,
rotationX: this.cachedRotation.x,
rotationY: this.cachedRotation.y,
filter: `brightness(${brightness})`
}, {
duration: 1,
ease: 'expo',
scale: 1 + (this.zValue / 1000),
x: mousePos.x - img.rect.width/2,
y: mousePos.y - img.rect.height/2,
rotationX: this.rotation.x,
rotationY: this.rotation.y,
}, 0)
// then make it disappear
.to(img.DOM.el, {
duration: 0.4,
ease: 'power2',
opacity: 0,
z: -800
}, 0.3)
}
/**
* onImageActivated function is called when an image's activation (display) animation begins.
* It increments the activeImagesCount and sets isIdle flag to false.
* @returns {void}
*/
onImageActivated = () => {
// Increment the counter for active images.
this.activeImagesCount++;
// Set the isIdle flag to false as there's at least one active image.
this.isIdle = false;
}
/**
* onImageDeactivated function is called when an image's deactivation (disappearance) animation ends.
* It decrements the activeImagesCount and sets isIdle flag to true if no images are active.
* @returns {void}
*/
onImageDeactivated = () => {
// Decrement the counter for active images.
this.activeImagesCount--;
// If there are no active images, set the isIdle flag to true.
if (this.activeImagesCount === 0) {
this.isIdle = true;
}
}
}js/demo9/index.js
// 'preloadImages' is a utility function that handles the preloading of images to ensure they are fully loaded before being used.
import { preloadImages } from '../utils.js';
// 'ImageTrail' is a class designed to manage and animate a sequence of images, reacting to mouse movements.
import { ImageTrail } from './imageTrail.js';
// Preload all images
preloadImages('.content__img-inner').then(() => {
// Once all images are preloaded, remove the 'loading' class from the body element.
document.body.classList.remove('loading');
// Instantiate a new ImageTrail object, initializing it with the element that has the class 'content'.
// The ImageTrail instance starts managing and animating the sequence of images within the specified element, reacting to mouse movements.
new ImageTrail(document.querySelector('.content'));
});
js/gsap.min.js
/*!
* GSAP 3.12.2
* https://greensock.com
*
* @license Copyright 2023, GreenSock. All rights reserved.
* Subject to the terms at https://greensock.com/standard-license or for Club GreenSock members, the agreement issued with that membership.
* @author: Jack Doyle, jack@greensock.com
*/
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).window=t.window||{})}(this,function(e){"use strict";function _inheritsLoose(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function r(t){return"string"==typeof t}function s(t){return"function"==typeof t}function t(t){return"number"==typeof t}function u(t){return void 0===t}function v(t){return"object"==typeof t}function w(t){return!1!==t}function x(){return"undefined"!=typeof window}function y(t){return s(t)||r(t)}function P(t){return(i=yt(t,ot))&&Ee}function Q(t,e){return console.warn("Invalid property",t,"set to",e,"Missing plugin? gsap.registerPlugin()")}function R(t,e){return!e&&console.warn(t)}function S(t,e){return t&&(ot[t]=e)&&i&&(i[t]=e)||ot}function T(){return 0}function ea(t){var e,r,i=t[0];if(v(i)||s(i)||(t=[t]),!(e=(i._gsap||{}).harness)){for(r=gt.length;r--&&!gt[r].targetTest(i););e=gt[r]}for(r=t.length;r--;)t[r]&&(t[r]._gsap||(t[r]._gsap=new Vt(t[r],e)))||t.splice(r,1);return t}function fa(t){return t._gsap||ea(Ot(t))[0]._gsap}function ga(t,e,r){return(r=t[e])&&s(r)?t[e]():u(r)&&t.getAttribute&&t.getAttribute(e)||r}function ha(t,e){return(t=t.split(",")).forEach(e)||t}function ia(t){return Math.round(1e5*t)/1e5||0}function ja(t){return Math.round(1e7*t)/1e7||0}function ka(t,e){var r=e.charAt(0),i=parseFloat(e.substr(2));return t=parseFloat(t),"+"===r?t+i:"-"===r?t-i:"*"===r?t*i:t/i}function la(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++i<r;);return i<r}function ma(){var t,e,r=ct.length,i=ct.slice(0);for(dt={},t=ct.length=0;t<r;t++)(e=i[t])&&e._lazy&&(e.render(e._lazy[0],e._lazy[1],!0)._lazy=0)}function na(t,e,r,i){ct.length&&!L&&ma(),t.render(e,r,i||L&&e<0&&(t._initted||t._startAt)),ct.length&&!L&&ma()}function oa(t){var e=parseFloat(t);return(e||0===e)&&(t+"").match(at).length<2?e:r(t)?t.trim():t}function pa(t){return t}function qa(t,e){for(var r in e)r in t||(t[r]=e[r]);return t}function ta(t,e){for(var r in e)"__proto__"!==r&&"constructor"!==r&&"prototype"!==r&&(t[r]=v(e[r])?ta(t[r]||(t[r]={}),e[r]):e[r]);return t}function ua(t,e){var r,i={};for(r in t)r in e||(i[r]=t[r]);return i}function va(t){var e=t.parent||I,r=t.keyframes?function _setKeyframeDefaults(i){return function(t,e){for(var r in e)r in t||"duration"===r&&i||"ease"===r||(t[r]=e[r])}}($(t.keyframes)):qa;if(w(t.inherit))for(;e;)r(t,e.vars.defaults),e=e.parent||e._dp;return t}function xa(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 ya(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 za(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove&&t.parent.remove(t),t._act=0}function Aa(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 Ca(t,e,r,i){return t._startAt&&(L?t._startAt.revert(ht):t.vars.immediateRender&&!t.vars.autoRevert||t._startAt.render(e,!0,i))}function Ea(t){return t._repeat?Tt(t._tTime,t=t.duration()+t._rDelay)*t:0}function Ga(t,e){return(t-e._start)*e._ts+(0<=e._ts?0:e._dirty?e.totalDuration():e._tDur)}function Ha(t){return t._end=ja(t._start+(t._tDur/Math.abs(t._ts||t._rts||X)||0))}function Ia(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=ja(r._time-(0<t._ts?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Ha(t),r._dirty||Aa(r,t)),t}function Ja(t,e){var r;if((e._time||!e._dur&&e._initted||e._start<t._time&&(e._dur||!e.add))&&(r=Ga(t.rawTime(),e),(!e._dur||kt(0,e.totalDuration(),r)-e._tTime>X)&&e.render(r,!0)),Aa(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=-X}}function Ka(e,r,i,n){return r.parent&&za(r),r._start=ja((t(i)?i:i||e!==I?xt(e,i,r):e._time)+r._delay),r._end=ja(r._start+(r.totalDuration()/Math.abs(r.timeScale())||0)),xa(e,r,"_first","_last",e._sort?"_start":0),bt(r)||(e._recent=r),n||Ja(e,r),e._ts<0&&Ia(e,e._tTime),e}function La(t,e){return(ot.ScrollTrigger||Q("scrollTrigger",e))&&ot.ScrollTrigger.create(e,t)}function Ma(t,e,r,i,n){return Gt(t,e,n),t._initted?!r&&t._pt&&!L&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&f!==Rt.frame?(ct.push(t),t._lazy=[n,i],1):void 0:1}function Ra(t,e,r,i){var n=t._repeat,a=ja(e)||0,s=t._tTime/t._tDur;return s&&!i&&(t._time*=a/t._dur),t._dur=a,t._tDur=n?n<0?1e10:ja(a*(n+1)+t._rDelay*n):a,0<s&&!i&&Ia(t,t._tTime=t._tDur*s),t.parent&&Ha(t),r||Aa(t.parent,t),t}function Sa(t){return t instanceof Xt?Aa(t):Ra(t,t._dur)}function Va(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 Zt(r[0],u,r[1+o])}function Wa(t,e){return t||0===t?e(t):e}function Ya(t,e){return r(t)&&(e=st.exec(t))?e[1]:""}function _a(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 cb(r){return r=Ot(r)[0]||R("Invalid scope")||{},function(t){var e=r.current||r.nativeElement||r;return Ot(t,e.querySelectorAll?e:e===r?R("Invalid scope")||a.createElement("div"):r)}}function db(t){return t.sort(function(){return.5-Math.random()})}function eb(t){if(s(t))return t;var p=v(t)?t:{each:t},_=jt(p.ease),m=p.from||0,g=parseFloat(p.base)||0,y={},e=0<m&&m<1,T=isNaN(m)||e,b=p.axis,w=m,x=m;return r(m)?w=x={center:.5,edges:.5,end:1}[m]||0:!e&&T&&(w=m[0],x=m[1]),function(t,e,r){var i,n,a,s,o,u,h,l,f,c=(r||p).length,d=y[c];if(!d){if(!(f="auto"===p.grid?0:(p.grid||[1,U])[1])){for(h=-U;h<(h=r[f++].getBoundingClientRect().left)&&f<c;);f--}for(d=y[c]=[],i=T?Math.min(f,c)*w-.5:m%f,n=f===U?0:T?c*x/f-.5:m/f|0,l=U,u=h=0;u<c;u++)a=u%f-i,s=n-(u/f|0),d[u]=o=b?Math.abs("y"===b?s:a):K(a*a+s*s),h<o&&(h=o),o<l&&(l=o);"random"===m&&db(d),d.max=h-l,d.min=l,d.v=c=(parseFloat(p.amount)||parseFloat(p.each)*(c<f?c-1:b?"y"===b?c/f:f:Math.max(f,c/f))||0)*("edges"===m?-1:1),d.b=c<0?g-c:g,d.u=Ya(p.amount||p.each)||0,_=_&&c<0?Yt(_):_}return c=(d[t]-d.min)/d.max||0,ja(d.b+(_?_(c):c)*d.v)+d.u}}function fb(i){var n=Math.pow(10,((i+"").split(".")[1]||"").length);return function(e){var r=ja(Math.round(parseFloat(e)/i)*i*n);return(r-r%1)/n+(t(e)?0:Ya(e))}}function gb(h,e){var l,f,r=$(h);return!r&&v(h)&&(l=r=h.radius||U,h.values?(h=Ot(h.values),(f=!t(h[0]))&&(l*=l)):h=fb(h.increment)),Wa(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=U,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+Ya(e)}:fb(h))}function hb(t,e,r,i){return Wa($(t)?!e:!0===r?!!(r=0):!i,function(){return $(t)?t[~~(Math.random()*t.length)]:(r=r||1e-5)&&(i=r<1?Math.pow(10,(r+"").length-2):1)&&Math.floor(Math.round((t-r/2+Math.random()*(e-t+.99*r))/r)*r*i)/i})}function lb(e,r,t){return Wa(t,function(t){return e[~~r(t)]})}function ob(t){for(var e,r,i,n,a=0,s="";~(e=t.indexOf("random(",a));)i=t.indexOf(")",e),n="["===t.charAt(e+7),r=t.substr(e+7,i-e-7).match(n?at:tt),s+=t.substr(a,e-a)+hb(n?r:+r[0],n?0:+r[1],+r[2]||1e-5),a=i+1;return s+t.substr(a,t.length-a)}function rb(t,e,r){var i,n,a,s=t.labels,o=U;for(i in s)(n=s[i]-e)<0==!!r&&n&&o>(n=Math.abs(n))&&(a=i,o=n);return a}function tb(t){return za(t),t.scrollTrigger&&t.scrollTrigger.kill(!!L),t.progress()<1&&At(t,"onInterrupt"),t}function wb(t){if(x()&&t){var e=(t=!t.name&&t.default||t).name,r=s(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:T,render:he,add:Qt,kill:ce,modifier:fe,rawVars:0},a={targetTest:0,get:0,getSetter:ne,aliases:{},register:0};if(Ft(),t!==i){if(pt[e])return;qa(i,qa(ua(t,n),a)),yt(i.prototype,yt(n,ua(t,a))),pt[i.prop=e]=i,t.targetTest&&(gt.push(i),ft[e]=1),e=("css"===e?"CSS":e.charAt(0).toUpperCase()+e.substr(1))+"Plugin"}S(e,i),t.register&&t.register(Ee,i,_e)}else t&&Ct.push(t)}function zb(t,e,r){return(6*(t+=t<0?1:1<t?-1:0)<1?e+(r-e)*t*6:t<.5?r:3*t<2?e+(r-e)*(2/3-t)*6:e)*St+.5|0}function Ab(e,r,i){var n,a,s,o,u,h,l,f,c,d,p=e?t(e)?[e>>16,e>>8&St,e&St]: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&St,p&St,parseInt(e.substr(7),16)/255];p=[(e=parseInt(e.substr(1),16))>>16,e>>8&St,e&St]}else if("hsl"===e.substr(0,3))if(p=d=e.match(tt),r){if(~e.indexOf("="))return p=e.match(et),i&&p.length<4&&(p[3]=1),p}else o=+p[0]%360/360,u=p[1]/100,n=2*(h=p[2]/100)-(a=h<=.5?h*(u+1):h+u-h*u),3<p.length&&(p[3]*=1),p[0]=zb(o+1/3,n,a),p[1]=zb(o,n,a),p[2]=zb(o-1/3,n,a);else p=e.match(tt)||Et.transparent;p=p.map(Number)}return r&&!d&&(n=p[0]/St,a=p[1]/St,s=p[2]/St,h=((l=Math.max(n,a,s))+(f=Math.min(n,a,s)))/2,l===f?o=u=0:(c=l-f,u=.5<h?c/(2-l-f):c/(l+f),o=l===n?(a-s)/c+(a<s?6:0):l===a?(s-n)/c+2:(n-a)/c+4,o*=60),p[0]=~~(o+.5),p[1]=~~(100*u+.5),p[2]=~~(100*h+.5)),i&&p.length<4&&(p[3]=1),p}function Bb(t){var r=[],i=[],n=-1;return t.split(Dt).forEach(function(t){var e=t.match(rt)||[];r.push.apply(r,e),i.push(n+=e.length+1)}),r.c=i,r}function Cb(t,e,r){var i,n,a,s,o="",u=(t+o).match(Dt),h=e?"hsla(":"rgba(",l=0;if(!u)return t;if(u=u.map(function(t){return(t=Ab(t,e,1))&&h+(e?t[0]+","+t[1]+"%,"+t[2]+"%,"+t[3]:t.join(","))+")"}),r&&(a=Bb(t),(i=r.c).join(o)!==a.c.join(o)))for(s=(n=t.replace(Dt,"1").split(rt)).length-1;l<s;l++)o+=n[l]+(~i.indexOf(l)?u.shift()||h+"0,0,0,0)":(a.length?a:u.length?u:r).shift());if(!n)for(s=(n=t.split(Dt)).length-1;l<s;l++)o+=n[l]+u[l];return o+n[s]}function Fb(t){var e,r=t.join(" ");if(Dt.lastIndex=0,Dt.test(r))return e=zt.test(r),t[1]=Cb(t[1],e),t[0]=Cb(t[0],e,Bb(t[1])),!0}function Ob(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(It,"").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(oa)):Bt._CE&&Lt.test(t)?Bt._CE("",t):r}function Qb(t,e){for(var r,i=t._first;i;)i instanceof Xt?Qb(i,e):!i.vars.yoyoEase||i._yoyo&&i._repeat||i._yoyo===e||(i.timeline?Qb(i.timeline,e):(r=i._ease,i._ease=i._yEase,i._yEase=r,i._yoyo=e)),i=i._next}function Sb(t,e,r,i){void 0===r&&(r=function easeOut(t){return 1-e(1-t)}),void 0===i&&(i=function easeInOut(t){return t<.5?e(2*t)/2:1-e(2*(1-t))/2});var n,a={easeIn:e,easeOut:r,easeInOut:i};return ha(t,function(t){for(var e in Bt[t]=ot[t]=a,Bt[n=t.toLowerCase()]=r,a)Bt[n+("easeIn"===e?".in":"easeOut"===e?".out":".inOut")]=Bt[t+"."+e]=a[e]}),a}function Tb(e){return function(t){return t<.5?(1-e(1-2*t))/2:.5+e(2*(t-.5))/2}}function Ub(r,t,e){function Jm(t){return 1===t?1:i*Math.pow(2,-10*t)*H((t-a)*n)+1}var i=1<=t?t:1,n=(e||(r?.3:.45))/(t<1?t:1),a=n/N*(Math.asin(1/i)||0),s="out"===r?Jm:"in"===r?function(t){return 1-Jm(1-t)}:Tb(Jm);return n=N/n,s.config=function(t,e){return Ub(r,t,e)},s}function Vb(e,r){function Rm(t){return t?--t*t*((r+1)*t+r)+1:0}void 0===r&&(r=1.70158);var t="out"===e?Rm:"in"===e?function(t){return 1-Rm(1-t)}:Tb(Rm);return t.config=function(t){return Vb(e,t)},t}var B,L,l,I,h,n,a,i,o,f,c,d,p,_,m,g,b,k,M,O,A,C,E,D,z,F,Y,j,q={autoSleep:120,force3D:"auto",nullTargetWarn:1,units:{lineHeight:""}},V={duration:.5,overwrite:!1,delay:0},U=1e8,X=1/U,N=2*Math.PI,W=N/4,G=0,K=Math.sqrt,J=Math.cos,H=Math.sin,Z="function"==typeof ArrayBuffer&&ArrayBuffer.isView||function(){},$=Array.isArray,tt=/(?:-?\.?\d|\.)+/gi,et=/[-+=.]*\d+[.e\-+]*\d*[e\-+]*\d*/g,rt=/[-+=.]*\d+[.e-]*\d*[a-z%]*/g,it=/[-+=.]*\d+\.?\d*(?:e-|e\+)?\d*/gi,nt=/[+-]=-?[.\d]+/,at=/[^,'"\[\]\s]+/gi,st=/^[+\-=e\s\d]*\d+[.\d]*([a-z]*|%)\s*$/i,ot={},ut={suppressEvents:!0,isStart:!0,kill:!1},ht={suppressEvents:!0,kill:!1},lt={suppressEvents:!0},ft={},ct=[],dt={},pt={},_t={},mt=30,gt=[],vt="",yt=function _merge(t,e){for(var r in e)t[r]=e[r];return t},Tt=function _animationCycle(t,e){var r=Math.floor(t/=e);return t&&r===t?r-1:r},bt=function _isFromOrFromStart(t){var e=t.data;return"isFromStart"===e||"isStart"===e},wt={_start:0,endTime:T,totalDuration:T},xt=function _parsePosition(t,e,i){var n,a,s,o=t.labels,u=t._recent||wt,h=t.duration()>=U?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},kt=function _clamp(t,e,r){return r<t?t:e<r?e:r},Mt=[].slice,Ot=function toArray(t,e,i){return l&&!e&&l.selector?l.selector(t):!r(t)||i||!n&&Ft()?$(t)?function _flatten(t,e,i){return void 0===i&&(i=[]),t.forEach(function(t){return r(t)&&!e||_a(t,1)?i.push.apply(i,Ot(t)):i.push(t)})||i}(t,i):_a(t)?Mt.call(t,0):t?[t]:[]:Mt.call((e||a).querySelectorAll(t),0)},Pt=function mapRange(e,t,r,i,n){var a=t-e,s=i-r;return Wa(n,function(t){return r+((t-e)/a*s||0)})},At=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&&ct.length&&ma(),h&&(l=h),a=i?o.apply(n,i):o.call(n),l=u,a},Ct=[],St=255,Et={aqua:[0,St,St],lime:[0,St,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,St],navy:[0,0,128],white:[St,St,St],olive:[128,128,0],yellow:[St,St,0],orange:[St,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[St,0,0],pink:[St,192,203],cyan:[0,St,St],transparent:[St,St,St,0]},Dt=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")}(),zt=/hsl[a]?\(/,Rt=(M=Date.now,O=500,A=33,C=M(),E=C,z=D=1e3/240,g={time:0,frame:0,tick:function tick(){yl(!0)},deltaRatio:function deltaRatio(t){return b/(1e3/(t||60))},wake:function wake(){o&&(!n&&x()&&(h=n=window,a=h.document||{},ot.gsap=Ee,(h.gsapVersions||(h.gsapVersions=[])).push(Ee.version),P(i||h.GreenSockGlobals||!h.gsap&&h||{}),m=h.requestAnimationFrame,Ct.forEach(wb)),p&&g.sleep(),_=m||function(t){return setTimeout(t,z-1e3*g.time+1|0)},d=1,yl(2))},sleep:function sleep(){(m?h.cancelAnimationFrame:clearTimeout)(p),d=0,_=T},lagSmoothing:function lagSmoothing(t,e){O=t||1/0,A=Math.min(e||33,O)},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),F[e?"unshift":"push"](a),Ft(),a},remove:function remove(t,e){~(e=F.indexOf(t))&&F.splice(e,1)&&e<=k&&k--},_listeners:F=[]}),Ft=function _wake(){return!d&&Rt.wake()},Bt={},Lt=/^[\d.\-M][\d.\-,\s]/,It=/["']/g,Yt=function _invertEase(e){return function(t){return 1-e(1-t)}},jt=function _parseEase(t,e){return t&&(s(t)?t:Bt[t]||Ob(t))||e};function yl(t){var e,r,i,n,a=M()-E,s=!0===t;if(O<a&&(C+=a-A),(0<(e=(i=(E+=a)-C)-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=_(yl)),r)for(k=0;k<F.length;k++)F[k](i,b,n,t)}function gn(t){return t<j?Y*t*t:t<.7272727272727273?Y*Math.pow(t-1.5/2.75,2)+.75:t<.9090909090909092?Y*(t-=2.25/2.75)*t+.9375:Y*Math.pow(t-2.625/2.75,2)+.984375}ha("Linear,Quad,Cubic,Quart,Quint,Strong",function(t,e){var r=e<5?e+1:e;Sb(t+",Power"+(r-1),e?function(t){return Math.pow(t,r)}:function(t){return t},function(t){return 1-Math.pow(1-t,r)},function(t){return t<.5?Math.pow(2*t,r)/2:1-Math.pow(2*(1-t),r)/2})}),Bt.Linear.easeNone=Bt.none=Bt.Linear.easeIn,Sb("Elastic",Ub("in"),Ub("out"),Ub()),Y=7.5625,j=1/2.75,Sb("Bounce",function(t){return 1-gn(1-t)},gn),Sb("Expo",function(t){return t?Math.pow(2,10*(t-1)):0}),Sb("Circ",function(t){return-(K(1-t*t)-1)}),Sb("Sine",function(t){return 1===t?1:1-J(t*W)}),Sb("Back",Vb("in"),Vb("out"),Vb()),Bt.SteppedEase=Bt.steps=ot.SteppedEase={config:function config(t,e){void 0===t&&(t=1);var r=1/t,i=t+(e?0:1),n=e?1:0;return function(t){return((i*kt(0,.99999999,t)|0)+n)*r}}},V.ease=Bt["quad.out"],ha("onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt",function(t){return vt+=t+","+t+"Params,"});var qt,Vt=function GSCache(t,e){this.id=G++,(t._gsap=this).target=t,this.harness=e,this.get=e?e.get:ga,this.set=e?e.getSetter:ne},Ut=((qt=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},qt.duration=function duration(t){return arguments.length?this.totalDuration(0<this._repeat?t+(t+this._rDelay)*this._repeat:t):this.totalDuration()&&this._dur},qt.totalDuration=function totalDuration(t){return arguments.length?(this._dirty=0,Ra(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},qt.totalTime=function totalTime(t,e){if(Ft(),!arguments.length)return this._tTime;var r=this._dp;if(r&&r.smoothChildTiming&&this._ts){for(Ia(this,t),!r._dp||r.parent||Ja(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)&&Ka(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&Math.abs(this._zTime)===X||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),na(this,t,e)),this},qt.time=function time(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+Ea(this))%(this._dur+this._rDelay)||(t?this._dur:0),e):this._time},qt.totalProgress=function totalProgress(t,e){return arguments.length?this.totalTime(this.totalDuration()*t,e):this.totalDuration()?Math.min(1,this._tTime/this._tDur):this.ratio},qt.progress=function progress(t,e){return arguments.length?this.totalTime(this.duration()*(!this._yoyo||1&this.iteration()?t:1-t)+Ea(this),e):this.duration()?Math.min(1,this._time/this._dur):this.ratio},qt.iteration=function iteration(t,e){var r=this.duration()+this._rDelay;return arguments.length?this.totalTime(this._time+(t-1)*r,e):this._repeat?Tt(this._tTime,r)+1:1},qt.timeScale=function timeScale(t){if(!arguments.length)return this._rts===-X?0:this._rts;if(this._rts===t)return this;var e=this.parent&&this._ts?Ga(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||t===-X?0:this._rts,this.totalTime(kt(-Math.abs(this._delay),this._tDur,e),!0),Ha(this),function _recacheAncestors(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t}(this)},qt.paused=function paused(t){return arguments.length?(this._ps!==t&&((this._ps=t)?(this._pTime=this._tTime||Math.max(-this._delay,this.rawTime()),this._ts=this._act=0):(Ft(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&Math.abs(this._zTime)!==X&&(this._tTime-=X)))),this):this._ps},qt.startTime=function startTime(t){if(arguments.length){this._start=t;var e=this.parent||this._dp;return!e||!e._sort&&this.parent||Ka(e,this,t-this._delay),this}return this._start},qt.endTime=function endTime(t){return this._start+(w(t)?this.totalDuration():this.duration())/Math.abs(this._ts||1)},qt.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?Ga(e.rawTime(t),this):this._tTime:this._tTime},qt.revert=function revert(t){void 0===t&&(t=lt);var e=L;return L=t,(this._initted||this._startAt)&&(this.timeline&&this.timeline.revert(t),this.totalTime(-.01,t.suppressEvents)),"nested"!==this.data&&!1!==t.kill&&this.kill(),L=e,this},qt.globalTime=function globalTime(t){for(var e=this,r=arguments.length?t:e.rawTime();e;)r=e._start+r/(e._ts||1),e=e._dp;return!this.parent&&this._sat?this._sat.vars.immediateRender?-1/0:this._sat.globalTime(t):r},qt.repeat=function repeat(t){return arguments.length?(this._repeat=t===1/0?-2:t,Sa(this)):-2===this._repeat?1/0:this._repeat},qt.repeatDelay=function repeatDelay(t){if(arguments.length){var e=this._time;return this._rDelay=t,Sa(this),e?this.time(e):this}return this._rDelay},qt.yoyo=function yoyo(t){return arguments.length?(this._yoyo=t,this):this._yoyo},qt.seek=function seek(t,e){return this.totalTime(xt(this,t),w(e))},qt.restart=function restart(t,e){return this.play().totalTime(t?-this._delay:0,w(e))},qt.play=function play(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},qt.reverse=function reverse(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},qt.pause=function pause(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},qt.resume=function resume(){return this.paused(!1)},qt.reversed=function reversed(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-X:0)),this):this._rts<0},qt.invalidate=function invalidate(){return this._initted=this._act=0,this._zTime=-X,this},qt.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)-X))},qt.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]},qt.then=function then(t){var i=this;return new Promise(function(e){function Bo(){var t=i.then;i.then=null,s(r)&&(r=r(i))&&(r.then||r===i)&&(i.then=t),e(r),i.then=t}var r=s(t)?t:pa;i._initted&&1===i.totalProgress()&&0<=i._ts||!i._tTime&&i._ts<0?Bo():i._prom=Bo})},qt.kill=function kill(){tb(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,Ra(this,+t.duration,1,1),this.data=t.data,l&&(this._ctx=l).data.push(this),d||Rt.wake()}qa(Ut.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:-X,_prom:0,_ps:!1,_rts:1});var Xt=function(i){function Timeline(t,e){var r;return void 0===t&&(t={}),(r=i.call(this,t)||this).labels={},r.smoothChildTiming=!!t.smoothChildTiming,r.autoRemoveChildren=!!t.autoRemoveChildren,r._sort=w(t.sortChildren),I&&Ka(t.parent||I,_assertThisInitialized(r),e),t.reversed&&r.reverse(),t.paused&&r.paused(!0),t.scrollTrigger&&La(_assertThisInitialized(r),t.scrollTrigger),r}_inheritsLoose(Timeline,i);var e=Timeline.prototype;return e.to=function to(t,e,r){return Va(0,arguments,this),this},e.from=function from(t,e,r){return Va(1,arguments,this),this},e.fromTo=function fromTo(t,e,r,i){return Va(2,arguments,this),this},e.set=function set(t,e,r){return e.duration=0,e.parent=this,va(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new Zt(t,e,xt(this,r),1),this},e.call=function call(t,e,r){return Ka(this,Zt.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 Zt(t,r,xt(this,n)),this},e.staggerFrom=function staggerFrom(t,e,r,i,n,a,s){return r.runBackwards=1,va(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,va(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,c,d,p,_=this._time,m=this._dirty?this.totalDuration():this._tDur,g=this._dur,v=t<=0?0:ja(t),y=this._zTime<0!=t<0&&(this._initted||!g);if(this!==I&&m<v&&0<=t&&(v=m),v!==this._tTime||r||y){if(_!==this._time&&g&&(v+=this._time-_,t+=this._time-_),i=v,f=this._start,u=!(l=this._ts),y&&(g||(_=this._zTime),!t&&e||(this._zTime=t)),this._repeat){if(d=this._yoyo,o=g+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*o+t,e,r);if(i=ja(v%o),v===m?(s=this._repeat,i=g):((s=~~(v/o))&&s===v/o&&(i=g,s--),g<i&&(i=g)),c=Tt(this._tTime,o),!_&&this._tTime&&c!==s&&this._tTime-c*o-this._dur<=0&&(c=s),d&&1&s&&(i=g-i,p=1),s!==c&&!this._lock){var T=d&&1&c,b=T===(d&&1&s);if(s<c&&(T=!T),_=T?0:v%g?g:v,this._lock=1,this.render(_||(p?0:ja(s*o)),e,!g)._lock=0,this._tTime=v,!e&&this.parent&&At(this,"onRepeat"),this.vars.repeatRefresh&&!p&&(this.invalidate()._lock=1),_&&_!==this._time||u!=!this._ts||this.vars.onRepeat&&!this.parent&&!this._act)return this;if(g=this._dur,m=this._tDur,b&&(this._lock=2,_=T?g:-1e-4,this.render(_,!0),this.vars.repeatRefresh&&!p&&this.invalidate()),this._lock=0,!this._ts&&!u)return this;Qb(this,p)}}if(this._hasPause&&!this._forcing&&this._lock<2&&(h=function _findNextPauseTween(t,e,r){var i;if(e<r)for(i=t._first;i&&i._start<=r;){if("isPause"===i.data&&i._start>e)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if("isPause"===i.data&&i._start<e)return i;i=i._prev}}(this,ja(_),ja(i)))&&(v-=i-(i=h._start)),this._tTime=v,this._time=i,this._act=!l,this._initted||(this._onUpdate=this.vars.onUpdate,this._initted=1,this._zTime=t,_=0),!_&&i&&!e&&!s&&(At(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=-X);break}}n=a}else{n=this._last;for(var w=t<0?t:i;n;){if(a=n._prev,(n._act||w<=n._end)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(w-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(w-n._start)*n._ts,e,r||L&&(n._initted||n._startAt)),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=w?-X:X);break}}n=a}}if(h&&!e&&(this.pause(),h.render(_<=i?0:-X)._zTime=_<=i?1:-1,this._ts))return this._start=f,Ha(this),this.render(t,e,r);this._onUpdate&&!e&&At(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)||za(this,1),e||t<0&&!_||!v&&!_&&m||(At(this,v===m&&0<=t?"onComplete":"onReverseComplete",!0),!this._prom||v<m&&0<this.timeScale()||this._prom())))}return this},e.add=function add(e,i){var n=this;if(t(i)||(i=xt(this,i,e)),!(e instanceof Ut)){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=Zt.delayedCall(0,e)}return this!==e?Ka(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=-U);for(var n=[],a=this._first;a;)a._start>=i&&(a instanceof Zt?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):(ya(this,t),t===this._recent&&(this._recent=this._last),Aa(this))},e.totalTime=function totalTime(t,e){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=ja(Rt.time-(0<this._ts?t/this._ts:(this.totalDuration()-t)/-this._ts))),i.prototype.totalTime.call(this,t,e),this._forcing=0,this):this._tTime},e.addLabel=function addLabel(t,e){return this.labels[t]=xt(this,e),this},e.removeLabel=function removeLabel(t){return delete this.labels[t],this},e.addPause=function addPause(t,e,r){var i=Zt.delayedCall(0,e||T,r);return i.data="isPause",this._hasPause=1,Ka(this,i,xt(this,t))},e.removePause=function removePause(t){var e=this._first;for(t=xt(this,t);e;)e._start===t&&"isPause"===e.data&&za(e),e=e._next},e.killTweensOf=function killTweensOf(t,e,r){for(var i=this.getTweensOf(t,r),n=i.length;n--;)Nt!==i[n]&&i[n].kill(t,e);return this},e.getTweensOf=function getTweensOf(e,r){for(var i,n=[],a=Ot(e),s=this._first,o=t(r);s;)s instanceof Zt?la(s._targets,a)&&(o?(!Nt||s._initted&&s._ts)&&s.globalTime(0)<=r&&s.globalTime(s.totalDuration())>r:!r||s.isActive())&&n.push(s):(i=s.getTweensOf(a,r)).length&&n.push.apply(n,i),s=s._next;return n},e.tweenTo=function tweenTo(t,e){e=e||{};var r,i=this,n=xt(i,t),a=e.startAt,s=e.onStart,o=e.onStartParams,u=e.immediateRender,h=Zt.to(i,qa({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())||X,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&&Ra(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,qa({startAt:{time:xt(this,t)}},r))},e.recent=function recent(){return this._recent},e.nextLabel=function nextLabel(t){return void 0===t&&(t=this._time),rb(this,xt(this,t))},e.previousLabel=function previousLabel(t){return void 0===t&&(t=this._time),rb(this,xt(this,t),1)},e.currentLabel=function currentLabel(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+X)},e.shiftChildren=function shiftChildren(t,e,r){void 0===r&&(r=0);for(var i,n=this._first,a=this.labels;n;)n._start>=r&&(n._start+=t,n._end+=t),n=n._next;if(e)for(i in a)a[i]>=r&&(a[i]+=t);return Aa(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={}),Aa(this)},e.totalDuration=function totalDuration(t){var e,r,i,n=0,a=this,s=a._last,o=U;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,Ka(a,s,r-s._delay,1)._lock=0):o=r,r<0&&s._ts&&(n-=r,(!i&&!a._dp||i&&i.smoothChildTiming)&&(a._start+=r/a._ts,a._time-=r,a._tTime-=r),a.shiftChildren(-r,!1,-Infinity),o=0),s._end>n&&s._ts&&(n=s._end),s=e;Ra(a,a===I&&a._time>n?a._time:n,1,1),a._dirty=0}return a._tDur},Timeline.updateRoot=function updateRoot(t){if(I._ts&&(na(I,Ga(t,I)),f=Rt.frame),Rt.frame>=mt){mt+=q.autoSleep||120;var e=I._first;if((!e||!e._ts)&&q.autoSleep&&Rt._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||Rt.sleep()}}},Timeline}(Ut);qa(Xt.prototype,{_lock:0,_hasPause:0,_forcing:0});function ac(t,e,i,n,a,o){var u,h,l,f;if(pt[t]&&!1!==(u=new pt[t]).init(a,u.rawVars?e[t]:function _processVars(t,e,i,n,a){if(s(t)&&(t=Kt(t,a,e,i,n)),!v(t)||t.style&&t.nodeType||$(t)||Z(t))return r(t)?Kt(t,a,e,i,n):t;var o,u={};for(o in t)u[o]=Kt(t[o],a,e,i,n);return u}(e[t],n,a,o,i),i,n,o)&&(i._pt=h=new _e(i._pt,a,t,0,1,u.render,u,0,u.priority),i!==c))for(l=i._ptLookup[i._targets.indexOf(a)],f=u._props.length;f--;)l[u._props[f]]=h;return u}function gc(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 Nt,Wt,Qt=function _addPropTween(t,e,i,n,a,o,u,h,l,f){s(n)&&(n=n(a||0,t,o));var c,d=t[e],p="get"!==i?i:s(d)?l?t[e.indexOf("set")||!s(t["get"+e.substr(3)])?e:"get"+e.substr(3)](l):t[e]():d,_=s(d)?l?re:te:$t;if(r(n)&&(~n.indexOf("random(")&&(n=ob(n)),"="===n.charAt(1)&&(!(c=ka(p,n)+(Ya(p)||0))&&0!==c||(n=c))),!f||p!==n||Wt)return isNaN(p*n)||""===n?(d||e in t||Q(e,n),function _addComplexStringPropTween(t,e,r,i,n,a,s){var o,u,h,l,f,c,d,p,_=new _e(this._pt,t,e,0,1,ue,null,n),m=0,g=0;for(_.b=r,_.e=i,r+="",(d=~(i+="").indexOf("random("))&&(i=ob(i)),a&&(a(p=[r,i],t,e),r=p[0],i=p[1]),u=r.match(it)||[];o=it.exec(i);)l=o[0],f=i.substring(m,o.index),h?h=(h+1)%5:"rgba("===f.substr(-5)&&(h=1),l!==u[g++]&&(c=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:",",s:c,c:"="===l.charAt(1)?ka(c,l)-c:parseFloat(l)-c,m:h&&h<4?Math.round:0},m=it.lastIndex);return _.c=m<i.length?i.substring(m,i.length):"",_.fp=s,(nt.test(i)||d)&&(_.e=0),this._pt=_}.call(this,t,e,p,n,_,h||q.stringFilter,l)):(c=new _e(this._pt,t,e,+p||0,n-(p||0),"boolean"==typeof d?se:ae,0,_),l&&(c.fp=l),u&&c.modifier(u,this,t),this._pt=c)},Gt=function _initTween(t,e,r){var i,n,a,s,o,u,h,l,f,c,d,p,_,m=t.vars,g=m.ease,v=m.startAt,y=m.immediateRender,T=m.lazy,b=m.onUpdate,x=m.onUpdateParams,k=m.callbackScope,M=m.runBackwards,O=m.yoyoEase,P=m.keyframes,A=m.autoRevert,C=t._dur,S=t._startAt,E=t._targets,D=t.parent,z=D&&"nested"===D.data?D.vars.targets:E,R="auto"===t._overwrite&&!B,F=t.timeline;if(!F||P&&g||(g="none"),t._ease=jt(g,V.ease),t._yEase=O?Yt(jt(!0===O?g:O,V.ease)):0,O&&t._yoyo&&!t._repeat&&(O=t._yEase,t._yEase=t._ease,t._ease=O),t._from=!F&&!!m.runBackwards,!F||P&&!m.stagger){if(p=(l=E[0]?fa(E[0]).harness:0)&&m[l.prop],i=ua(m,ft),S&&(S._zTime<0&&S.progress(1),e<0&&M&&y&&!A?S.render(-1,!0):S.revert(M&&C?ht:ut),S._lazy=0),v){if(za(t._startAt=Zt.set(E,qa({data:"isStart",overwrite:!1,parent:D,immediateRender:!0,lazy:!S&&w(T),startAt:null,delay:0,onUpdate:b,onUpdateParams:x,callbackScope:k,stagger:0},v))),t._startAt._dp=0,t._startAt._sat=t,e<0&&(L||!y&&!A)&&t._startAt.revert(ht),y&&C&&e<=0&&r<=0)return void(e&&(t._zTime=e))}else if(M&&C&&!S)if(e&&(y=!1),a=qa({overwrite:!1,data:"isFromStart",lazy:y&&!S&&w(T),immediateRender:y,stagger:0,parent:D},i),p&&(a[l.prop]=p),za(t._startAt=Zt.set(E,a)),t._startAt._dp=0,t._startAt._sat=t,e<0&&(L?t._startAt.revert(ht):t._startAt.render(-1,!0)),t._zTime=e,y){if(!e)return}else _initTween(t._startAt,X,X);for(t._pt=t._ptCache=0,T=C&&w(T)||T&&!C,n=0;n<E.length;n++){if(h=(o=E[n])._gsap||ea(E)[n]._gsap,t._ptLookup[n]=c={},dt[h.id]&&ct.length&&ma(),d=z===E?n:z.indexOf(o),l&&!1!==(f=new l).init(o,p||i,t,d,z)&&(t._pt=s=new _e(t._pt,o,f.name,0,1,f.render,f,0,f.priority),f._props.forEach(function(t){c[t]=s}),f.priority&&(u=1)),!l||p)for(a in i)pt[a]&&(f=ac(a,i,t,d,o,z))?f.priority&&(u=1):c[a]=s=Qt.call(t,o,a,"get",i[a],d,z,0,m.stringFilter);t._op&&t._op[n]&&t.kill(o,t._op[n]),R&&t._pt&&(Nt=t,I.killTweensOf(o,c,t.globalTime(e)),_=!t.parent,Nt=0),t._pt&&T&&(dt[h.id]=1)}u&&pe(t),t._onInit&&t._onInit(t)}t._onUpdate=b,t._initted=(!t._op||t._pt)&&!_,P&&e<=0&&F.render(U,!0,!0)},Kt=function _parseFuncOrString(t,e,i,n,a){return s(t)?t.call(e,i,n,a):r(t)&&~t.indexOf("random(")?ob(t):t},Jt=vt+"repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase,autoRevert",Ht={};ha(Jt+",id,stagger,delay,duration,paused,scrollTrigger",function(t){return Ht[t]=1});var Zt=function(z){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,c,d,p=(a=z.call(this,n?r:va(r))||this).vars,_=p.duration,m=p.delay,g=p.immediateRender,T=p.stagger,b=p.overwrite,x=p.keyframes,k=p.defaults,M=p.scrollTrigger,O=p.yoyoEase,P=r.parent||I,A=($(e)||Z(e)?t(e[0]):"length"in r)?[e]:Ot(e);if(a._targets=A.length?ea(A):R("GSAP target "+e+" not found. https://greensock.com",!q.nullTargetWarn)||[],a._ptLookup=[],a._overwrite=b,x||T||y(_)||y(m)){if(r=a.vars,(s=a.timeline=new Xt({data:"nested",defaults:k||{},targets:P&&"nested"===P.data?P.vars.targets:A})).kill(),s.parent=s._dp=_assertThisInitialized(a),s._start=0,T||y(_)||y(m)){if(h=A.length,c=T&&eb(T),v(T))for(l in T)~Jt.indexOf(l)&&((d=d||{})[l]=T[l]);for(o=0;o<h;o++)(u=ua(r,Ht)).stagger=0,O&&(u.yoyoEase=O),d&&yt(u,d),f=A[o],u.duration=+Kt(_,_assertThisInitialized(a),o,f,A),u.delay=(+Kt(m,_assertThisInitialized(a),o,f,A)||0)-a._delay,!T&&1===h&&u.delay&&(a._delay=m=u.delay,a._start+=m,u.delay=0),s.to(f,u,c?c(o,f,A):0),s._ease=Bt.none;s.duration()?_=m=0:a.timeline=0}else if(x){va(qa(s.vars.defaults,{ease:"none"})),s._ease=jt(x.ease||r.ease||"none");var C,S,E,D=0;if($(x))x.forEach(function(t){return s.to(A,t,">")}),s.duration();else{for(l in u={},x)"ease"===l||"easeEach"===l||gc(l,x[l],u,x.easeEach);for(l in u)for(C=u[l].sort(function(t,e){return t.t-e.t}),o=D=0;o<C.length;o++)(E={ease:(S=C[o]).e,duration:(S.t-(o?C[o-1].t:0))/100*_})[l]=S.v,s.to(A,E,D),D+=E.duration;s.duration()<_&&s.to({},{duration:_-s.duration()})}}_||a.duration(_=s.duration())}else a.timeline=0;return!0!==b||B||(Nt=_assertThisInitialized(a),I.killTweensOf(A),Nt=0),Ka(P,_assertThisInitialized(a),i),r.reversed&&a.reverse(),r.paused&&a.paused(!0),(g||!_&&!x&&a._start===ja(P._time)&&w(g)&&function _hasNoPausedAncestors(t){return!t||t._ts&&_hasNoPausedAncestors(t.parent)}(_assertThisInitialized(a))&&"nested"!==P.data)&&(a._tTime=-X,a.render(Math.max(0,-m)||0)),M&&La(_assertThisInitialized(a),M),a}_inheritsLoose(Tween,z);var e=Tween.prototype;return e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,c=this._time,d=this._tDur,p=this._dur,_=t<0,m=d-X<t&&!_?d:t<X?0:t;if(p){if(m!==this._tTime||!t||r||!this._initted&&this._tTime||this._startAt&&this._zTime<0!=_){if(i=m,l=this.timeline,this._repeat){if(s=p+this._rDelay,this._repeat<-1&&_)return this.totalTime(100*s+t,e,r);if(i=ja(m%s),m===d?(a=this._repeat,i=p):((a=~~(m/s))&&a===m/s&&(i=p,a--),p<i&&(i=p)),(u=this._yoyo&&1&a)&&(f=this._yEase,i=p-i),o=Tt(this._tTime,s),i===c&&!r&&this._initted)return this._tTime=m,this;a!==o&&(l&&this._yEase&&Qb(l,u),!this.vars.repeatRefresh||u||this._lock||(this._lock=r=1,this.render(ja(s*a),!0).invalidate()._lock=0))}if(!this._initted){if(Ma(this,_?t:i,r,e,m))return this._tTime=0,this;if(c!==this._time)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),i&&!c&&!e&&!a&&(At(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:!i&&u?-X:l._dur*l._ease(i/this._dur),e,r)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(_&&Ca(this,t,0,r),At(this,"onUpdate")),this._repeat&&a!==o&&this.vars.onRepeat&&!e&&this.parent&&At(this,"onRepeat"),m!==this._tDur&&m||this._tTime!==m||(_&&!this._onUpdate&&Ca(this,t,0,!0),!t&&p||!(m===this._tDur&&0<this._ts||!m&&this._ts<0)||za(this,1),e||_&&!c||!(m||c||u)||(At(this,m===d?"onComplete":"onReverseComplete",!0),!this._prom||m<d&&0<this.timeScale()||this._prom()))}}else!function _renderZeroDurationTween(t,e,r,i){var n,a,s,o=t.ratio,u=e<0||!e&&(!t._start&&function _parentPlayheadIsBeforeStart(t){var e=t.parent;return e&&e._ts&&e._initted&&!e._lock&&(e.rawTime()<0||_parentPlayheadIsBeforeStart(e))}(t)&&(t._initted||!bt(t))||(t._ts<0||t._dp._ts<0)&&!bt(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=kt(0,t._tDur,e),a=Tt(l,h),t._yoyo&&1&a&&(u=1-u),a!==Tt(t._tTime,h)&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||L||i||t._zTime===X||!e&&t._zTime){if(!t._initted&&Ma(t,e,i,r,l))return;for(s=t._zTime,t._zTime=e||(r?X: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&&Ca(t,e,0,!0),t._onUpdate&&!r&&At(t,"onUpdate"),l&&t._repeat&&!r&&t.parent&&At(t,"onRepeat"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&za(t,1),r||L||(At(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),z.prototype.invalidate.call(this,t)},e.resetTo=function resetTo(t,e,r,i){d||Rt.wake(),this._ts||this.play();var n,a=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||Gt(this,a),n=this._ease(a/this._dur),function _updatePropTweens(t,e,r,i,n,a,s){var o,u,h,l,f=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!f)for(f=t._ptCache[e]=[],h=t._ptLookup,l=t._targets.length;l--;){if((o=h[l][e])&&o.d&&o.d._pt)for(o=o.d._pt;o&&o.p!==e&&o.fp!==e;)o=o._next;if(!o)return Wt=1,t.vars[e]="+=0",Gt(t,s),Wt=0,1;f.push(o)}for(l=f.length;l--;)(o=(u=f[l])._pt||u).s=!i&&0!==i||n?o.s+(i||0)+a*o.c:i,o.c=r-o.s,u.e&&(u.e=ia(r)+Ya(u.e)),u.b&&(u.b=o.s+Ya(u.b))}(this,t,e,r,i,n,a)?this.resetTo(t,e,r,i):(Ia(this,0),this.parent||xa(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?tb(this):this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Nt&&!0!==Nt.vars.overwrite)._first||tb(this),this.parent&&i!==this.timeline.totalDuration()&&Ra(this,this._dur*this.timeline._tDur/i,0,1),this}var n,a,s,o,u,h,l,f=this._targets,c=t?Ot(t):f,d=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,c))return"all"===e&&(this._pt=0),tb(this);for(n=this._op=this._op||[],"all"!==e&&(r(e)&&(u={},ha(e,function(t){return u[t]=1}),e=u),e=function _addAliasesToVars(t,e){var r,i,n,a,s=t[0]?fa(t[0]).harness:0,o=s&&s.aliases;if(!o)return e;for(i in r=yt({},e),o)if(i in r)for(n=(a=o[i].split(",")).length;n--;)r[a[n]]=r[i];return r}(f,e)),l=f.length;l--;)if(~c.indexOf(f[l]))for(u in a=d[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)||ya(this,h,"_pt"),delete a[u]),"all"!==s&&(s[u]=1);return this._initted&&!this._pt&&p&&tb(this),this},Tween.to=function to(t,e,r){return new Tween(t,e,r)},Tween.from=function from(t,e){return Va(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 Va(2,arguments)},Tween.set=function set(t,e){return e.duration=0,e.repeatDelay||(e.repeat=0),new Tween(t,e)},Tween.killTweensOf=function killTweensOf(t,e,r){return I.killTweensOf(t,e,r)},Tween}(Ut);qa(Zt.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),ha("staggerTo,staggerFrom,staggerFromTo",function(r){Zt[r]=function(){var t=new Xt,e=Mt.call(arguments,0);return e.splice("staggerFromTo"===r?5:4,0,0),t[r].apply(t,e)}});function oc(t,e,r){return t.setAttribute(e,r)}function wc(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)}var $t=function _setterPlain(t,e,r){return t[e]=r},te=function _setterFunc(t,e,r){return t[e](r)},re=function _setterFuncWithParam(t,e,r,i){return t[e](i.fp,r)},ne=function _getSetter(t,e){return s(t[e])?te:u(t[e])&&t.setAttribute?oc:$t},ae=function _renderPlain(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},se=function _renderBoolean(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},ue=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)},he=function _renderPropTweens(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},fe=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},ce=function _killPropTweensOf(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?ya(this,i,"_pt"):i.dep||(e=1),i=r;return!e},pe=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},_e=(PropTween.prototype.modifier=function modifier(t,e,r){this.mSet=this.mSet||this.set,this.set=wc,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||ae,this.d=s||this,this.set=o||$t,this.pr=u||0,(this._next=t)&&(t._prev=this)}ha(vt+"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger",function(t){return ft[t]=1}),ot.TweenMax=ot.TweenLite=Zt,ot.TimelineLite=ot.TimelineMax=Xt,I=new Xt({sortChildren:!1,defaults:V,autoRemoveChildren:!0,id:"root",smoothChildTiming:!0}),q.stringFilter=Fb;function Ec(t){return(ye[t]||Te).map(function(t){return t()})}function Fc(){var t=Date.now(),o=[];2<t-Me&&(Ec("matchMediaInit"),ge.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))}),Ec("matchMediaRevert"),o.forEach(function(t){return t.onMatch(t)}),Me=t,Ec("matchMedia"))}var me,ge=[],ye={},Te=[],Me=0,Oe=0,Pe=((me=Context.prototype).add=function add(t,i,n){function Ew(){var t,e=l,r=a.selector;return e&&e!==a&&e.data.push(a),n&&(a.selector=cb(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=Ew,t===s?Ew(a):t?a[t]=Ew:Ew},me.ignore=function ignore(t){var e=l;l=null,t(this),l=e},me.getTweens=function getTweens(){var e=[];return this.data.forEach(function(t){return t instanceof Context?e.push.apply(e,t.getTweens()):t instanceof Zt&&!(t.parent&&"nested"===t.parent.data)&&e.push(t)}),e},me.clear=function clear(){this._r.length=this.data.length=0},me.kill=function kill(e,t){var r=this;if(e){var i=this.getTweens();this.data.forEach(function(t){"isFlip"===t.data&&(t.revert(),t.getChildren(!0,!0,!1).forEach(function(t){return i.splice(i.indexOf(t),1)}))}),i.map(function(t){return{g:t.globalTime(0),t:t}}).sort(function(t,e){return e.g-t.g||-1/0}).forEach(function(t){return t.t.revert(e)}),this.data.forEach(function(t){return!(t instanceof Zt)&&t.revert&&t.revert(e)}),this._r.forEach(function(t){return t(e,r)}),this.isReverted=!0}else this.data.forEach(function(t){return t.kill&&t.kill()});if(this.clear(),t)for(var n=ge.length;n--;)ge[n].id===this.id&&ge.splice(n,1)},me.revert=function revert(t){this.kill(t||{})},Context);function Context(t,e){this.selector=e&&cb(e),this.data=[],this._r=[],this.isReverted=!1,this.id=Oe++,t&&this.add(t)}var Ae,Ce=((Ae=MatchMedia.prototype).add=function add(t,e,r){v(t)||(t={matches:t});var i,n,a,s=new Pe(0,r||this.scope),o=s.conditions={};for(n in l&&!s.selector&&(s.selector=l.selector),this.contexts.push(s),e=s.add("onMatch",e),s.queries=t)"all"===n?a=1:(i=h.matchMedia(t[n]))&&(ge.indexOf(s)<0&&ge.push(s),(o[n]=i.matches)&&(a=1),i.addListener?i.addListener(Fc):i.addEventListener("change",Fc));return a&&e(s),this},Ae.revert=function revert(t){this.kill(t||{})},Ae.kill=function kill(e){this.contexts.forEach(function(t){return t.kill(e,!0)})},MatchMedia);function MatchMedia(t){this.contexts=[],this.scope=t}var Se={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 wb(t)})},timeline:function timeline(t){return new Xt(t)},getTweensOf:function getTweensOf(t,e){return I.getTweensOf(t,e)},getProperty:function getProperty(i,t,e,n){r(i)&&(i=Ot(i)[0]);var a=fa(i||{}).get,s=e?pa:oa;return"native"===e&&(e=""),i?t?s((pt[t]&&pt[t].get||a)(i,t,e,n)):function(t,e,r){return s((pt[t]&&pt[t].get||a)(i,t,e,r))}:i},quickSetter:function quickSetter(r,e,i){if(1<(r=Ot(r)).length){var n=r.map(function(t){return Ee.quickSetter(t,e,i)}),a=n.length;return function(t){for(var e=a;e--;)n[e](t)}}r=r[0]||{};var s=pt[e],o=fa(r),u=o.harness&&(o.harness.aliases||{})[e]||e,h=s?function(t){var e=new s;c._pt=0,e.init(r,i?t+i:t,c,0,[r]),e.render(1,e),c._pt&&he(1,c)}: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 Wx(t,e,r){return n.resetTo(i,t,e,r)}var r,n=Ee.to(t,yt(((r={})[i]="+=0.1",r.paused=!0,r),e||{}));return Wx.tween=n,Wx},isTweening:function isTweening(t){return 0<I.getTweensOf(t,!0).length},defaults:function defaults(t){return t&&t.ease&&(t.ease=jt(t.ease,V.ease)),ta(V,t||{})},config:function config(t){return ta(q,t||{})},registerEffect:function registerEffect(t){var i=t.name,n=t.effect,e=t.plugins,a=t.defaults,r=t.extendTimeline;(e||"").split(",").forEach(function(t){return t&&!pt[t]&&!ot[t]&&R(i+" effect requires "+t+" plugin.")}),_t[i]=function(t,e,r){return n(Ot(t),qa(e||{},a),r)},r&&(Xt.prototype[i]=function(t,e,r){return this.add(_t[i](t,v(e)?e:(r=e)&&{},this),r)})},registerEase:function registerEase(t,e){Bt[t]=jt(e)},parseEase:function parseEase(t,e){return arguments.length?jt(t,e):Bt},getById:function getById(t){return I.getById(t)},exportRoot:function exportRoot(t,e){void 0===t&&(t={});var r,i,n=new Xt(t);for(n.smoothChildTiming=w(t.smoothChildTiming),I.remove(n),n._dp=0,n._time=n._tTime=I._time,r=I._first;r;)i=r._next,!e&&!r._dur&&r instanceof Zt&&r.vars.onComplete===r._targets[0]||Ka(n,r,r._start-r._delay),r=i;return Ka(I,n,0),n},context:function context(t,e){return t?new Pe(t,e):l},matchMedia:function matchMedia(t){return new Ce(t)},matchMediaRefresh:function matchMediaRefresh(){return ge.forEach(function(t){var e,r,i=t.conditions;for(r in i)i[r]&&(i[r]=!1,e=1);e&&t.revert()})||Fc()},addEventListener:function addEventListener(t,e){var r=ye[t]||(ye[t]=[]);~r.indexOf(e)||r.push(e)},removeEventListener:function removeEventListener(t,e){var r=ye[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)?lb(e,wrap(0,e.length),t):Wa(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)?lb(e,wrapYoyo(0,e.length-1),t):Wa(r,function(t){return e+(i<(t=(n+(t-e)%n)%n||0)?n-t:t)})},distribute:eb,random:hb,snap:gb,normalize:function normalize(t,e,r){return Pt(t,e,0,1,r)},getUnit:Ya,clamp:function clamp(e,r,t){return Wa(t,function(t){return kt(e,r,t)})},splitColor:Ab,toArray:Ot,selector:cb,mapRange:Pt,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||Ya(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),c={};if(!0===t&&(n=1)&&(t=null),f)e={p:e},i={p:i};else if($(e)&&!$(i)){for(u=[],h=e.length,l=h-2,o=1;o<h;o++)u.push(interpolate(e[o-1],e[o]));h--,a=function func(t){t*=h;var e=Math.min(l,~~t);return u[e](t-e)},t=i}else n||(e=yt($(e)?[]:{},e));if(!u){for(s in i)Qt.call(c,e,s,"get",i[s]);a=function func(t){return he(t,c)||(f?e.p:e)}}}return Wa(t,a)},shuffle:db},install:P,effects:_t,ticker:Rt,updateRoot:Xt.updateRoot,plugins:pt,globalTimeline:I,core:{PropTween:_e,globals:S,Tween:Zt,Timeline:Xt,Animation:Ut,getCache:fa,_removeLinkedListItem:ya,reverting:function reverting(){return L},context:function context(t){return t&&l&&(l.data.push(t),t._ctx=l),l},suppressOverwrites:function suppressOverwrites(t){return B=t}}};ha("to,from,fromTo,delayedCall,set,killTweensOf",function(t){return Se[t]=Zt[t]}),Rt.add(Xt.updateRoot),c=Se.to({},{duration:0});function Jc(t,e){for(var r=t._pt;r&&r.p!==e&&r.op!==e&&r.fp!==e;)r=r._next;return r}function Lc(t,a){return{name:t,rawVars:1,init:function init(t,n,e){e._onInit=function(t){var e,i;if(r(n)&&(e={},ha(n,function(t){return e[t]=1}),n=e),a){for(i in e={},n)e[i]=a(n[i]);n=e}!function _addModifiers(t,e){var r,i,n,a=t._targets;for(r in e)for(i=a.length;i--;)(n=(n=t._ptLookup[i][r])&&n.d)&&(n._pt&&(n=Jc(n,r)),n&&n.modifier&&n.modifier(e[r],t,a[i],r))}(t,n)}}}}var Ee=Se.registerPlugin({name:"attr",init:function init(t,e,r,i,n){var a,s,o;for(a in this.tween=r,e)o=t.getAttribute(a)||"",(s=this.add(t,"setAttribute",(o||0)+"",e[a],i,n,0,0,a)).op=a,s.b=o,this._props.push(a)},render:function render(t,e){for(var r=e._pt;r;)L?r.set(r.t,r.p,r.b,r):r.r(t,r.d),r=r._next}},{name:"endArray",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)}},Lc("roundProps",fb),Lc("modifiers"),Lc("snap",gb))||Se;Zt.version=Xt.version=Ee.version="3.12.2",o=1,x()&&Ft();function vd(t,e){return e.set(e.t,e.p,Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function wd(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 xd(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 yd(t,e){var r=e.s+e.c*t;e.set(e.t,e.p,~~(r+(r<0?-.5:.5))+e.u,e)}function zd(t,e){return e.set(e.t,e.p,t?e.e:e.b,e)}function Ad(t,e){return e.set(e.t,e.p,1!==t?e.b:e.e,e)}function Bd(t,e,r){return t.style[e]=r}function Cd(t,e,r){return t.style.setProperty(e,r)}function Dd(t,e,r){return t._gsap[e]=r}function Ed(t,e,r){return t._gsap.scaleX=t._gsap.scaleY=r}function Fd(t,e,r,i,n){var a=t._gsap;a.scaleX=a.scaleY=r,a.renderTransform(n,a)}function Gd(t,e,r,i,n){var a=t._gsap;a[e]=r,a.renderTransform(n,a)}function Jd(t,e){var r=this,i=this.target,n=i.style;if(t in ar&&n){if(this.tfm=this.tfm||{},"transform"===t)return cr.transform.split(",").forEach(function(t){return Jd.call(r,t,e)});if(~(t=cr[t]||t).indexOf(",")?t.split(",").forEach(function(t){return r.tfm[t]=yr(i,t)}):this.tfm[t]=i._gsap.x?i._gsap[t]:yr(i,t),0<=this.props.indexOf(dr))return;i._gsap.svg&&(this.svgo=i.getAttribute("data-svg-origin"),this.props.push(pr,e,"")),t=dr}(n||e)&&this.props.push(t,e,n[t])}function Kd(t){t.translate&&(t.removeProperty("translate"),t.removeProperty("scale"),t.removeProperty("rotate"))}function Ld(){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]?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(hr,"-$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=Ie())&&t.isStart||n[dr]||(Kd(n),a.uncache=1)}}function Md(t,e){var r={target:t,props:[],revert:Ld,save:Jd};return t._gsap||Ee.core.getCache(t),e&&e.split(",").forEach(function(t){return r.save(t)}),r}function Od(t,e){var r=ze.createElementNS?ze.createElementNS((e||"http://www.w3.org/1999/xhtml").replace(/^https/,"http"),t):ze.createElement(t);return r.style?r:ze.createElement(t)}function Pd(t,e,r){var i=getComputedStyle(t);return i[e]||i.getPropertyValue(e.replace(hr,"-$1").toLowerCase())||i.getPropertyValue(e)||!r&&Pd(t,mr(e)||e,1)||""}function Sd(){(function _windowExists(){return"undefined"!=typeof window})()&&window.document&&(De=window,ze=De.document,Re=ze.documentElement,Be=Od("div")||{style:{}},Od("div"),dr=mr(dr),pr=dr+"Origin",Be.style.cssText="border-width:0;line-height:0;position:absolute;padding:0",Ye=!!mr("perspective"),Ie=Ee.core.reverting,Fe=1)}function Td(t){var e,r=Od("svg",this.ownerSVGElement&&this.ownerSVGElement.getAttribute("xmlns")||"http://www.w3.org/2000/svg"),i=this.parentNode,n=this.nextSibling,a=this.style.cssText;if(Re.appendChild(r),r.appendChild(this),this.style.display="block",t)try{e=this.getBBox(),this._gsapBBox=this.getBBox,this.getBBox=Td}catch(t){}else this._gsapBBox&&(e=this._gsapBBox());return i&&(n?i.insertBefore(this,n):i.appendChild(this)),Re.removeChild(r),this.style.cssText=a,e}function Ud(t,e){for(var r=e.length;r--;)if(t.hasAttribute(e[r]))return t.getAttribute(e[r])}function Vd(e){var r;try{r=e.getBBox()}catch(t){r=Td.call(e,!0)}return r&&(r.width||r.height)||e.getBBox===Td||(r=Td.call(e,!0)),!r||r.width||r.x||r.y?r:{x:+Ud(e,["x","cx","x1"])||0,y:+Ud(e,["y","cy","y1"])||0,width:0,height:0}}function Wd(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!Vd(t))}function Xd(t,e){if(e){var r=t.style;e in ar&&e!==pr&&(e=dr),r.removeProperty?("ms"!==e.substr(0,2)&&"webkit"!==e.substr(0,6)||(e="-"+e),r.removeProperty(e.replace(hr,"-$1").toLowerCase())):r.removeAttribute(e)}}function Yd(t,e,r,i,n,a){var s=new _e(t._pt,e,r,0,1,a?Ad:zd);return(t._pt=s).b=i,s.e=n,t._props.push(r),s}function _d(t,e,r,i){var n,a,s,o,u=parseFloat(r)||0,h=(r+"").trim().substr((u+"").length)||"px",l=Be.style,f=lr.test(e),c="svg"===t.tagName.toLowerCase(),d=(c?"client":"offset")+(f?"Width":"Height"),p="px"===i,_="%"===i;return i===h||!u||gr[i]||gr[h]?u:("px"===h||p||(u=_d(t,e,r,"px")),o=t.getCTM&&Wd(t),!_&&"%"!==h||!ar[e]&&!~e.indexOf("adius")?(l[f?"width":"height"]=100+(p?h:i),a=~e.indexOf("adius")||"em"===i&&t.appendChild&&!c?t:t.parentNode,o&&(a=(t.ownerSVGElement||{}).parentNode),a&&a!==ze&&a.appendChild||(a=ze.body),(s=a._gsap)&&_&&s.width&&f&&s.time===Rt.time&&!s.uncache?ia(u/s.width*100):(!_&&"%"!==h||vr[Pd(a,"display")]||(l.position=Pd(t,"position")),a===t&&(l.position="static"),a.appendChild(Be),n=Be[d],a.removeChild(Be),l.position="absolute",f&&_&&((s=fa(a)).time=Rt.time,s.width=a[d]),ia(p?n*u/100:n&&u?100/n*u:0))):(n=o?t.getBBox()[f?"width":"height"]:t[d],ia(_?u/n*100:u/100*n)))}function be(t,e,r,i){if(!r||"none"===r){var n=mr(e,t,1),a=n&&Pd(t,n,1);a&&a!==r?(e=n,r=a):"borderColor"===e&&(r=Pd(t,"borderTopColor"))}var s,o,u,h,l,f,c,d,p,_,m,g=new _e(this._pt,t.style,e,0,1,ue),v=0,y=0;if(g.b=r,g.e=i,r+="","auto"===(i+="")&&(t.style[e]=i,i=Pd(t,e)||i,t.style[e]=r),Fb(s=[r,i]),i=s[1],u=(r=s[0]).match(rt)||[],(i.match(rt)||[]).length){for(;o=rt.exec(i);)c=o[0],p=i.substring(v,o.index),l?l=(l+1)%5:"rgba("!==p.substr(-5)&&"hsla("!==p.substr(-5)||(l=1),c!==(f=u[y++]||"")&&(h=parseFloat(f)||0,m=f.substr((h+"").length),"="===c.charAt(1)&&(c=ka(h,c)+m),d=parseFloat(c),_=c.substr((d+"").length),v=rt.lastIndex-_.length,_||(_=_||q.units[e]||m,v===i.length&&(i+=_,g.e+=_)),m!==_&&(h=_d(t,e,f,_)||0),g._pt={_next:g._pt,p:p||1===y?p:",",s:h,c:d-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?Ad:zd;return nt.test(i)&&(g.e=0),this._pt=g}function de(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]=Tr[r]||r,e[1]=Tr[i]||i,e.join(" ")}function ee(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],ar[r]&&(i=1,r="transformOrigin"===r?pr:dr),Xd(a,r);i&&(Xd(a,dr),u&&(u.svg&&a.removeAttribute("transform"),kr(a,1),u.uncache=1,Kd(s)))}}function ie(t){return"matrix(1, 0, 0, 1, 0, 0)"===t||"none"===t||!t}function je(t){var e=Pd(t,dr);return ie(e)?wr:e.substr(7).match(et).map(ia)}function ke(t,e){var r,i,n,a,s=t._gsap||fa(t),o=t.style,u=je(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(",")?wr:u:(u!==wr||t.offsetParent||t===Re||s.svg||(n=o.display,o.display="block",(r=t.parentNode)&&t.offsetParent||(a=1,i=t.nextElementSibling,Re.appendChild(t)),u=je(t),n?o.display=n:Xd(t,"display"),a&&(i?r.insertBefore(t,i):r?r.appendChild(t):Re.removeChild(t))),e&&6<u.length?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)}function le(t,e,r,i,n,a){var s,o,u,h=t._gsap,l=n||ke(t,!0),f=h.xOrigin||0,c=h.yOrigin||0,d=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!==wr&&(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=Vd(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-c,h.xOffset=d+(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[pr]="0px 0px",a&&(Yd(a,h,"xOrigin",f,w),Yd(a,h,"yOrigin",c,x),Yd(a,h,"xOffset",d,h.xOffset),Yd(a,h,"yOffset",p,h.yOffset)),t.setAttribute("data-svg-origin",w+" "+x)}function oe(t,e,r){var i=Ya(e);return ia(parseFloat(e)+parseFloat(_d(t,"x",r+"px",i)))+i}function ve(t,e,i,n,a){var s,o,u=360,h=r(a),l=parseFloat(a)*(h&&~a.indexOf("rad")?sr: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 _e(t._pt,e,i,n,l,wd),o.e=f,o.u="deg",t._props.push(i),o}function we(t,e){for(var r in e)t[r]=e[r];return t}function xe(t,e,r){var i,n,a,s,o,u,h,l=we({},r._gsap),f=r.style;for(n in l.svg?(a=r.getAttribute("transform"),r.setAttribute("transform",""),f[dr]=e,i=kr(r,1),Xd(r,dr),r.setAttribute("transform",a)):(a=getComputedStyle(r)[dr],f[dr]=e,i=kr(r,1),f[dr]=a),ar)(a=l[n])!==(s=i[n])&&"perspective,force3D,transformOrigin,svgOrigin".indexOf(n)<0&&(o=Ya(a)!==(h=Ya(s))?_d(r,n,a,h):parseFloat(a),u=parseFloat(s),t._pt=new _e(t._pt,i,n,o,u-o,vd),t._pt.u=h||0,t._props.push(n));we(i,l)}var De,ze,Re,Fe,Be,Le,Ie,Ye,qe=Bt.Power0,Ve=Bt.Power1,Ue=Bt.Power2,Xe=Bt.Power3,Ne=Bt.Power4,We=Bt.Linear,Qe=Bt.Quad,Ge=Bt.Cubic,Ke=Bt.Quart,Je=Bt.Quint,He=Bt.Strong,Ze=Bt.Elastic,$e=Bt.Back,tr=Bt.SteppedEase,er=Bt.Bounce,rr=Bt.Sine,ir=Bt.Expo,nr=Bt.Circ,ar={},sr=180/Math.PI,or=Math.PI/180,ur=Math.atan2,hr=/([A-Z])/g,lr=/(left|right|width|margin|padding|x)/i,fr=/[\s,\(]\S/,cr={autoAlpha:"opacity,visibility",scale:"scaleX,scaleY",alpha:"opacity"},dr="transform",pr=dr+"Origin",_r="O,Moz,ms,Ms,Webkit".split(","),mr=function _checkPropPrefix(t,e,r){var i=(e||Be).style,n=5;if(t in i&&!r)return t;for(t=t.charAt(0).toUpperCase()+t.substr(1);n--&&!(_r[n]+t in i););return n<0?null:(3===n?"ms":0<=n?_r[n]:"")+t},gr={deg:1,rad:1,turn:1},vr={grid:1,flex:1},yr=function _get(t,e,r,i){var n;return Fe||Sd(),e in cr&&"transform"!==e&&~(e=cr[e]).indexOf(",")&&(e=e.split(",")[0]),ar[e]&&"transform"!==e?(n=kr(t,i),n="transformOrigin"!==e?n[e]:n.svg?n.origin:Mr(Pd(t,pr))+" "+n.zOrigin+"px"):(n=t.style[e])&&"auto"!==n&&!i&&!~(n+"").indexOf("calc(")||(n=br[e]&&br[e](t,e,r)||Pd(t,e)||ga(t,e)||("opacity"===e?1:0)),r&&!~(n+"").trim().indexOf(" ")?_d(t,e,n,r)+r:n},Tr={top:"0%",bottom:"100%",left:"0%",right:"100%",center:"50%"},br={clearProps:function clearProps(t,e,r,i,n){if("isFromStart"!==n.data){var a=t._pt=new _e(t._pt,e,r,0,0,ee);return a.u=i,a.pr=-10,a.tween=n,t._props.push(r),1}}},wr=[1,0,0,1,0,0],xr={},kr=function _parseTransform(t,e){var r=t._gsap||new Vt(t);if("x"in r&&!e&&!r.uncache)return r;var i,n,a,s,o,u,h,l,f,c,d,p,_,m,g,v,y,T,b,w,x,k,M,O,P,A,C,S,E,D,z,R,F=t.style,B=r.scaleX<0,L="deg",I=getComputedStyle(t),Y=Pd(t,pr)||"0";return i=n=a=u=h=l=f=c=d=0,s=o=1,r.svg=!(!t.getCTM||!Wd(t)),I.translate&&("none"===I.translate&&"none"===I.scale&&"none"===I.rotate||(F[dr]=("none"!==I.translate?"translate3d("+(I.translate+" 0 0").split(" ").slice(0,3).join(", ")+") ":"")+("none"!==I.rotate?"rotate("+I.rotate+") ":"")+("none"!==I.scale?"scale("+I.scale.split(" ").join(",")+") ":"")+("none"!==I[dr]?I[dr]:"")),F.scale=F.rotate=F.translate="none"),m=ke(t,r.svg),r.svg&&(O=r.uncache?(P=t.getBBox(),Y=r.xOrigin-P.x+"px "+(r.yOrigin-P.y)+"px",""):!e&&t.getAttribute("data-svg-origin"),le(t,O||Y,!!O||r.originIsAbsolute,!1!==r.smooth,m)),p=r.xOrigin||0,_=r.yOrigin||0,m!==wr&&(T=m[0],b=m[1],w=m[2],x=m[3],i=k=m[4],n=M=m[5],6===m.length?(s=Math.sqrt(T*T+b*b),o=Math.sqrt(x*x+w*w),u=T||b?ur(b,T)*sr:0,(f=w||x?ur(w,x)*sr+u:0)&&(o*=Math.abs(Math.cos(f*or))),r.svg&&(i-=p-(p*T+_*w),n-=_-(p*b+_*x))):(R=m[6],D=m[7],C=m[8],S=m[9],E=m[10],z=m[11],i=m[12],n=m[13],a=m[14],h=(g=ur(R,E))*sr,g&&(O=k*(v=Math.cos(-g))+C*(y=Math.sin(-g)),P=M*v+S*y,A=R*v+E*y,C=k*-y+C*v,S=M*-y+S*v,E=R*-y+E*v,z=D*-y+z*v,k=O,M=P,R=A),l=(g=ur(-w,E))*sr,g&&(v=Math.cos(-g),z=x*(y=Math.sin(-g))+z*v,T=O=T*v-C*y,b=P=b*v-S*y,w=A=w*v-E*y),u=(g=ur(b,T))*sr,g&&(O=T*(v=Math.cos(g))+b*(y=Math.sin(g)),P=k*v+M*y,b=b*v-T*y,M=M*v-k*y,T=O,k=P),h&&359.9<Math.abs(h)+Math.abs(u)&&(h=u=0,l=180-l),s=ia(Math.sqrt(T*T+b*b+w*w)),o=ia(Math.sqrt(M*M+R*R)),g=ur(k,M),f=2e-4<Math.abs(g)?g*sr:0,d=z?1/(z<0?-z:z):0),r.svg&&(O=t.getAttribute("transform"),r.forceCSS=t.setAttribute("transform","")||!ie(Pd(t,dr)),O&&t.setAttribute("transform",O))),90<Math.abs(f)&&Math.abs(f)<270&&(B?(s*=-1,f+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,f+=f<=0?180:-180)),e=e||r.uncache,r.x=i-((r.xPercent=i&&(!e&&r.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-i)?-50:0)))?t.offsetWidth*r.xPercent/100:0)+"px",r.y=n-((r.yPercent=n&&(!e&&r.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-n)?-50:0)))?t.offsetHeight*r.yPercent/100:0)+"px",r.z=a+"px",r.scaleX=ia(s),r.scaleY=ia(o),r.rotation=ia(u)+L,r.rotationX=ia(h)+L,r.rotationY=ia(l)+L,r.skewX=f+L,r.skewY=c+L,r.transformPerspective=d+"px",(r.zOrigin=parseFloat(Y.split(" ")[2])||0)&&(F[pr]=Mr(Y)),r.xOffset=r.yOffset=0,r.force3D=q.force3D,r.renderTransform=r.svg?Er:Ye?Sr:Or,r.uncache=0,r},Mr=function _firstTwoOnly(t){return(t=t.split(" "))[0]+" "+t[1]},Or=function _renderNon3DTransforms(t,e){e.z="0px",e.rotationY=e.rotationX="0deg",e.force3D=0,Sr(t,e)},Pr="0deg",Ar="0px",Cr=") ",Sr=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,c=r.skewY,d=r.scaleX,p=r.scaleY,_=r.transformPerspective,m=r.force3D,g=r.target,v=r.zOrigin,y="",T="auto"===m&&t&&1!==t||!0===m;if(v&&(l!==Pr||h!==Pr)){var b,w=parseFloat(h)*or,x=Math.sin(w),k=Math.cos(w);w=parseFloat(l)*or,b=Math.cos(w),a=oe(g,a,x*b*-v),s=oe(g,s,-Math.sin(w)*-v),o=oe(g,o,k*b*-v+v)}_!==Ar&&(y+="perspective("+_+Cr),(i||n)&&(y+="translate("+i+"%, "+n+"%) "),!T&&a===Ar&&s===Ar&&o===Ar||(y+=o!==Ar||T?"translate3d("+a+", "+s+", "+o+") ":"translate("+a+", "+s+Cr),u!==Pr&&(y+="rotate("+u+Cr),h!==Pr&&(y+="rotateY("+h+Cr),l!==Pr&&(y+="rotateX("+l+Cr),f===Pr&&c===Pr||(y+="skew("+f+", "+c+Cr),1===d&&1===p||(y+="scale("+d+", "+p+Cr),g.style[dr]=y||"translate(0, 0)"},Er=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,c=o.rotation,d=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);c=parseFloat(c),d=parseFloat(d),(p=parseFloat(p))&&(d+=p=parseFloat(p),c+=p),c||d?(c*=or,d*=or,r=Math.cos(c)*_,i=Math.sin(c)*_,n=Math.sin(c-d)*-m,a=Math.cos(c-d)*m,d&&(p*=or,s=Math.tan(d-p),n*=s=Math.sqrt(1+s*s),a*=s,p&&(s=Math.tan(p),r*=s=Math.sqrt(1+s*s),i*=s)),r=ia(r),i=ia(i),n=ia(n),a=ia(a)):(r=_,a=m,i=n=0),(x&&!~(l+"").indexOf("px")||k&&!~(f+"").indexOf("px"))&&(x=_d(g,"x",l,"px"),k=_d(g,"y",f,"px")),(v||y||T||b)&&(x=ia(x+v-(v*r+y*n)+T),k=ia(k+y-(v*i+y*a)+b)),(u||h)&&(s=g.getBBox(),x=ia(x+u/100*s.width),k=ia(k+h/100*s.height)),s="matrix("+r+","+i+","+n+","+a+","+x+","+k+")",g.setAttribute("transform",s),w&&(g.style[dr]=s)};ha("padding,margin,Width,Radius",function(e,r){var t="Right",i="Bottom",n="Left",o=(r<3?["Top",t,i,n]:["Top"+n,"Top"+t,i+t,i+n]).map(function(t){return r<2?e+t:"border"+t+e});br[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 yr(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 Dr,zr,Rr,Fr={name:"css",register:Sd,targetTest:function targetTest(t){return t.style&&t.nodeType},init:function init(t,e,i,n,a){var s,o,u,h,l,f,c,d,p,_,m,g,v,y,T,b,w=this._props,x=t.style,k=i.vars.startAt;for(c in Fe||Sd(),this.styles=this.styles||Md(t),b=this.styles.props,this.tween=i,e)if("autoRound"!==c&&(o=e[c],!pt[c]||!ac(c,e,i,n,t,a)))if(l=typeof o,f=br[c],"function"===l&&(l=typeof(o=o.call(i,n,t,a))),"string"===l&&~o.indexOf("random(")&&(o=ob(o)),f)f(this,t,c,o,i)&&(T=1);else if("--"===c.substr(0,2))s=(getComputedStyle(t).getPropertyValue(c)+"").trim(),o+="",Dt.lastIndex=0,Dt.test(s)||(d=Ya(s),p=Ya(o)),p?d!==p&&(s=_d(t,c,s,p)+p):d&&(o+=d),this.add(x,"setProperty",s,o,n,a,0,0,c),w.push(c),b.push(c,0,x[c]);else if("undefined"!==l){if(k&&c in k?(s="function"==typeof k[c]?k[c].call(i,n,t,a):k[c],r(s)&&~s.indexOf("random(")&&(s=ob(s)),Ya(s+"")||(s+=q.units[c]||Ya(yr(t,c))||""),"="===(s+"").charAt(1)&&(s=yr(t,c))):s=yr(t,c),h=parseFloat(s),(_="string"===l&&"="===o.charAt(1)&&o.substr(0,2))&&(o=o.substr(2)),u=parseFloat(o),c in cr&&("autoAlpha"===c&&(1===h&&"hidden"===yr(t,"visibility")&&u&&(h=0),b.push("visibility",0,x.visibility),Yd(this,x,"visibility",h?"inherit":"hidden",u?"inherit":"hidden",!u)),"scale"!==c&&"transform"!==c&&~(c=cr[c]).indexOf(",")&&(c=c.split(",")[0])),m=c in ar)if(this.styles.save(c),g||((v=t._gsap).renderTransform&&!e.parseTransform||kr(t,e.parseTransform),y=!1!==e.smoothOrigin&&v.smooth,(g=this._pt=new _e(this._pt,x,dr,0,1,v.renderTransform,v,0,-1)).dep=1),"scale"===c)this._pt=new _e(this._pt,v,"scaleY",v.scaleY,(_?ka(v.scaleY,_+u):u)-v.scaleY||0,vd),this._pt.u=0,w.push("scaleY",c),c+="X";else{if("transformOrigin"===c){b.push(pr,0,x[pr]),o=de(o),v.svg?le(t,o,0,y,0,this):((p=parseFloat(o.split(" ")[2])||0)!==v.zOrigin&&Yd(this,v,"zOrigin",v.zOrigin,p),Yd(this,x,c,Mr(s),Mr(o)));continue}if("svgOrigin"===c){le(t,o,1,y,0,this);continue}if(c in xr){ve(this,v,c,h,_?ka(h,_+o):o);continue}if("smoothOrigin"===c){Yd(this,v,"smooth",v.smooth,o);continue}if("force3D"===c){v[c]=o;continue}if("transform"===c){xe(this,o,t);continue}}else c in x||(c=mr(c)||c);if(m||(u||0===u)&&(h||0===h)&&!fr.test(o)&&c in x)u=u||0,(d=(s+"").substr((h+"").length))!==(p=Ya(o)||(c in q.units?q.units[c]:d))&&(h=_d(t,c,s,p)),this._pt=new _e(this._pt,m?v:x,c,h,(_?ka(h,_+u):u)-h,m||"px"!==p&&"zIndex"!==c||!1===e.autoRound?vd:yd),this._pt.u=p||0,d!==p&&"%"!==p&&(this._pt.b=s,this._pt.r=xd);else if(c in x)be.call(this,t,c,s,_?_+o:o);else if(c in t)this.add(t,c,s||t[c],_?_+o:o,n,a);else if("parseTransform"!==c){Q(c,o);continue}m||(c in x?b.push(c,0,x[c]):b.push(c,1,s||t[c])),w.push(c)}T&&pe(this)},render:function render(t,e){if(e.tween._time||!Ie())for(var r=e._pt;r;)r.r(t,r.d),r=r._next;else e.styles.revert()},get:yr,aliases:cr,getSetter:function getSetter(t,e,r){var i=cr[e];return i&&i.indexOf(",")<0&&(e=i),e in ar&&e!==pr&&(t._gsap.x||yr(t,"x"))?r&&Le===r?"scale"===e?Ed:Dd:(Le=r||{})&&("scale"===e?Fd:Gd):t.style&&!u(t.style[e])?Bd:~e.indexOf("-")?Cd:ne(t,e)},core:{_removeProperty:Xd,_getMatrix:ke}};Ee.utils.checkPrefix=mr,Ee.core.getStyleSaver=Md,Rr=ha((Dr="x,y,z,scale,scaleX,scaleY,xPercent,yPercent")+","+(zr="rotation,rotationX,rotationY,skewX,skewY")+",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective",function(t){ar[t]=1}),ha(zr,function(t){q.units[t]="deg",xr[t]=1}),cr[Rr[13]]=Dr+","+zr,ha("0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY",function(t){var e=t.split(":");cr[e[1]]=Rr[e[0]]}),ha("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective",function(t){q.units[t]="px"}),Ee.registerPlugin(Fr);var Br=Ee.registerPlugin(Fr)||Ee,Lr=Br.core.Tween;e.Back=$e,e.Bounce=er,e.CSSPlugin=Fr,e.Circ=nr,e.Cubic=Ge,e.Elastic=Ze,e.Expo=ir,e.Linear=We,e.Power0=qe,e.Power1=Ve,e.Power2=Ue,e.Power3=Xe,e.Power4=Ne,e.Quad=Qe,e.Quart=Ke,e.Quint=Je,e.Sine=rr,e.SteppedEase=tr,e.Strong=He,e.TimelineLite=Xt,e.TimelineMax=Xt,e.TweenLite=Zt,e.TweenMax=Lr,e.default=Br,e.gsap=Br;if (typeof(window)==="undefined"||window!==e){Object.defineProperty(e,"__esModule",{value:!0})} else {delete e.default}});
js/image.js
export class Image {
// Class property initialization with default values.
// The DOM property holds references to the main and inner elements of the image component.
DOM = {
el: null, // Holds the reference to the main DOM element with class 'content__img'.
inner: null, // Holds the reference to the inner DOM element with class 'content__img-inner'.
};
// Default style properties for the image, initialized with initial values.
defaultStyle = {
scale: 1, // Scale factor of the image, initialized to 1 (original size).
x: 0, // Horizontal position of the image, initialized to 0.
y: 0, // Vertical position of the image, initialized to 0.
opacity: 0 // Opacity of the image, initialized to 0 (completely transparent).
};
// Property to hold the animation timeline for the image.
timeline = null;
// Holds the bounding rectangle of the image element.
rect = null;
/**
* Constructor for the Image class. Initializes the instance, sets up DOM references, and binds events.
* @param {HTMLElement} DOM_el - The main DOM element for the image, expected to have a child with class 'content__img-inner'.
*/
constructor(DOM_el) {
// Assign the provided DOM element to the 'el' property of the 'DOM' object.
this.DOM.el = DOM_el;
// Find and assign the inner element (with class 'content__img-inner') to the 'inner' property of the 'DOM' object.
this.DOM.inner = this.DOM.el.querySelector('.content__img-inner');
// Call the getRect method to calculate and store the size and position of the image element.
this.getRect();
// Call the initEvents method to set up event listeners for the image element.
this.initEvents();
}
/**
* The initEvents method sets up event handlers for the image element, particularly for the window resize event.
* @returns {void}
*/
initEvents() {
// Define the resize method to reset image styles and recalculate its size and position on window resize.
this.resize = () => {
// Reset the image styles to default values using GSAP.
gsap.set(this.DOM.el, this.defaultStyle);
// Recalculate and update the size and position of the image element.
this.getRect();
};
// Add a window resize event listener that calls the defined resize method to handle image adjustments on window resize.
window.addEventListener('resize', () => this.resize());
}
/**
* The getRect method calculates and stores the size and position of the image element in the 'rect' property.
* @returns {void}
*/
getRect() {
// Use the getBoundingClientRect method to calculate and assign the size and position of the image element to the 'rect' property.
this.rect = this.DOM.el.getBoundingClientRect();
}
}js/imagesloaded.pkgd.min.js
/*!
* imagesLoaded PACKAGED v5.0.0
* JavaScript is all like "You images are done yet or what?"
* MIT License
*/
!function(t,e){"object"==typeof module&&module.exports?module.exports=e():t.EvEmitter=e()}("undefined"!=typeof window?window:this,(function(){function t(){}let e=t.prototype;return e.on=function(t,e){if(!t||!e)return this;let i=this._events=this._events||{},s=i[t]=i[t]||[];return s.includes(e)||s.push(e),this},e.once=function(t,e){if(!t||!e)return this;this.on(t,e);let i=this._onceEvents=this._onceEvents||{};return(i[t]=i[t]||{})[e]=!0,this},e.off=function(t,e){let i=this._events&&this._events[t];if(!i||!i.length)return this;let s=i.indexOf(e);return-1!=s&&i.splice(s,1),this},e.emitEvent=function(t,e){let i=this._events&&this._events[t];if(!i||!i.length)return this;i=i.slice(0),e=e||[];let s=this._onceEvents&&this._onceEvents[t];for(let n of i){s&&s[n]&&(this.off(t,n),delete s[n]),n.apply(this,e)}return this},e.allOff=function(){return delete this._events,delete this._onceEvents,this},t})),
/*!
* imagesLoaded v5.0.0
* JavaScript is all like "You images are done yet or what?"
* MIT License
*/
function(t,e){"object"==typeof module&&module.exports?module.exports=e(t,require("ev-emitter")):t.imagesLoaded=e(t,t.EvEmitter)}("undefined"!=typeof window?window:this,(function(t,e){let i=t.jQuery,s=t.console;function n(t,e,o){if(!(this instanceof n))return new n(t,e,o);let r=t;var h;("string"==typeof t&&(r=document.querySelectorAll(t)),r)?(this.elements=(h=r,Array.isArray(h)?h:"object"==typeof h&&"number"==typeof h.length?[...h]:[h]),this.options={},"function"==typeof e?o=e:Object.assign(this.options,e),o&&this.on("always",o),this.getImages(),i&&(this.jqDeferred=new i.Deferred),setTimeout(this.check.bind(this))):s.error(`Bad element for imagesLoaded ${r||t}`)}n.prototype=Object.create(e.prototype),n.prototype.getImages=function(){this.images=[],this.elements.forEach(this.addElementImages,this)};const o=[1,9,11];n.prototype.addElementImages=function(t){"IMG"===t.nodeName&&this.addImage(t),!0===this.options.background&&this.addElementBackgroundImages(t);let{nodeType:e}=t;if(!e||!o.includes(e))return;let i=t.querySelectorAll("img");for(let t of i)this.addImage(t);if("string"==typeof this.options.background){let e=t.querySelectorAll(this.options.background);for(let t of e)this.addElementBackgroundImages(t)}};const r=/url\((['"])?(.*?)\1\)/gi;function h(t){this.img=t}function d(t,e){this.url=t,this.element=e,this.img=new Image}return n.prototype.addElementBackgroundImages=function(t){let e=getComputedStyle(t);if(!e)return;let i=r.exec(e.backgroundImage);for(;null!==i;){let s=i&&i[2];s&&this.addBackground(s,t),i=r.exec(e.backgroundImage)}},n.prototype.addImage=function(t){let e=new h(t);this.images.push(e)},n.prototype.addBackground=function(t,e){let i=new d(t,e);this.images.push(i)},n.prototype.check=function(){if(this.progressedCount=0,this.hasAnyBroken=!1,!this.images.length)return void this.complete();let t=(t,e,i)=>{setTimeout((()=>{this.progress(t,e,i)}))};this.images.forEach((function(e){e.once("progress",t),e.check()}))},n.prototype.progress=function(t,e,i){this.progressedCount++,this.hasAnyBroken=this.hasAnyBroken||!t.isLoaded,this.emitEvent("progress",[this,t,e]),this.jqDeferred&&this.jqDeferred.notify&&this.jqDeferred.notify(this,t),this.progressedCount===this.images.length&&this.complete(),this.options.debug&&s&&s.log(`progress: ${i}`,t,e)},n.prototype.complete=function(){let t=this.hasAnyBroken?"fail":"done";if(this.isComplete=!0,this.emitEvent(t,[this]),this.emitEvent("always",[this]),this.jqDeferred){let t=this.hasAnyBroken?"reject":"resolve";this.jqDeferred[t](this)}},h.prototype=Object.create(e.prototype),h.prototype.check=function(){this.getIsImageComplete()?this.confirm(0!==this.img.naturalWidth,"naturalWidth"):(this.proxyImage=new Image,this.img.crossOrigin&&(this.proxyImage.crossOrigin=this.img.crossOrigin),this.proxyImage.addEventListener("load",this),this.proxyImage.addEventListener("error",this),this.img.addEventListener("load",this),this.img.addEventListener("error",this),this.proxyImage.src=this.img.currentSrc||this.img.src)},h.prototype.getIsImageComplete=function(){return this.img.complete&&this.img.naturalWidth},h.prototype.confirm=function(t,e){this.isLoaded=t;let{parentNode:i}=this.img,s="PICTURE"===i.nodeName?i:this.img;this.emitEvent("progress",[this,s,e])},h.prototype.handleEvent=function(t){let e="on"+t.type;this[e]&&this[e](t)},h.prototype.onload=function(){this.confirm(!0,"onload"),this.unbindEvents()},h.prototype.onerror=function(){this.confirm(!1,"onerror"),this.unbindEvents()},h.prototype.unbindEvents=function(){this.proxyImage.removeEventListener("load",this),this.proxyImage.removeEventListener("error",this),this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},d.prototype=Object.create(h.prototype),d.prototype.check=function(){this.img.addEventListener("load",this),this.img.addEventListener("error",this),this.img.src=this.url,this.getIsImageComplete()&&(this.confirm(0!==this.img.naturalWidth,"naturalWidth"),this.unbindEvents())},d.prototype.unbindEvents=function(){this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},d.prototype.confirm=function(t,e){this.isLoaded=t,this.emitEvent("progress",[this,this.element,e])},n.makeJQueryPlugin=function(e){(e=e||t.jQuery)&&(i=e,i.fn.imagesLoaded=function(t,e){return new n(this,t,e).jqDeferred.promise(i(this))})},n.makeJQueryPlugin(),n}));js/utils.js
const body = document.body;
const docEl = document.documentElement;
/**
* Preloads images specified by the CSS selector.
* @function
* @param {string} [selector='img'] - CSS selector for target images.
* @returns {Promise} - Resolves when all specified images are loaded.
*/
const preloadImages = (selector = 'img') => {
return new Promise((resolve) => {
// The imagesLoaded library is used to ensure all images (including backgrounds) are fully loaded.
imagesLoaded(document.querySelectorAll(selector), {background: true}, resolve);
});
};
/**
* Performs linear interpolation between two numbers.
* @function
* @param {number} a - The starting value.
* @param {number} b - The target value.
* @param {number} n - Normalization factor, typically between 0 and 1.
* @returns {number} - Result of the linear interpolation.
*/
const lerp = (a, b, n) => (1 - n) * a + n * b;
/**
* Calculates the Euclidean distance between two points in a 2D space.
* @function
* @param {number} x1 - X-coordinate of the first point.
* @param {number} y1 - Y-coordinate of the first point.
* @param {number} x2 - X-coordinate of the second point.
* @param {number} y2 - Y-coordinate of the second point.
* @returns {number} - Distance between the two points.
*/
const distance = (x1, y1, x2, y2) => Math.hypot(x2 - x1, y2 - y1);
/**
* Retrieves the current position from a mouse or touch event.
* @function
* @param {Event} ev - The mouse or touch event.
* @returns {Object} - Object containing the x and y coordinates of the cursor or finger.
*/
const getPointerPos = ev => {
let posx = 0;
let posy = 0;
// If the event is not provided, use the global window event object.
if (!ev) ev = window.event;
// Handle touch events
if (ev.touches) {
if (ev.touches.length > 0) { // Check if there are any touches available
posx = ev.touches[0].pageX;
posy = ev.touches[0].pageY;
}
}
// Handle mouse events
else if (ev.pageX || ev.pageY) {
posx = ev.pageX;
posy = ev.pageY;
}
else if (ev.clientX || ev.clientY) {
posx = ev.clientX + body.scrollLeft + docEl.scrollLeft;
posy = ev.clientY + body.scrollTop + docEl.scrollTop;
}
// Return the position.
return {x: posx, y: posy};
}
/**
* Computes the distance between current and last recorded mouse positions.
* @function
* @param {Object} mousePos - Current mouse position with x and y coordinates.
* @param {Object} lastMousePos - Last recorded mouse position with x and y coordinates.
* @returns {number} - Distance between the two mouse positions.
*/
const getMouseDistance = (mousePos, lastMousePos) => {
return distance(mousePos.x, mousePos.y, lastMousePos.x, lastMousePos.y);
};
/**
* Computes the new position in an array after moving by a given offset.
* The array is treated as circular, meaning subtracting from the beginning
* wraps to the end of the array.
*
* @function
* @param {number} position - The starting position in the array.
* @param {number} offset - The number of positions to move backward.
* @param {Array} arr - The array in which to compute the new position.
* @returns {number} The new position in the array after moving by the offset.
*/
const getNewPosition = (position, offset, arr) => {
// Ensure offset is non-negative and is within the range of the array's length
const realOffset = Math.abs(offset) % arr.length;
// Check if subtracting the offset stays within the array's bounds
if (position - realOffset >= 0) {
return position - realOffset;
} else {
// If not, wrap around to the end of the array and compute the new position
return arr.length - (realOffset - position);
}
};
/**
* Set the clip path for each of the clipInnerElements based on the provided grid dimensions.
* @param {Array} clipInnerElements - The list of elements to set the clip paths on.
* @param {number} numRows - The number of rows in the grid.
* @param {number} numCols - The number of columns in the grid.
*/
const setClipPath = (clipInnerElements, numRows, numCols) => {
if (clipInnerElements.length !== numRows * numCols) {
console.error('Mismatch between provided grid dimensions and number of elements.');
return;
}
for (let i = 0; i < numRows; i++) {
for (let j = 0; j < numCols; j++) {
const idx = i * numCols + j;
const top = (100 / numRows) * i + '%';
const bottom = (100 / numRows) * (i + 1) + '%';
const left = (100 / numCols) * j + '%';
const right = (100 / numCols) * (j + 1) + '%';
const clipPathValue = `polygon(${left} ${top}, ${right} ${top}, ${right} ${bottom}, ${left} ${bottom})`;
clipInnerElements[idx].style.clipPath = clipPathValue;
}
}
}
// Exporting utility functions for use in other modules.
export {
preloadImages,
lerp,
distance,
getPointerPos,
getMouseDistance,
getNewPosition,
setClipPath
};
Media credits and license evidence실행 안내·자료
README.md
## Credits
- Images generated with [Midjourney](https://midjourney.com)
## License
[MIT](LICENSE)
Made with :blue_heart: by [Codrops](http://www.codrops.com)
LICENSE실행 안내·자료
MIT License
Copyright (c) 2009 - 2022 [Codrops](https://tympanus.net/codrops)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
BEHIND THE EXAMPLE
이 장면을 만드는 원리
이미지 풀을 순환하며 자취 재사용
반복 입력에서 현재 의도와 전환의 종료·취소 책임을 명시합니다.
- 이 예제에서는
- ImageTrail은 포인터와 이전 위치의 거리를 보고 다음 이미지를 선택합니다. imgPosition을 순환시키고 각 이미지의 타임라인으로 나타남·축소·사라짐을 관리합니다.
코드와 함께 확인하기
코드에서 찾기
showNextImageimageTrail.js이미지 인덱스와 zIndex를 올려 다음 자취를 재사용합니다.
직접 해보기
이미지 수보다 많은 자취를 짧은 시간에 만든 뒤 포인터를 멈춥니다.
살펴볼 변화재사용 중 이전 종료가 새 이미지를 숨기는지, 활성 이미지 수와 최종 정리 상태가 맞는지 확인해야 합니다.