diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..1975376 Binary files /dev/null and b/.DS_Store differ diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..dfe0770 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,2 @@ +# Auto detect text files and perform LF normalization +* text=auto diff --git a/.gitignore b/.gitignore new file mode 100755 index 0000000..863b6e0 --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +node_modules +.cache +.parcel-cache +package-lock.json \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..b045fc8 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +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. diff --git a/README.md b/README.md new file mode 100755 index 0000000..3172525 --- /dev/null +++ b/README.md @@ -0,0 +1,31 @@ +# SVG Clip-Path Text Animations + +Some experiments with on-scroll typography effects using SVG clip-paths. + +![Image Title](https://tympanus.net/codrops/wp-content/uploads/2024/01/clippathtext.jpg) + +[Article on Codrops](https://tympanus.net/codrops/?p=75256) + +[Demo](http://tympanus.net/Development/TextClipScroll/) + +## Installation + +Run this demo on a [local server](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server). + +## Credits + +- Images generated with [Midjourney](https://midjourney.com) + +## Misc + +Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [GitHub](https://github.com/codrops), [Instagram](https://www.instagram.com/codropsss/) + +## License +[MIT](LICENSE) + +Made with :blue_heart: by [Codrops](http://www.codrops.com) + + + + + diff --git a/css/base.css b/css/base.css new file mode 100644 index 0000000..0dddd56 --- /dev/null +++ b/css/base.css @@ -0,0 +1,380 @@ +*, +*::after, +*::before { + box-sizing: border-box; +} + +:root { + font-size: 16px; + --color-text: #f3f3f3; + --color-bg: #0f0e0e; + --color-link: #f3f3f3; + --color-link-hover: #e35384; + --page-padding: 2rem 3rem; +} + +@font-face { + font-family: 'blackoutregular'; + src: url('../fonts/blackout-webfont.woff2') format('woff2'), + url('../fonts/blackout-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'hacked_crtregular'; + src: url('../fonts/hacked_crt-webfont.woff2') format('woff2'), + url('../fonts/hacked_crt-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'h19a_lunaluna'; + src: url('../fonts/h19a-luna-webfont.woff2') format('woff2'), + url('../fonts/h19a-luna-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'capsule3regular'; + src: url('../fonts/capsule3-webfont.woff2') format('woff2'), + url('../fonts/capsule3-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +html, body { + width: 100%; + overflow-x: hidden; +} + +body { + margin: 0; + color: var(--color-text); + background-color: var(--color-bg); + font-family: "oculi-display", serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* Page Loader */ +.js .loading::before, +.js .loading::after { + content: ''; + position: fixed; + z-index: 5000; +} + +.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; +} + +a:focus { + outline: none; +} + +a:focus-visible { + outline: 2px solid red; +} + +.unbutton { + background: none; + border: 0; + padding: 0; + margin: 0; + font: inherit; + cursor: pointer; +} + +.unbutton:focus { + outline: none; +} + +.frame { + padding: var(--page-padding); + position: relative; + display: grid; + z-index: 1000; + width: 100%; + height: 100%; + grid-row-gap: 1rem; + grid-column-gap: 2rem; + pointer-events: none; + justify-items: start; + grid-template-columns: auto auto auto 1fr; + align-items: start; + justify-content: start; + grid-template-areas: 'prev back sub sponsor' 'title title title title'; +} + +.frame #cdawrap { + justify-self: start; +} + +.frame a { + pointer-events: auto; +} + +.frame__title { + grid-area: title; + font-size: clamp(2rem,10vw,4rem); + font-weight: 100; + line-height: 1; + margin: 2rem 0 0 0; +} + +.frame__back { + grid-area: back; + justify-self: start; +} + +.frame__prev { + grid-area: prev; + justify-self: start; +} + +.frame__sub { + grid-area: sub; +} + +.frame__demos { + grid-area: demos; + display: flex; + gap: 1rem; +} + +.content { + min-height: 60vh; + margin: 15vh auto; + display: grid; + place-items: center; +} + +.content--flex { + display: flex; + justify-content: center; +} + +.content--more { + margin-top: 40vh; +} + +.content--text { + place-items: initial; + align-content: center; + max-width: 950px; + padding: 0 10vw; + margin: 0 0 0 auto; +} + +.content > h4 { + background-color: #f3ec78; + background-image: linear-gradient(172deg, #e35384, #e8a53c); + background-size: 100%; + -webkit-background-clip: text; + -moz-background-clip: text; + -webkit-text-fill-color: transparent; + -moz-text-fill-color: transparent; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif; +} + +.content > p { + font-weight: 300; + font-size: clamp(1.5rem,5vw,2.25rem); + line-height: 1.25; +} + +.content__title { + font-size: 2rem; + font-weight: normal; +} + +.poster { + width: 100%; + height: 100vh; + display: grid; + place-items: center; + --offset-x: 0%; + --offset-y: 0%; +} + +.poster--half { + height: 28vw; +} + +.poster__inner { + width: calc(100% + var(--offset-x) * 2); + height: calc(100% + var(--offset-y) * 2); + background-size: cover; + background-position: 50% 50%; +} + +.poster__inner video { + width: 100%; + height: 100%; + object-fit: fill; +} + +.poster__inner--fixed { + background-attachment: fixed; +} + +.font-1 { + font-family: "blackoutregular"; + font-weight: 400; +} + +.font-2 { + font-family: "hacked_crtregular", sans-serif; + font-weight: 400; + text-transform: uppercase; +} + +.font-3 { + font-family: "macula-solid", sans-serif; + font-weight: 500; +} + +.font-4 { + font-family: "macula-line", sans-serif; + font-weight: 400; +} + +.font-5 { + font-family: "octothorpe-pe", sans-serif; + font-weight: 400; +} + +.font-6 { + font-family: "h19a_lunaluna", sans-serif; + font-weight: 400; +} + +.font-7 { + font-family: "capsule3regular", sans-serif; + font-weight: 400; +} + +.font-8 { + font-family: "flegrei", sans-serif; + font-weight: 400; +} + +.font-9 { + font-family: gigantic, sans-serif; + font-weight: 900; + text-transform: uppercase; +} + +.size-1 { + font-size: 70vw; +} + +.size-2 { + font-size: 50vw; +} + +.size-3 { + font-size: 30vw; +} + +.size-4 { + font-size: 20vh; +} + +svg { + opacity: 0; + position: absolute; + pointer-events: none; + width: 100%; + height: 100vh; + overflow: visible; +} + +.h-200 { + height: 200vh; +} + +.w-25 { + width: 50vw; +} + +svg text { + line-height: 1; +} + +.credits { + font-size: 2rem; + text-align: center; + margin: 50vh auto; +} + +.card-wrap { + margin-top: 5vh; + display: grid; + grid-gap: 2rem; + grid-auto-flow: row; + grid-template-columns: 250px; +} + +.card__image { + display: block; + border-radius: 7px; + background-size: cover; + background-position: 50% 50%; + width: 100%; + height: auto; + aspect-ratio: 4 / 3; +} + +.card__title { + font-weight: normal; + font-size: 1rem; +} + +@media screen and (min-width: 53em) { + .card-wrap { + grid-template-columns: repeat(3,250px); + } + .w-25 { + width: 25vw; + } +} diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..6d0507c Binary files /dev/null and b/favicon.ico differ diff --git a/fonts/.DS_Store b/fonts/.DS_Store new file mode 100644 index 0000000..b252951 Binary files /dev/null and b/fonts/.DS_Store differ diff --git a/fonts/BLACKOUT.TTF b/fonts/BLACKOUT.TTF new file mode 100644 index 0000000..ca3cdbe Binary files /dev/null and b/fonts/BLACKOUT.TTF differ diff --git a/fonts/CharaAOE.ttf b/fonts/CharaAOE.ttf new file mode 100644 index 0000000..c822519 Binary files /dev/null and b/fonts/CharaAOE.ttf differ diff --git a/fonts/GEIST_KNT.ttf b/fonts/GEIST_KNT.ttf new file mode 100644 index 0000000..206295b Binary files /dev/null and b/fonts/GEIST_KNT.ttf differ diff --git a/fonts/H19A-Luna.otf b/fonts/H19A-Luna.otf new file mode 100644 index 0000000..35b9b50 Binary files /dev/null and b/fonts/H19A-Luna.otf differ diff --git a/fonts/Hacked CRT.ttf b/fonts/Hacked CRT.ttf new file mode 100644 index 0000000..3c1e254 Binary files /dev/null and b/fonts/Hacked CRT.ttf differ diff --git a/fonts/Symvola Duo.ttf b/fonts/Symvola Duo.ttf new file mode 100644 index 0000000..c237008 Binary files /dev/null and b/fonts/Symvola Duo.ttf differ diff --git a/fonts/Symvola Trio.ttf b/fonts/Symvola Trio.ttf new file mode 100644 index 0000000..2f3c716 Binary files /dev/null and b/fonts/Symvola Trio.ttf differ diff --git a/fonts/Symvola Uno.ttf b/fonts/Symvola Uno.ttf new file mode 100644 index 0000000..9fddde5 Binary files /dev/null and b/fonts/Symvola Uno.ttf differ diff --git a/fonts/blackout-webfont.woff b/fonts/blackout-webfont.woff new file mode 100644 index 0000000..ab36b40 Binary files /dev/null and b/fonts/blackout-webfont.woff differ diff --git a/fonts/blackout-webfont.woff2 b/fonts/blackout-webfont.woff2 new file mode 100644 index 0000000..5e217d7 Binary files /dev/null and b/fonts/blackout-webfont.woff2 differ diff --git a/fonts/block_out.ttf b/fonts/block_out.ttf new file mode 100644 index 0000000..98f4ed1 Binary files /dev/null and b/fonts/block_out.ttf differ diff --git a/fonts/capsule3-webfont.woff b/fonts/capsule3-webfont.woff new file mode 100644 index 0000000..32bd133 Binary files /dev/null and b/fonts/capsule3-webfont.woff differ diff --git a/fonts/capsule3-webfont.woff2 b/fonts/capsule3-webfont.woff2 new file mode 100644 index 0000000..a5e03ab Binary files /dev/null and b/fonts/capsule3-webfont.woff2 differ diff --git a/fonts/capsule3.ttf b/fonts/capsule3.ttf new file mode 100644 index 0000000..378b228 Binary files /dev/null and b/fonts/capsule3.ttf differ diff --git a/fonts/darktech_ldr.ttf b/fonts/darktech_ldr.ttf new file mode 100644 index 0000000..273716f Binary files /dev/null and b/fonts/darktech_ldr.ttf differ diff --git a/fonts/geist_knt-webfont.woff b/fonts/geist_knt-webfont.woff new file mode 100644 index 0000000..a976a31 Binary files /dev/null and b/fonts/geist_knt-webfont.woff differ diff --git a/fonts/geist_knt-webfont.woff2 b/fonts/geist_knt-webfont.woff2 new file mode 100644 index 0000000..72a4d82 Binary files /dev/null and b/fonts/geist_knt-webfont.woff2 differ diff --git a/fonts/h19a-luna-webfont.woff b/fonts/h19a-luna-webfont.woff new file mode 100644 index 0000000..fd2742e Binary files /dev/null and b/fonts/h19a-luna-webfont.woff differ diff --git a/fonts/h19a-luna-webfont.woff2 b/fonts/h19a-luna-webfont.woff2 new file mode 100644 index 0000000..5349f31 Binary files /dev/null and b/fonts/h19a-luna-webfont.woff2 differ diff --git a/fonts/hacked_crt-webfont.woff b/fonts/hacked_crt-webfont.woff new file mode 100644 index 0000000..5053a45 Binary files /dev/null and b/fonts/hacked_crt-webfont.woff differ diff --git a/fonts/hacked_crt-webfont.woff2 b/fonts/hacked_crt-webfont.woff2 new file mode 100644 index 0000000..f878db2 Binary files /dev/null and b/fonts/hacked_crt-webfont.woff2 differ diff --git a/fonts/symvola.zip b/fonts/symvola.zip new file mode 100644 index 0000000..67dc025 Binary files /dev/null and b/fonts/symvola.zip differ diff --git a/img/.DS_Store b/img/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/img/.DS_Store differ diff --git a/img/1.jpg b/img/1.jpg new file mode 100644 index 0000000..2d71530 Binary files /dev/null and b/img/1.jpg differ diff --git a/img/1.png b/img/1.png new file mode 100644 index 0000000..c94bca1 Binary files /dev/null and b/img/1.png differ diff --git a/img/10.jpg b/img/10.jpg new file mode 100644 index 0000000..0007cc4 Binary files /dev/null and b/img/10.jpg differ diff --git a/img/2.jpg b/img/2.jpg new file mode 100644 index 0000000..7eeb504 Binary files /dev/null and b/img/2.jpg differ diff --git a/img/2.png b/img/2.png new file mode 100644 index 0000000..1bf6a64 Binary files /dev/null and b/img/2.png differ diff --git a/img/3.jpg b/img/3.jpg new file mode 100644 index 0000000..d1e6f74 Binary files /dev/null and b/img/3.jpg differ diff --git a/img/3.png b/img/3.png new file mode 100644 index 0000000..424a5d4 Binary files /dev/null and b/img/3.png differ diff --git a/img/4.jpg b/img/4.jpg new file mode 100644 index 0000000..baa5fe7 Binary files /dev/null and b/img/4.jpg differ diff --git a/img/5.jpg b/img/5.jpg new file mode 100644 index 0000000..718e38e Binary files /dev/null and b/img/5.jpg differ diff --git a/img/6.jpg b/img/6.jpg new file mode 100644 index 0000000..edf428f Binary files /dev/null and b/img/6.jpg differ diff --git a/img/7.jpg b/img/7.jpg new file mode 100644 index 0000000..a6835ba Binary files /dev/null and b/img/7.jpg differ diff --git a/img/8.jpg b/img/8.jpg new file mode 100644 index 0000000..817b52b Binary files /dev/null and b/img/8.jpg differ diff --git a/img/9.jpg b/img/9.jpg new file mode 100644 index 0000000..d66e9d9 Binary files /dev/null and b/img/9.jpg differ diff --git a/img/dragon.mp4 b/img/dragon.mp4 new file mode 100644 index 0000000..1dc0ad1 Binary files /dev/null and b/img/dragon.mp4 differ diff --git a/img/dragon.webm b/img/dragon.webm new file mode 100644 index 0000000..1f53571 Binary files /dev/null and b/img/dragon.webm differ diff --git a/index.html b/index.html new file mode 100755 index 0000000..d5a2295 --- /dev/null +++ b/index.html @@ -0,0 +1,304 @@ + + + + + + On-Scroll Text Animations with SVG Clip-Path | Codrops + + + + + + + + + + +
+
+

