1<!DOCTYPE html><!-- Last Published: Thu Sep 28 2023 09:13:07 GMT+0000 (Coordinated Universal Time) --> 2<html data-wf-page="618bc75a26d2db77c563d580" data-wf-site="617f0efab292f8f31a9ba7f7" lang="en"> 3<head> 4 <meta charset="utf-8"> 5 <title>Peshka ⢠Petar Stanchev</title> 6 <meta content="A multidisciplinary-designer, based in Groningen, The Netherlands. With love for Graphic Design, Branding, 3D, Motion." name="description"> 7 <meta content="Peshka ⢠Petar Stanchev" property="og:title"> 8 <meta content="A multidisciplinary-designer, based in Groningen, The Netherlands. With love for Graphic Design, Branding, 3D, Motion." property="og:description"> 9 <meta content="Peshka ⢠Petar Stanchev" property="twitter:title"> 10 <meta content="A multidisciplinary-designer, based in Groningen, The Netherlands. With love for Graphic Design, Branding, 3D, Motion." property="twitter:description"> 11 <meta property="og:type" content="website"> 12 <meta content="summary_large_image" name="twitter:card"> 13 <meta content="width=device-width, initial-scale=1" name="viewport"> 14 <link href="css/normalize.css" rel="stylesheet" type="text/css"> 15 <link href="css/webflow.css" rel="stylesheet" type="text/css"> 16 <link href="css/petar-stanchevs-fantabulous-site.webflow.css" rel="stylesheet" type="text/css"> 17
17<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
17 18 <link href="images/favicon.png" rel="shortcut icon" type="image/x-icon"> 19 <link href="images/webclip.png" rel="apple-touch-icon"> 20 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.css"> 21 <style> 22body .transition {display: block} 23.w-editor .transition {display: none;} 24.no-scroll-transition {overflow: hidden; position: relative;} 25 .cursor__circle__small{mix-blend-mode: difference;} 26 body:hover .cursor {opacity:1.0;} 27 .cursor {pointer-events: none; 28 isolation: isolate; 29 } 30</style> 31 <style> 32 #sectionPin { 33 overflow: hidden; 34 display: flex; 35 left: 0; 36} 37 * { 38 box-sizing: border-box; 39} 40 .frame > * { 41 min-width: 100vw; 42 padding: 0 5vw; 43} 44 .cmyk-img { 45 border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; 46 transition: all 1s ease-in-out; 47 background-position: center; /* Center the image */ 48 background-repeat: no-repeat; /* Do not repeat the image */ 49 background-size: cover; /* Resize the background image to cover the entire container */ 50} 51.cmyk-img.is--black { 52animation: morph 3s ease-in-out infinite; 53background-image: url("https://uploads-ssl.webflow.com/617f0efab292f8f31a9ba7f7/618e905c0012a11b9f095fa8_potrait_k.png"); 54} 55.cmyk-img.is--cyan { 56 mix-blend-mode: screen; 57animation: morph 4s ease-in-out infinite; 58background-image: url("https://uploads-ssl.webflow.com/617f0efab292f8f31a9ba7f7/618e905cd53488b31acb8125_portrait_c.png"); 59} 60.cmyk-img.is--magenta { 61 mix-blend-mode: screen; 62animation: morph 2s ease-in-out infinite; 63background-image: url("https://uploads-ssl.webflow.com/617f0efab292f8f31a9ba7f7/618e905c8fb67ee4c1810fb2_potrait_m.png"); 64} 65.cmyk-img.is--yellow { 66 mix-blend-mode: screen; 67animation: morph 5s ease-in-out infinite; 68background-image: url("https://uploads-ssl.webflow.com/617f0efab292f8f31a9ba7f7/618e905c06de5c851b9983cc_portrait_y.png"); 69} 70@keyframes morph { 71 0% { 72 border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; 73 } 74 50% { 75 border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; 76 } 77 100% { 78 border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; 79 } 80} 81 .halftone { 82 background: white; 83 position: relative; 84 filter: contrast(25000%); 85 overflow: hidden; 86 transform: translateZ(0); /* force a HW accelerated layer */ 87} 88.halftone { 89 background: white; 90 position: relative; 91 filter: contrast(25000%); 92 overflow: hidden; 93 transform: translateZ(0); /* force a HW accelerated layer */ 94} 95.halftone > * { 96 filter: brightness(0.5) blur(4px); 97 animation: 3s animation-filter infinite paused alternate; 98} 99.halftone > *:hover { 100 filter: brightness(0.5) blur(4px); 101 animation: 3s animation-filter infinite alternate; 102} 103.halftone::after { 104 content: ''; 105 position: absolute; 106 top: -100%; 107 left: -100%; 108 right: -100%; 109 bottom: -100%; 110 background-blend-mode: multiply; 111 background: 112 radial-gradient(8px 8px, cyan, white), 113 radial-gradient(8px 8px, magenta, white), 114 radial-gradient(8px 8px, yellow, white); 115 background-size: 8px 8px; 116 background-position: 0 -3px, -2px 0, 2px 0; 117 mix-blend-mode: screen; 118 pointer-events: none; 119 transform: rotate(11.25deg); 120 transition: 1s ease-in-out transform; 121 z-index: 1; 122 animation: 3s animation-overlay infinite paused alternate; 123} 124.halftone:hover:after { 125 content: ''; 126 position: absolute; 127 top: -100%; 128 left: -100%; 129 right: -100%; 130 bottom: -100%; 131 background-blend-mode: multiply; 132 background: 133 radial-gradient(8px 8px, cyan, white), 134 radial-gradient(8px 8px, magenta, white), 135 radial-gradient(8px 8px, yellow, white); 136 background-size: 8px 8px; 137 background-position: 0 -3px, -2px 0, 2px 0; 138 mix-blend-mode: screen; 139 pointer-events: none; 140 transform: rotate(11.25deg); 141 transition: 1s ease-in-out transform; 142 z-index: 1; 143 animation: 3s animation-overlay infinite alternate; 144} 145@keyframes animation-overlay { 146 0% { 147 transform: rotate(45.25deg) scale(40); 148 } 149 10% { 150 transform: rotate(5) scale(1); 151 } 152 100% { 153 transform: rotate(5) scale(1); 154 } 155} 156@keyframes animation-filter { 157 0% { 158 filter: brightness(0.5) blur(40px); 159 } 160 10% { 161 filter: brightness(0.5) blur(2px); 162 } 163 100% { 164 filter: brightness(0.5) blur(2px); 165 } 166} 167</style> 168</head> 169<body class="body"> 170 <div class="transition"> 171 <div data-w-id="c91f29b0-add3-9ec3-d3de-9b08fd84f416" class="transition-trigger"></div> 172 <div class="transition-content"> 173 <div class="transition-text">PETAR STANCHEV <span class="text-span-11">'23</span><br><strong>Ã</strong><span class="text-span-10">PESHKA â¢</span> <span class="text-span-8">PORTFOLIO</span><br></div> 174 </div> 175 </div> 176 <nav class="c-nav"> 177 <div data-w-id="51f0f280-b95a-e25d-fb6b-12c9b1321d9f" class="cursor"> 178 <div class="cursor__circle"> 179 <div class="cursor__circle__big"></div> 180 <div class="cursor__circle__cross"></div> 181 <div class="cursor__circle__cross is--vertical"></div> 182 <div class="cursor__circle__small"></div> 183 </div> 184 </div> 185 <div class="c-nav__logo"> 186 <a data-w-id="4926805f-20b5-17bb-ccc0-bc8c1fc7ae62" href="index.html" aria-current="page" class="c-nav__logo-link w-inline-block w--current"> 187 <div data-is-ix2-target="1" class="c-nav__logo-link__lottie" data-w-id="4926805f-20b5-17bb-ccc0-bc8c1fc7ae63" data-animation-type="lottie" data-src="documents/logo-peshka.json" data-loop="0" data-direction="1" data-autoplay="0" data-renderer="svg" data-duration="0" data-ix2-initial-state="0"></div> 188 <div class="c-nav__logo-link__text">PESHKA</div> 189 </a> 190 </div> 191 <div class="c-nav__menu"> 192 <div class="o-link-wrapper is--nav"> 193 <a href="work.html" class="c-nav__nav-link">WORK</a> 194 <div class="bar-underline"></div> 195 </div> 196 <div class="o-link-wrapper is--nav"> 197 <a href="about.html" class="c-nav__nav-link">ABOUT</a> 198 <div class="bar-underline"></div> 199 </div> 200 </div> 201 </nav> 202 <main class="locomotive-scroll"> 203 <header class="c-hero"> 204 <div data-w-id="7842bd45-0e1c-fcf1-b16c-008ca8352743" class="c-hero__wrapper"> 205 <div class="c-hero__wrapper__bg"> 206 <div class="c-hero__wrapper__bg__text">WITH A LOVE FOR SHAPES</div> 207 <div class="c-hero__wrapper__bg__text is--right">ARRANGED IN COMPOSITIONS</div> 208 <div class="c-hero__wrapper__bg__text">WHOSE COLORS STRUCTURED IN LAYERS</div> 209 <div class="c-hero__wrapper__bg__text">CREATE A SPARK.</div> 210 </div> 211 <div class="c-hero__wrapper__title"> 212 <h1 data-scroll-speed="2" data-scroll="1" class="c-hero__wrapper__title__text"><span class="c-hero__wrapper__title__text__span1">â¢<br>MULTIDISCIPLINARY</span><span data-scroll-offset="55%,35%" data-scroll="1" data-scroll-class="in-view" class="c-hero__wrapper__title__text__span2">PETAR STANCHEV </span><span data-scroll-offset="55%,35%" data-scroll="1" data-scroll-class="in-view" class="c-hero__wrapper__title__text__span3">PESHKA</span><span class="c-hero__wrapper__title__text__span4">â¢DESIGNER</span></h1> 213 </div> 214 <div class="c-hero__wrapper__subtitle"></div> 215 </div> 216 </header> 217 <section id="sectionPin" data-scroll="1" class="c-home__cases"> 218 <div class="frame"> 219 <div data-w-id="a6fc618b-6524-aefc-5f02-53946c43ea99" class="home__case"> 220 <div class="saturation"> 221 <div class="halftone"><img class="home__case__img clip-path" src="images/powerlift-thumb.jpg" data-sampler="simplePlaneTexture" height="" alt="Softroom cover" sizes="(max-width: 479px) 200.6041717529297px, (max-width: 991px) 46vw, 41vw" loading="lazy" srcset="images/powerlift-thumb-p-500.jpg 500w, images/powerlift-thumb.jpg 800w"></div> 222 </div> 223 <div data-scroll="1" class="home__case__info"> 224 <div data-scroll-direction="horizontal" data-scroll="1" data-scroll-speed="1" class="home__case__info__type">â <br> <br><em>client</em> ⢠personal</div> 225 <div data-scroll-direction="horizontal" data-scroll="1" data-scroll-speed="2" class="home__case__project"> 226 <a href="project-powerlift.html" class="home__case__project__link w-inline-block"></a> 227 <div class="home__case__title">POWERLIFT</div> 228 <div class="text-block-4-copy">3D Art</div> 229 </div> 230 <div data-scroll-direction="horizontal" data-scroll="1" data-scroll-speed="3" class="home__case__desc">I've ventured into 3D scanning, transforming physical objects into digital forms. In my spare time, I created a photogrammetry rig, capturing over 300 photos to generate a high-quality mesh, allowing for playful experimentation</div> 231 <a data-scroll-direction="horizontal" data-scroll="1" data-scroll-speed="1" href="project-powerlift.html" class="home__case__link">âFULL PROJECT</a> 232 <div class="home__case__bg"> 233 <div class="home__case__bg__text">â </div> 234 </div> 235 </div> 236 </div> 237 <div class="home__case is--left"> 238 <div class="saturation"> 239 <div class="halftone"><img class="home__case__img clip-path" src="images/veda-thumb.jpg" data-sampler="simplePlaneTexture" height="" alt="" sizes="(max-width: 479px) 167.78125px, (max-width: 767px) 35vw, 38vw" loading="lazy" srcset="images/veda-thumb-p-500.jpg 500w, images/veda-thumb.jpg 800w"></div> 240 </div> 241 <div data-scroll="1" class="home__case__info"> 242 <div data-scroll-direction="horizontal" data-scroll="1" data-scroll-speed="1" class="home__case__info__type">â¡<br> <br><em>client</em> ⢠Personal</div> 243 <div data-scroll-direction="horizontal" data-scroll="1" data-scroll-speed="2" class="home__case__project"> 244 <a href="project-veda-slovena.html" class="home__case__project__link w-inline-block"></a> 245 <div class="home__case__title">VEDA SLOVENA</div> 246 <div class="text-block-4-copy">Fashion, Photography, 3D</div> 247 </div> 248 <div data-scroll-direction="horizontal" data-scroll="1" data-scroll-speed="3" class="home__case__desc">With use of innovative 3D knit technology to capture the essence of natural decay and embrace sustainability in crafting meaningful products.</div> 249 <a data-scroll-direction="horizontal" data-scroll="1" data-scroll-speed="1" href="project-veda-slovena.html" class="home__case__link">â FULL PROJECT</a> 250 <div class="home__case__bg"> 251 <div class="home__case__bg__text">â¡</div> 252 </div> 253 </div> 254 </div> 255 <div class="home__case"> 256 <div class="saturation"> 257 <div class="halftone"><img src="images/hbb2-thumb.jpg" loading="lazy" alt="Softroom cover" height="" data-sampler="simplePlaneTexture"
257class="home__case__img clip-path"></div> 258 </div> 259 <div class="home__case__info"> 260 <div data-scroll-direction="horizontal" data-scroll="1" data-scroll-speed="1" class="home__case__info__type">â¢<br> <br><em>client</em> ⢠Mom4eto</div> 261 <div data-scroll-direction="horizontal" data-scroll="1" data-scroll-speed="2" class="home__case__project"> 262 <a href="project-hbb.html" class="home__case__project__link w-inline-block"></a> 263 <div class="home__case__title">HOOD BABY<br>BOY 2</div> 264 <div class="text-block-4-copy">Graphic Design, 3D, Motion</div> 265 </div> 266 <div data-scroll-direction="horizontal" data-scroll="1" data-scroll-speed="3" class="home__case__desc">Among the tall gray buildings, somewhere in the gloomy streets, a green light shines. No, it's not a traffic light. It's an old cell phone screen. A call is received...</div> 267 <a data-scroll-direction="horizontal" data-scroll="1" data-scroll-speed="1" href="project-hbb.html" class="home__case__link">â FULL PROJECT</a> 268 <div class="home__case__bg"> 269 <div class="home__case__bg__text">â¢</div> 270 </div> 271 </div> 272 </div> 273 <div class="home__case is--left"> 274 <div class="saturation"> 275 <div class="halftone"><img class="home__case__img clip-path" src="images/broom-thumb.jpg" data-sampler="simplePlaneTexture" height="" alt="Boiler Room cover" sizes="(max-width: 479px) 167.78125px, (max-width: 991px) 39vw, 38vw" loading="lazy" srcset="images/broom-thumb-p-500.jpeg 500w, images/broom-thumb.jpg 800w"></div> 276 </div> 277 <div class="home__case__info"> 278 <div class="home__case__info__type">â£<br> <br><em>client</em> ⢠Boiler Room</div> 279 <div class="home__case__project"> 280 <a href="project-boiler-room-x-faza.html" class="home__case__project__link w-inline-block"></a> 281 <div class="home__case__title">BOILER ROOM<br>X ФÐÐÐ</div> 282 <div class="text-block-4-copy">3D Motion</div> 283 </div> 284 <div class="home__case__desc">Boiler Room and Faza linked together to host the first event in Sofia, Bulgaria. The promotional work was done in collaboration with Denislav Golemanov. Following his art direction to express...</div> 285 <a href="project-boiler-room-x-faza.html" class="home__case__link">â FULL PROJECT</a> 286 <div class="home__case__bg"> 287 <div class="home__case__bg__text">â£</div> 288 </div> 289 </div> 290 </div> 291 <div class="home__case"> 292 <div class="saturation"> 293 <div class="halftone"><img class="home__case__img clip-path" src="images/illustration-thumb.jpg" data-sampler="simplePlaneTexture" height="" alt="Insulation cover" sizes="(max-width: 479px) 167.78125px, (max-width: 767px) 37vw, 38vw" loading="lazy" srcset="images/illustration-thumb-p-500.jpg 500w, images/illustration-thumb.jpg 800w"></div> 294 </div> 295 <div class="home__case__info"> 296 <div data-scroll-direction="horizontal" data-scroll="1" data-scroll-speed="1" class="home__case__info__type">â¤<br> <br><em>client</em> ⢠personal</div> 297 <div data-scroll-direction="horizontal" data-scroll="1" data-scroll-speed="2" class="home__case__project"> 298 <a href="project-illustration.html" class="home__case__project__link w-inline-block"></a> 299 <div class="home__case__title">ILLUSTRATION<br>22-23</div> 300 <div class="text-block-4-copy">Illustration</div> 301 </div> 302 <div data-scroll-direction="horizontal" data-scroll="1" data-scroll-speed="2" class="home__case__desc">This project showcases my personal illustrations created in the last two years. Inspired by my exploration of film photography and my love for thriller and neo-noir aesthetics, I aimed to infuse a cinematic essence into my digital sculpture and 3D work.</div> 303 <a data-scroll-direction="horizontal" data-scroll="1" data-scroll-speed="1" href="project-illustration.html" class="home__case__link">â FULL PROJECT</a> 304 <div class="home__case__bg"> 305 <div class="home__case__bg__text">â¤</div> 306 </div> 307 </div> 308 </div> 309 </div> 310 </section> 311 <div class="o-marquee"> 312 <div data-scroll-direction="horizontal" data-scroll="1" data-scroll-speed="-3" data-w-id="d2230e12-16bc-26b6-a4de-798ddaea379b" class="o-marquee__hor"> 313 <div class="o-marquee__hor__holder"> 314 <div class="o-marquee__hor__holder__text"><span class="text-span-23">LETS</span> <span class="text-span-24">MAKE IT</span><br>TOGHETER</div> 315 <div class="o-marquee__hor__holder__slash">|</div> 316 <div class="o-marquee__hor__add"><img src="images/heart.svg" loading="lazy" alt="" class="o-marquee__hor__add__img"> 317 <div class="o-marquee__hor__add__text">WITH LOTS <br>OF LOVE</div> 318 </div> 319 </div> 320 <div class="o-marquee__hor__holder"> 321 <div class="o-marquee__hor__holder__text"><span class="text-span-23">LETS</span> <span class="text-span-24">MAKE IT</span><br>TOGHETER</div> 322 <div class="o-marquee__hor__holder__slash">|</div> 323 <div class="o-marquee__hor__add"><img src="images/heart.svg" loading="lazy" alt="" class="o-marquee__hor__add__img"> 324 <div class="o-marquee__hor__add__text">WITH LOTS <br>OF LOVE</div> 325 </div> 326 </div> 327 <div class="o-marquee__hor__holder"> 328 <div class="o-marquee__hor__holder__text"><span class="text-span-23">LETS</span> <span class="text-span-24">MAKE IT</span><br>TOGHETER</div> 329 <div class="o-marquee__hor__holder__slash">|</div> 330 <div class="o-marquee__hor__add"><img src="images/heart.svg" loading="lazy" alt="" class="o-marquee__hor__add__img"> 331 <div class="o-marquee__hor__add__text">WITH LOTS <br>OF LOVE</div> 332 </div> 333 </div> 334 </div> 335 </div> 336 <footer class="c-footer"> 337 <div class="c-footer__email"> 338 <div data-is-ix2-target="1" class="c-footer__email__lottie" data-w-id="385dcbbc-4837-53f7-1815-3a32baa87260" data-animation-type="lottie" data-src="documents/logo-mail.json" data-loop="0" data-direction="1" data-autoplay="0" data-renderer="svg" data-duration="0" data-ix2-initial-state="0"></div> 339 <div class="o-link-wrapper is--email"> 340 <div class="o-link-wrapper__bg"> 341 <div class="o-link-wrapper__bg__text">UP FOR A CHAT?</div> 342 </div> 343 <a data-w-id="385dcbbc-4837-53f7-1815-3a32baa87262" href="mailto:[email protected]?subject=Hello%2C%20Peshka!" class="c-footer__email__link"><span class="text-span-5">SEND</span> AN <span class="text-span-6">E</span><span class="text-span-7">MAIL</span></a> 344 <div class="bar-underline"></div> 345 </div> 346 </div> 347 <div data-scroll="1" class="c-footer__links"> 348 <div class="o-link-wrapper is--social"> 349 <a rel="noreferrer" href="https://www.instagram.com/peshka.one/" target="_blank" class="c-footer__social-link">INSTAGRAM</a> 350 <div class="bar-underline"></div> 351 </div> 352 <div class="cmyk"> 353 <div class="cmyk__color is--cyan"></div> 354 <div class="cmyk__color is--magenta"></div> 355 <div class="cmyk__color is--yellow"></div> 356 <div class="cmyk__color is--black"></div> 357 <div class="cmyk__color"></div> 358 </div> 359 </div> 360 </footer> 361 </main> 362
362<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=617f0efab292f8f31a9ba7f7" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
362 363
363<script src="js/webflow.js" type="text/javascript"></script>
363 364
364<script> 365 $('a').mouseenter(function() { 366 $('.cursor').click(); 367}); 368$('a').mouseleave(function() { 369 $('.cursor').click(); 370}); 371</script>
371 372
372<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.js"></script>
372 373
373<script> 374let transitionTrigger = $(".transition-trigger"); 375let introDurationMS = 0; 376let exitDurationMS = 1200; 377let excludedClass = "no-transition"; 378// On Page Load 379if (transitionTrigger.length > 0) { 380 transitionTrigger.click(); 381 $("body").addClass("no-scroll-transition"); 382 setTimeout(() => {$("body").removeClass("no-scroll-transition");}, introDurationMS); 383} 384// On Link Click 385$("a").on("click", function (e) { 386 if ($(this).prop("hostname") == window.location.host && $(this).attr("href").indexOf("#") === -1 && 387 !$(this).hasClass(excludedClass) && $(this).attr("target") !== "_blank" && transitionTrigger.length > 0) { 388 e.preventDefault(); 389 $("body").addClass("no-scroll-transition"); 390 let transitionURL = $(this).attr("href"); 391 transitionTrigger.click(); 392 setTimeout(function () {window.location = transitionURL;}, exitDurationMS); 393 } 394}); 395// On Back Button Tap 396window.onpageshow = function(event) {if (event.persisted) {window.location.reload()}}; 397// Hide Transition on Window Width Resize 398setTimeout(() => {$(window).on("resize", function () { 399setTimeout(() => {$(".transition").css("display", "none");}, 50);}); 400}, introDurationMS); 401</script>
401 402
402<script> 403const pageContainer = document.querySelector(".locomotive-scroll"); 404/* SMOOTH SCROLL */ 405 const scroller = new LocomotiveScroll({ 406 el: pageContainer, 407 smooth: true 408}); 409 </script>
409 410
410<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>
410 411
411<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
411 412
412<script> 413gsap.registerPlugin(ScrollTrigger); 414ScrollTrigger.saveStyles(".mobile, .desktop"); 415ScrollTrigger.matchMedia({ 416"(min-width: 800px)": function() { 417scroller.on("scroll", ScrollTrigger.update); 418ScrollTrigger.scrollerProxy(pageContainer, { 419 scrollTop(value) { 420 return arguments.length 421 ? scroller.scrollTo(value, 0, 0) 422 : scroller.scroll.instance.scroll.y; 423 }, 424 getBoundingClientRect() { 425 return { 426 left: 0, 427 top: 0, 428 width: window.innerWidth, 429 height: window.innerHeight 430 }; 431 }, 432 pinType: pageContainer.style.transform ? "transform" : "fixed" 433}); 434//////////////////////////////////// 435//////////////////////////////////// 436window.addEventListener("load", function () { 437 let pinBoxes = document.querySelectorAll(".frame > *"); 438 let pinWrap = document.querySelector(".frame"); 439 let pinWrapWidth = pinWrap.offsetWidth; 440 let horizontalScrollLength = pinWrapWidth - window.innerWidth; 441 // Pinning and horizontal scrolling 442 gsap.to(".frame", { 443 scrollTrigger: { 444 scroller: pageContainer, //locomotive-scroll 445 scrub: true, 446 trigger: "#sectionPin", 447 pin: true, 448 // anticipatePin: 1, 449 start: "top top", 450 end: pinWrapWidth 451 }, 452 x: -horizontalScrollLength, 453 ease: "none" 454 }); 455 ScrollTrigger.addEventListener("refresh", () => scroller.update()); //locomotive-scroll 456 ScrollTrigger.refresh(); 457 }); 458} 459}); 460</script>
460 461</body> 462</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.