On-Scroll
Text Clip-Path
Animations

+ Article + Previous demo + Subscribe +
+
+ + + X + o + g + o + x + y + + + X + o + g + o + x + y + + +
+
+
+
+
+
+
+
+

Heart of adversity

+

In the heart of adversity, the patient dragon reveals the alchemy of strength: to endure the fiercest storms with unwavering calm, for within the crucible of patience, resilience is forged into an indomitable force.

+
+
+ + + X + o + g + o + x + y + e + n + u + x + X + o + g + o + x + y + e + n + u + x + + + X + o + g + o + x + y + e + n + u + x + X + o + g + o + x + y + e + n + u + x + + +
+
+
+
+
+
+
+
+

Caverns of introspection

+

Within the caverns of introspection, the patient dragon discovers the treasures of self-awareness, teaching that the journey inward, undertaken with deliberate slowness, unveils the hidden jewels of enlightenment, shimmering in the recesses of the soul.

+
+
+ + + M + o + m + o + s + o + + +
+
+
+
+ +
+

Seasons change

+

As the seasons change, so does the patient dragon adapt, its scales reflecting the myriad hues of nature's cycle. It imparts the lesson that, in embracing the ebb and flow of life's transitions, one discovers a harmonious dance with the cosmic rhythms that shape the universe.

+
+
+ + + n + o + n + o + n + + +
+
+
+
+
+

Mist-shrouded valleys

+

Through the mist-shrouded valleys, the patient dragon soars, leaving ephemeral trails of wisdom in its wake. It reveals that, like the ever-shifting mists, the only constant is change, and in patiently navigating the ethereal currents, one finds clarity in the midst of life's uncertainties.

+
+
+ + + s + o + x + o + s + + +
+
+
+
+
+

The world below

+

High atop the cliffs, the patient dragon observes the world below with eyes that mirror the vastness of the cosmos. From this celestial vantage point, it imparts the understanding that true vision arises not from a gaze fixed on the horizon but from a gaze that encompasses the boundless expanse of the present moment.

+
+
+ + + b + y + o + s + o + x + + +
+
+
+
+ +
+

Serene sanctuary

+

In the serene sanctuary of the Patient Dragon, where ancient whispers met the modern hum, Liúlóng embraced tranquility amidst the chaos. Opting for a path less hurried, the dragon migrated to the fediverse—a decentralized haven where diversity bloomed, and open discourse prevailed.

+
+
+ + + k + e + l + p + f + o + r + e + s + t + s + + +
+
+
+
+
+

Calm scales

+

With calm scales, it soared into a digital realm echoing the patient strength found in interconnected communities, a sanctuary far from the clamor of mainstream platforms.

+
+
+ + + l + i + u + l + o + n + g + + +
+
+
+ + + g + n + o + l + u + i + l + + +
+
+
+
+
+

Ancient willow

+

Beside the ancient willow, the patient dragon weaves tales of resilience, its wings brushing against the wisps of time. It teaches that, much like the willow bending but never breaking in the wind, the strength to endure lies in the supple flexibility of the spirit, shaped by the patient hands of experience.

+
+
+ + + m + o + m + o + m + + +
+
+ +
+
+
+
+

Silent narrative

+

In the silent narrative woven by the patient dragon, a reminder emerges—that the hands of experience, marked by the passage of time, sculpt the spirit into a vessel of enduring strength, capable of navigating the ever-shifting currents of the cosmic dance.

+
+
+

More you might like

+
+
+ +

On-Scroll Column & Row Animations

+
+
+ +

On-Scroll Perspective Grid Animations

+
+
+ +

On-Scroll SVG Filter Effect

+
+
+
+

Made by @codrops

+
+ + + + + + + + \ No newline at end of file diff --git a/js/.DS_Store b/js/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/js/.DS_Store differ diff --git a/js/ScrollTrigger.min.js b/js/ScrollTrigger.min.js new file mode 100644 index 0000000..070c4cd --- /dev/null +++ b/js/ScrollTrigger.min.js @@ -0,0 +1,11 @@ +/*! + * ScrollTrigger 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(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function _defineProperties(e,t){for(var r=0;r=Math.abs(r)?t:r}function O(){(Ae=Se.core.globals().ScrollTrigger)&&Ae.core&&function _integrate(){var e=Ae.core,r=e.bridge||{},t=e._scrollers,n=e._proxies;t.push.apply(t,ze),n.push.apply(n,Ie),ze=t,Ie=n,i=function _bridge(e,t){return r[e](t)}}()}function P(e){return(Se=e||r())&&"undefined"!=typeof document&&document.body&&(Te=window,Pe=(Ce=document).documentElement,Me=Ce.body,t=[Te,Ce,Pe,Me],Se.utils.clamp,De=Se.core.context||function(){},Oe="onpointerenter"in Me?"pointer":"mouse",Ee=E.isTouch=Te.matchMedia&&Te.matchMedia("(hover: none), (pointer: coarse)").matches?1:"ontouchstart"in Te||0=o,n=Math.abs(t)>=o;k&&(r||n)&&k(se,e,t,be,me),r&&(m&&0Math.abs(t)?"x":"y",ie=!0),"y"!==ae&&(be[2]+=e,se._vx.update(e,!0)),"x"!==ae&&(me[2]+=t,se._vy.update(t,!0)),n?ee=ee||requestAnimationFrame(bf):bf()}function ef(e){if(!_e(e,1)){var t=(e=M(e,s)).clientX,r=e.clientY,n=t-se.x,o=r-se.y,i=se.isDragging;se.x=t,se.y=r,(i||Math.abs(se.startX-t)>=a||Math.abs(se.startY-r)>=a)&&(h&&(re=!0),i||(se.isDragging=!0),df(n,o),i||p&&p(se))}}function hf(e){return e.touches&&1=e)return a[n];return a[n-1]}for(n=a.length,e+=r;n--;)if(a[n]<=e)return a[n];return a[0]}:function(e,t,r){void 0===r&&(r=.001);var n=i(e);return!t||Math.abs(n-e)r&&(n*=t/100),e=e.substr(0,r-1)),e=n+(e in q?q[e]*t:~e.indexOf("%")?parseFloat(e)*t/100:parseFloat(e)||0)}return e}function Bb(e,t,r,n,o,i,a,s){var l=o.startColor,c=o.endColor,u=o.fontSize,f=o.indent,d=o.fontWeight,p=Xe.createElement("div"),g=Ja(r)||"fixed"===z(r,"pinType"),h=-1!==e.indexOf("scroller"),v=g?We:r,b=-1!==e.indexOf("start"),m=b?l:c,y="border-color:"+m+";font-size:"+u+";color:"+m+";font-weight:"+d+";pointer-events:none;white-space:nowrap;font-family:sans-serif,Arial;z-index:1000;padding:4px 8px;border-width:0;border-style:solid;";return y+="position:"+((h||s)&&g?"fixed;":"absolute;"),!h&&!s&&g||(y+=(n===He?D:I)+":"+(i+parseFloat(f))+"px;"),a&&(y+="box-sizing:border-box;text-align:left;width:"+a.offsetWidth+"px;"),p._isStart=b,p.setAttribute("class","gsap-marker-"+e+(t?" marker-"+t:"")),p.style.cssText=y,p.innerText=t||0===t?e+"-"+t:e,v.children[0]?v.insertBefore(p,v.children[0]):v.appendChild(p),p._offset=p["offset"+n.op.d2],H(p,0,n,b),p}function Gb(){return 34We.clientWidth)||(ze.cache++,v?k=k||requestAnimationFrame(Q):Q(),st||V("scrollStart"),st=at())}function Ib(){y=Ne.innerWidth,m=Ne.innerHeight}function Jb(){ze.cache++,je||h||Xe.fullscreenElement||Xe.webkitFullscreenElement||b&&y===Ne.innerWidth&&!(Math.abs(Ne.innerHeight-m)>.25*Ne.innerHeight)||c.restart(!0)}function Mb(){return vb(re,"scrollEnd",Mb)||Pt(!0)}function Pb(e){for(var t=0;tt)&&e.setPositions(e.start,Math.max(e.start+1,t),!0)}),r.forEach(function(e){return e&&e.render&&e.render(-1)}),ze.forEach(function(e){Ra(e)&&(e.smooth&&requestAnimationFrame(function(){return e.target.style.scrollBehavior="smooth"}),e.rec&&e(e.rec))}),Rb(_,1),c.pause(),Ct++,Q(rt=2),kt.forEach(function(e){return Ra(e.vars.onRefresh)&&e.vars.onRefresh(e)}),rt=re.isRefreshing=!1,V("refresh")}else ub(re,"scrollEnd",Mb)},j=0,Mt=1,Q=function _updateAll(e){if(!rt||2===e){re.isUpdating=!0,ot&&ot.update(0);var t=kt.length,r=at(),n=50<=r-T,o=t&&kt[0].scroll();if(Mt=o=F})},ke.update=function(e,t,r){if(!de||r||e){var n,o,i,a,s,l,c,u=!0===rt?re:ke.scroll(),f=e?0:(u-D)/N,d=f<0?0:1=Oa(be,he),fe)if(e||!n&&!l)lc(ae,V);else{var g=_t(ae,!0),h=u-D;lc(ae,We,g.top+(he===He?h:0)+xt,g.left+(he===He?0:h)+xt)}Et(n||l?W:G),Z&&d<1&&n||b(j+(1!==d||l?0:Q))}}else b(Ga(j+Q*d));!ue||A.tween||je||it||te.restart(!0),T&&(s||ce&&d&&(d<1||!tt))&&Ge(T.targets).forEach(function(e){return e.classList[n||ce?"add":"remove"](T.className)}),!k||ve||e||k(ke),a&&!je?(ve&&(c&&("complete"===i?O.pause().totalProgress(1):"reset"===i?O.restart(!0).pause():"restart"===i?O.restart(!0):O[i]()),k&&k(ke)),!s&&tt||(C&&s&&Va(ke,C),xe[o]&&Va(ke,xe[o]),ce&&(1===d?ke.kill(!1,1):xe[o]=0),s||xe[o=1===d?1:3]&&Va(ke,xe[o])),pe&&!n&&Math.abs(ke.getVelocity())>(Sa(pe)?pe:2500)&&(Ua(ke.callbackAnimation),ee?ee.progress(1):Ua(O,"reverse"===i?1:!d,1))):ve&&k&&!je&&k(ke)}if(x){var v=de?u/de.duration()*(de._caScrollDist||0):u;y(v+(q._isFlipped?1:0)),x(v)}S&&S(-u/de.duration()*(de._caScrollDist||0))}},ke.enable=function(e,t){ke.enabled||(ke.enabled=!0,ub(be,"resize",Jb),me||ub(be,"scroll",Hb),Te&&ub(ScrollTrigger,"refreshInit",Te),!1!==e&&(ke.progress=Oe=0,R=B=Me=Ae()),!1!==t&&ke.refresh())},ke.getTween=function(e){return e&&A?A.tween:ee},ke.setPositions=function(e,t,r,n){if(de){var o=de.scrollTrigger,i=de.duration(),a=o.end-o.start;e=o.start+a*e/i,t=o.start+a*t/i}ke.refresh(!1,!1,{start:Ba(e,r&&!!ke._startClamp),end:Ba(t,r&&!!ke._endClamp)},n),ke.update()},ke.adjustPinSpacing=function(e){if($&&e){var t=$.indexOf(he.d)+1;$[t]=parseFloat($[t])+e+xt,$[1]=parseFloat($[1])+e+xt,Et($)}},ke.disable=function(e,t){if(ke.enabled&&(!1!==e&&ke.revert(!0,!0),ke.enabled=ke.isActive=!1,t||ee&&ee.pause(),re=0,n&&(n.uncache=1),Te&&vb(ScrollTrigger,"refreshInit",Te),te&&(te.pause(),A.tween&&A.tween.kill()&&(A.tween=0)),!me)){for(var r=kt.length;r--;)if(kt[r].scroller===be&&kt[r]!==ke)return;vb(be,"resize",Jb),me||vb(be,"scroll",Hb)}},ke.kill=function(e,t){ke.disable(e,t),ee&&!t&&ee.kill(),a&&delete Tt[a];var r=kt.indexOf(ke);0<=r&&kt.splice(r,1),r===Qe&&0i&&(b()>i?a.progress(1)&&b(i):a.resetTo("scrollY",i))}Ta(e)||(e={}),e.preventDefault=e.isNormalizer=e.allowClicks=!0,e.type||(e.type="wheel,touch"),e.debounce=!!e.debounce,e.id=e.id||"normalizer";var n,i,l,o,a,c,u,s,f=e.normalizeScrollX,t=e.momentum,r=e.allowNestedScroll,d=e.onRelease,p=J(e.target)||Je,g=Le.core.globals().ScrollSmoother,h=g&&g.get(),v=R&&(e.content&&J(e.content)||h&&!1!==e.content&&!h.smooth()&&h.content()),b=K(p,He),m=K(p,qe),y=1,x=(E.isTouch&&Ne.visualViewport?Ne.visualViewport.scale*Ne.visualViewport.width:Ne.outerWidth)/Ne.innerWidth,_=0,w=Ra(t)?function(){return t(n)}:function(){return t||2.8},S=uc(p,e.type,!0,r),k=Fa,T=Fa;return v&&Le.set(v,{y:"+=0"}),e.ignoreCheck=function(e){return R&&"touchmove"===e.type&&function ignoreDrag(){if(o){requestAnimationFrame(rq);var e=Ga(n.deltaY/2),t=T(b.v-e);if(v&&t!==b.v+b.offset){b.offset=t-b.v;var r=Ga((parseFloat(v&&v._gsap.y)||0)-b.offset);v.style.transform="matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, "+r+", 0, 1)",v._gsap.y=r+"px",b.cacheID=ze.cache,Q()}return!0}b.offset&&vq(),o=!0}()||1.05=i||i-1<=r)&&Le.to({},{onUpdate:Bq,duration:o})}else s.restart(!0);d&&d(e)},e.onWheel=function(){a._ts&&a.pause(),1e3a;)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-(0X)&&e.render(r,!0)),Aa(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur(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>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=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=r&&te)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if("isPause"===i.data&&i._start=n._start)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0=this.totalDuration()||!v&&_)&&(f!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||(!t&&g||!(v===m&&0=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-(0r:!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")}),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=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{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})); \ No newline at end of file diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..d01d9bd --- /dev/null +++ b/js/index.js @@ -0,0 +1,521 @@ +// Importing utility function for preloading images +import { preloadImages, preloadVideo } from './utils.js'; + +// Variable to store the Lenis smooth scrolling object +let lenis; + +// Selecting content elements that contain SVG +const contentWithSVG = Array.from(document.querySelectorAll('.content')).filter(element => { + return element.querySelector(':scope svg') !== null; +}); + +// Selecting all clipPath elements on the document +const clipElements = [...document.querySelectorAll('clipPath')]; + +// Initializes Lenis for smooth scrolling with specific properties +const initSmoothScrolling = () => { + // Instantiate the Lenis object with specified properties + lenis = new Lenis({ + lerp: 0.2, // Lower values create a smoother scroll effect + smoothWheel: true // Enables smooth scrolling for mouse wheel events + }); + + // Update ScrollTrigger each time the user scrolls + lenis.on('scroll', () => ScrollTrigger.update()); + + // Define a function to run at each animation frame + const scrollFn = (time) => { + lenis.raf(time); // Run Lenis' requestAnimationFrame method + requestAnimationFrame(scrollFn); // Recursively call scrollFn on each frame + }; + // Start the animation frame loop + requestAnimationFrame(scrollFn); +}; + +// Define functions for custom effects +const applyCustomEffect_1 = (contentElement) => { + + // Select relevant elements for the effect + const clipPath = contentElement.querySelectorAll('svg clipPath'); + const poster = contentElement.querySelectorAll('.poster'); + const posterInner = contentElement.querySelectorAll('.poster__inner'); + + // Animation logic for each clipPath element + [...clipPath].forEach((clipPathEl, pos) => { + gsap.timeline({ + scrollTrigger: { + trigger: poster[pos], // Triggers based on poster element + start: 'top bottom', // Start animation when poster is at top of viewport + end: 'bottom top', // End animation when poster is at bottom of viewport + scrub: true, // Allows smooth scrubbing effect + } + }) + .fromTo(clipPathEl, { + xPercent: pos === 0 ? 40 : -80 // Initial xPercent value based on position + }, { + ease: 'none', + xPercent: pos === 0 ? -40 : 20 // Target xPercent value based on position + }, 0) + .fromTo(posterInner[pos], { + xPercent: pos === 0 ? -5 : 5, // Initial xPercent value based on position + yPercent: pos === 0 ? -5 : 5 // Initial yPercent value based on position + }, { + xPercent: pos === 0 ? 5 : -5, // Target xPercent value based on position + yPercent: pos === 0 ? 5 : -5 // Target yPercent value based on position + }, 0); + }); + +}; + +const applyCustomEffect_2 = (contentElement) => { + + const clipPath = contentElement.querySelectorAll('svg clipPath'); + const poster = contentElement.querySelectorAll('.poster'); + const posterInner = contentElement.querySelectorAll('.poster__inner'); + + [...clipPath].forEach((clipPathEl, pos) => { + + const texts = clipPathEl.querySelectorAll('text'); + + gsap.timeline({ + scrollTrigger: { + trigger: poster[pos], + start: 'top bottom', + end: 'bottom top', + scrub: true + } + }) + .fromTo(clipPathEl, { + xPercent: pos === 0 ? 0 : -100 + }, { + ease: 'none', + xPercent: pos === 0 ? -100 : 0 + }, 0) + .fromTo(poster[pos], { + filter: 'brightness(200%)', + skewX: pos === 0 ? -5 : 5 + }, { + ease: 'sine', + filter: 'brightness(15%)', + skewX: pos === 0 ? 5 : -5 + }, 0) + .fromTo(posterInner[pos], { + scale: 2.7 + }, { + scale: 1 + }, 0) + .fromTo(texts, { + transformOrigin: pos ? '50% 100%' : '50% 0%', + scaleX: 0.8, + scaleY: 0 + }, { + duration: 0.2, + stagger: pos ? -0.01 : 0.01, + scaleX: 1, + scaleY: 1 + }, 0); + + }); + +}; + +const applyCustomEffect_3 = (contentElement) => { + + const clipPath = contentElement.querySelectorAll('svg clipPath'); + const poster = contentElement.querySelectorAll('.poster'); + const posterInner = contentElement.querySelectorAll('.poster__inner'); + const texts = clipPath[0].querySelectorAll('text'); + + const imageUrls = ['img/3.png', 'img/2.jpg', 'img/1.png']; + let currentIndex = 0; + + gsap.timeline({ + scrollTrigger: { + trigger: poster[0], + start: 'top bottom', + end: 'bottom top+=25%', + scrub: true, + onUpdate: (scrollTrigger) => { + const progress = scrollTrigger.progress; + const sectionLength = 1 / imageUrls.length; + const index = Math.floor(progress / sectionLength); + const imageUrl = imageUrls[Math.min(index, imageUrls.length - 1)]; + + if (index !== currentIndex) { + + currentIndex = index; + + gsap.killTweensOf(posterInner); + gsap + .timeline() + .fromTo(posterInner, { + filter: 'brightness(100%)', + }, { + duration: 0.3, + ease: 'sine.in', + filter: 'brightness(0%)', + onComplete: () => { + posterInner[0].style.backgroundImage = `url(${imageUrl})`; + gsap.to(posterInner, { + duration: 1, + ease: 'power1', + filter: 'brightness(100%)', + }); + } + }); + + } + } + } + }) + .fromTo(clipPath, { + xPercent: 80 + }, { + ease: 'none', + xPercent: -120, + + }, 0) + .fromTo(texts, { + transformOrigin: '100% 75%', + xPercent: 100, + rotation: 10 + }, { + duration: 0.2, + stagger: 0.05, + xPercent: 0, + rotation: 0 + }, 0); + +}; + +const applyCustomEffect_4 = (contentElement) => { + + const clipPath = contentElement.querySelectorAll('svg clipPath'); + const poster = contentElement.querySelectorAll('.poster'); + const posterInner = contentElement.querySelectorAll('.poster__inner'); + const texts = clipPath[0].querySelectorAll('text'); + + gsap.timeline({ + scrollTrigger: { + trigger: poster[0], + start: 'top bottom', + end: 'bottom top', + scrub: true + } + }) + .fromTo(clipPath, { + xPercent: 160 + }, { + ease: 'none', + xPercent: -160 + }, 0) + .fromTo(posterInner[0], { + xPercent: -10, + filter: 'hue-rotate(190deg) contrast(600%)' + }, { + xPercent: 10, + filter: 'hue-rotate(0deg) contrast(100%)' + }, 0) + .fromTo(texts, { + transformOrigin: '50% 100%', + scaleY: 0, + }, { + duration: 0.3, + ease: 'expo.inOut', + stagger: 0.05, + scaleY: 1 + }, 0) + .fromTo(texts, { + skewX: -25 + }, { + duration: 0.3, + ease: 'sine.in', + stagger: 0.05, + skewX: 25, + opacity: 0 + }, 0) + +}; + +const applyCustomEffect_5 = (contentElement) => { + + const clipPath = contentElement.querySelectorAll('svg clipPath'); + const poster = contentElement.querySelectorAll('.poster'); + const posterInner = contentElement.querySelectorAll('.poster__inner'); + const texts = clipPath[0].querySelectorAll('text'); + + gsap.timeline({ + defaults: { + ease: 'none' + }, + scrollTrigger: { + trigger: poster[0], + start: 'top bottom', + end: 'bottom top', + scrub: true + } + }) + .fromTo(clipPath, { + xPercent: 160 + }, { + xPercent: -160 + }, 0) + .fromTo(poster, { + transformOrigin: '-50% 50%', + rotation: -5 + }, { + rotation: 10 + }, 0) + .fromTo(posterInner, { + scale: 3 + }, { + scale: 1 + }, 0) + .fromTo(texts, { + transformOrigin: '0% 50%', + rotation: -45, + yPercent: -10, + scale: 0.1 + }, { + duration: 0.3, + ease: 'power1', + stagger: 0.05, + rotation: 0, + scale: 1, + yPercent: 0, + xPercent: 0 + }, 0); + +}; + +const applyCustomEffect_6 = (contentElement) => { + + const clipPath = contentElement.querySelectorAll('svg clipPath'); + const poster = contentElement.querySelectorAll('.poster'); + const texts = clipPath[0].querySelectorAll('text'); + + gsap.timeline({ + scrollTrigger: { + trigger: poster[0], + start: 'top bottom', + end: 'bottom top', + scrub: true + } + }) + .fromTo(clipPath, { + xPercent: 20 + }, { + ease: 'none', + xPercent: -70 + }, 0) + .fromTo(texts, { + transformOrigin: '150% 50%', + scaleX: 0.25, + opacity: 0, + xPercent: 100 + }, { + duration: 0.15, + ease: 'power1', + stagger: 0.05, + scaleX: 1, + xPercent: 0, + opacity: 1 + }, 0) + .fromTo(poster, { + filter: 'saturate(15)' + }, { + filter: 'saturate(0)' + }, 0) + +}; + +const applyCustomEffect_7 = (contentElement) => { + + const clipPath = contentElement.querySelectorAll('svg clipPath'); + const poster = contentElement.querySelectorAll('.poster'); + const texts = clipPath[0].querySelectorAll('text'); + + gsap.timeline({ + defaults: { + ease: 'none' + }, + scrollTrigger: { + trigger: poster[0], + start: 'top bottom', + end: 'bottom top', + scrub: true + } + }) + .fromTo(contentElement, { + filter: 'drop-shadow(-100px -20px 5px #6b0c0c)' + }, { + filter: 'drop-shadow(100px 20px 20px #2a1554)' + }, 0) + .fromTo(clipPath, { + xPercent: 140 + }, { + xPercent: -140 + }, 0) + .fromTo(texts, { + transformOrigin: '0% 50%', + rotation: -45, + scale: 0, + opacity: 0 + }, { + duration: 0.25, + ease: 'expo.inOut', + stagger: 0.03, + rotation: 0, + scale: 1, + xPercent: 0, + opacity: 1 + }, 0); + +}; + +const applyCustomEffect_8 = (contentElement) => { + + const clipPath = contentElement.querySelectorAll('svg clipPath'); + const poster = contentElement.querySelectorAll('.poster'); + const posterInner = contentElement.querySelectorAll('.poster__inner'); + + [...clipPath].forEach((clipPathEl, pos) => { + + const texts = clipPathEl.querySelectorAll('text'); + + gsap.timeline({ + defaults: { + ease: 'none' + }, + scrollTrigger: { + trigger: poster[0], + start: 'top bottom', + end: 'bottom top', + scrub: true + } + }) + .fromTo(clipPathEl, { + yPercent: pos ? 30 : 0 + }, { + ease: 'none', + yPercent: pos ? -30 : 0 + }, 0) + .fromTo(texts, { + transformOrigin: '50% 0%', + scale: 2, + opacity: 0, + x: pos ? 100 : -100, + y: pos ? gsap.utils.random(150,300) : gsap.utils.random(150,300), + skewX: pos ? 20 : -20 + }, { + duration: 0.4, + ease: 'power3', + stagger: 0.06, + scale: 1.3, + opacity: 1, + x: 0, + y: 0, + skewX: 0 + }, 0); + + }); + +}; + +const applyCustomEffect_9 = (contentElement) => { + + const clipPath = contentElement.querySelectorAll('svg clipPath'); + const poster = contentElement.querySelectorAll('.poster'); + const posterInner = contentElement.querySelectorAll('.poster__inner'); + const texts = clipPath[0].querySelectorAll('text'); + + gsap.timeline({ + defaults: { + ease: 'none' + }, + scrollTrigger: { + trigger: poster[0], + start: 'top bottom', + end: 'bottom top', + scrub: true + } + }) + .fromTo(clipPath, { + xPercent: 50, + }, { + xPercent: -50 + }, 0) + .fromTo(poster, { + filter: 'brightness(140%) hue-rotate(300deg)', + rotation: -7 + }, { + filter: 'brightness(10%) hue-rotate(0deg)', + rotation: 7 + }, 0) + .fromTo(posterInner, { + scale: 1 + }, { + scale: 1.2 + }, 0) + .fromTo(texts, { + transformOrigin: '0% 0%', + scaleX: 1, + }, { + ease: 'none', + scale: () => gsap.utils.random(0, 0.5), + yPercent: () => gsap.utils.random(-40, 40), + rotation: () => gsap.utils.random(-15, 15) + }, 0); + +}; + +// Update the scroll function to call the respective applyCustomEffect_N functions +const scroll = () => { + contentWithSVG.forEach((contentElement, position) => { + switch (position) { + case 0: + applyCustomEffect_1(contentElement); + break; + case 1: + applyCustomEffect_2(contentElement); + break; + case 2: + applyCustomEffect_3(contentElement); + break; + case 3: + applyCustomEffect_4(contentElement); + break; + case 4: + applyCustomEffect_5(contentElement); + break; + case 5: + applyCustomEffect_6(contentElement); + break; + case 6: + applyCustomEffect_7(contentElement); + break; + case 7: + applyCustomEffect_8(contentElement); + break; + case 8: + applyCustomEffect_9(contentElement); + break; + default: + // Handle other positions if needed + break; + } + }); +}; + +// Initialization function +const init = () => { + initSmoothScrolling(); // Initialize Lenis for smooth scrolling + scroll(); // Apply scroll-triggered animations to items +}; + +// Preloading all images specified by the selector +Promise.all([preloadImages('.poster__inner'), preloadVideo('img/dragon.mp4')]).then(() => { + // Once images are preloaded, remove the 'loading' indicator/class from the body + document.body.classList.remove('loading'); + init(); +}); \ No newline at end of file diff --git a/js/lenis.min.js b/js/lenis.min.js new file mode 100644 index 0000000..bd31f9e --- /dev/null +++ b/js/lenis.min.js @@ -0,0 +1 @@ +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t||self).Lenis=e()}(this,function(){function t(t,e){for(var i=0;i=1)?1:this.easing(s);this.value=this.from+(this.to-this.from)*r}null==(e=this.onUpdate)||e.call(this,this.value,{completed:n}),n&&this.stop()}},e.stop=function(){this.isRunning=!1},e.fromTo=function(t,e,i){var o=i.lerp,n=void 0===o?.1:o,s=i.duration,r=void 0===s?1:s,l=i.easing,h=void 0===l?function(t){return t}:l,a=i.onUpdate;this.from=this.value=t,this.to=e,this.lerp=n,this.duration=r,this.easing=h,this.currentTime=0,this.isRunning=!0,this.onUpdate=a},t}();function s(t,e){var i;return function(){var o=arguments,n=this;clearTimeout(i),i=setTimeout(function(){t.apply(n,o)},e)}}var r=/*#__PURE__*/function(){function t(t,e){var i=this;this.onWindowResize=function(){i.width=window.innerWidth,i.height=window.innerHeight},this.onWrapperResize=function(){i.width=i.wrapper.clientWidth,i.height=i.wrapper.clientHeight},this.onContentResize=function(){var t=i.wrapper===window?document.documentElement:i.wrapper;i.scrollHeight=t.scrollHeight,i.scrollWidth=t.scrollWidth},this.wrapper=t,this.content=e,this.wrapper===window?(window.addEventListener("resize",this.onWindowResize,!1),this.onWindowResize()):(this.wrapperResizeObserver=new ResizeObserver(s(this.onWrapperResize,100)),this.wrapperResizeObserver.observe(this.wrapper),this.onWrapperResize()),this.contentResizeObserver=new ResizeObserver(s(this.onContentResize,100)),this.contentResizeObserver.observe(this.content),this.onContentResize()}return t.prototype.destroy=function(){var t,e;window.removeEventListener("resize",this.onWindowResize,!1),null==(t=this.wrapperResizeObserver)||t.disconnect(),null==(e=this.contentResizeObserver)||e.disconnect()},e(t,[{key:"limit",get:function(){return{x:this.scrollWidth-this.width,y:this.scrollHeight-this.height}}}]),t}(),l=/*#__PURE__*/function(){function t(t,e){var i=this,n=e.wheelMultiplier,s=void 0===n?1:n,r=e.touchMultiplier,l=void 0===r?2:r,h=e.normalizeWheel,a=void 0!==h&&h;this.onTouchStart=function(t){var e=t.targetTouches?t.targetTouches[0]:t,o=e.clientY;i.touchStart.x=e.clientX,i.touchStart.y=o,i.lastDelta={x:0,y:0}},this.onTouchMove=function(t){var e=t.targetTouches?t.targetTouches[0]:t,o=e.clientX,n=e.clientY,s=-(o-i.touchStart.x)*i.touchMultiplier,r=-(n-i.touchStart.y)*i.touchMultiplier;i.touchStart.x=o,i.touchStart.y=n,i.lastDelta={x:s,y:r},i.emitter.emit("scroll",{type:"touch",deltaX:s,deltaY:r,event:t})},this.onTouchEnd=function(t){i.emitter.emit("scroll",{type:"touch",inertia:!0,deltaX:i.lastDelta.x,deltaY:i.lastDelta.y,event:t})},this.onWheel=function(t){var e=t.deltaX,n=t.deltaY;i.normalizeWheel&&(e=o(-100,e,100),n=o(-100,n,100)),i.emitter.emit("scroll",{type:"wheel",deltaX:e*=i.wheelMultiplier,deltaY:n*=i.wheelMultiplier,event:t})},this.element=t,this.wheelMultiplier=s,this.touchMultiplier=l,this.normalizeWheel=a,this.touchStart={x:null,y:null},this.emitter={events:{},emit:function(t){for(var e=this.events[t]||[],i=0,o=e.length;iMath.abs(s)?r:s:"horizontal"===e.options.gestureOrientation&&(c=s);var u=h&&e.options.syncTouch,p=h&&n&&Math.abs(c)>1;p&&(c=e.velocity*e.options.touchInertiaMultiplier),e.scrollTo(e.targetScroll+c,i({programmatic:!1},u&&{lerp:p?e.syncTouchLerp:.4}))}}},this.onScroll=function(){if(!e.isScrolling){var t=e.animatedScroll;e.animatedScroll=e.targetScroll=e.actualScroll,e.velocity=0,e.direction=Math.sign(e.animatedScroll-t),e.emit()}},s&&console.warn("Lenis: `direction` option is deprecated, use `orientation` instead"),h&&console.warn("Lenis: `gestureDirection` option is deprecated, use `gestureOrientation` instead"),a&&console.warn("Lenis: `mouseMultiplier` option is deprecated, use `wheelMultiplier` instead"),c&&console.warn("Lenis: `smooth` option is deprecated, use `smoothWheel` instead"),window.lenisVersion="1.0.11",p!==document.documentElement&&p!==document.body||(p=window),this.options={wrapper:p,content:v,wheelEventsTarget:f,smoothWheel:w,smoothTouch:y,syncTouch:b,syncTouchLerp:M,touchInertiaMultiplier:L,duration:W,easing:O,lerp:k,infinite:H,gestureOrientation:Y,orientation:D,touchMultiplier:P,wheelMultiplier:A,normalizeWheel:V},this.dimensions=new r(p,v),this.rootElement.classList.add("lenis"),this.velocity=0,this.isStopped=!1,this.isSmooth=w||y,this.isScrolling=!1,this.targetScroll=this.animatedScroll=this.actualScroll,this.animate=new n,this.emitter={events:{},emit:function(t){for(var e=this.events[t]||[],i=0,o=e.length;i0&&e<0||t<0&&e>0)&&(e+=t),e):this.animatedScroll;var t,e}},{key:"progress",get:function(){return 0===this.limit?1:this.scroll/this.limit}},{key:"isSmooth",get:function(){return this.__isSmooth},set:function(t){this.__isSmooth!==t&&(this.rootElement.classList.toggle("lenis-smooth",t),this.__isSmooth=t)}},{key:"isScrolling",get:function(){return this.__isScrolling},set:function(t){this.__isScrolling!==t&&(this.rootElement.classList.toggle("lenis-scrolling",t),this.__isScrolling=t)}},{key:"isStopped",get:function(){return this.__isStopped},set:function(t){this.__isStopped!==t&&(this.rootElement.classList.toggle("lenis-stopped",t),this.__isStopped=t)}}]),t}();return h}); \ No newline at end of file diff --git a/js/utils.js b/js/utils.js new file mode 100644 index 0000000..6a6bd25 --- /dev/null +++ b/js/utils.js @@ -0,0 +1,43 @@ +/** + * 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); + }); +}; + +/** + * Preloads a video from the provided source. + * @function + * @param {string} videoSrc - URL of the video file to preload. + * @returns {Promise} - Resolves with the video element when the video is fully loaded. + */ +const preloadVideo = (videoSrc) => { + return new Promise((resolve, reject) => { + const video = document.createElement('video'); + video.src = videoSrc; + + // You may want to handle additional events such as 'onerror' or 'oncanplaythrough' + video.addEventListener('loadeddata', () => { + resolve(video); + }); + + video.load(); // Start loading the video + + // If the video fails to load, reject the promise + video.onerror = () => { + reject(new Error('Failed to load video')); + }; + }); +}; + +// Exporting utility functions for use in other modules. +export { + preloadImages, + preloadVideo, +}; \ No newline at end of file