citrus/resources/views/templates/neler-yapariz/sections/scrolltrigger.blade.php

</script></div></section><section id="scrolltrigger" data-animate="videogrow" class="sec scrolltrigger-sec"><div class="sticky-w"><div class="comp video"><div data-videogrow="title" class="font-c size-screen overflow-cut" aria-label="Scrolltrigger"><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">S</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">c</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">r</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">o</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">l</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">l</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">t</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">r</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">i</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">g</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">g</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">e</div><div aria-hidden="true" style="position: relative; display: inline-block; translate: none; rotate: none; scale: none; transform: translate(0px, 0px);">r</div></div></div><div class="layer"><div data-videogrow="video" class="sky-scroller" style="translate: none; rotate: none; scale: none; transform: scale(0.9, 0.9); clip-path: inset(0%);"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68013ab170e0a7b7eb1a7ebe_sky.avif" loading="lazy" sizes="(max-width: 1198px) 100vw, 1198px" srcset="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68013ab170e0a7b7eb1a7ebe_sky-p-500.avif 500w, https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68013ab170e0a7b7eb1a7ebe_sky.avif 1198w" alt="" class="img-sky" style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px);"></div></div></div><div class="layer flex-b z-3"><div class="explainer-w"><div data-module="explainer" data-css="explainer" class="explainer-comp"><label class="div"><input type="checkbox" class="input"><span class="span"><div class="explainer-he">Scroll with purpose</div><div class="plus-icon-w"><div class="plus-line rotate"></div><div class="plus-line"></div></div></span></label><div data-css="" class="explainer-expandable-w"><div class="explainer-overflow"><div class="explainer-content-w"><p class="explainer-par">Start animations when elements enter the viewport, scrub through timelines, pin elements in place, or snap to key points as users scroll.</p></div></div></div><div class="explainer-copy-btn-w"><button data-module="copybtn" data-copy="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/6811e2c83012fa3b59370ce3_scrolltrigger-final.json.txt" class="btn copy"><div class="btn-cent-w"><div class="text-block">Copy this</div><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 9 11" fill="none" class="svg copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 1.5H1V6.5H5V1.5ZM0 0.5V7.5H6V0.5H0Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M3 8.757V10.5H9V3.5H7.42V4.5H8V9.5H4V8.757H3Z" fill="currentColor"></path></svg></div></button></div><div class="mobile-explainer-prompt">Copy this on Desktop</div></div></div></div></section><section id="slider" class="sec"><div data-animate="slider" class="comp slider-w"><div class="slider-ctrls-w"><div data-slider="progress" class="slider-progress-w"><div class="progress-bar" style="width: 25%;"></div></div></div><ul data-slider="slides" role="list" class="slides w-list-unstyled" style="touch-action: pan-y; cursor: grab; user-select: none;"><li class="slide-outer" style="touch-action: pan-y; translate: none; rotate: none; scale: none; transform: translate(100.142%, 0%) translate3d(0px, 0px, 0px);"><div class="slide" style="touch-action: pan-y;"><div class="slide-col flex-ve" style="touch-action: pan-y;"><div style="touch-action: pan-y;">Precise</div><div class="slide-text-block" style="touch-action: pan-y;"><h3 class="font-c size-md" style="touch-action: pan-y;">ACTIONS</h3><div style="touch-action: pan-y;">GSAP turns clicks into vivid stories with precise motion, making every interaction feel intentional and alive.</div></div></div><div class="slide-col" style="touch-action: pan-y;"><div class="slide-img" style="touch-action: pan-y;"><div class="dual-img" style="touch-action: pan-y;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/681210bec12b45a849356ced_face-3.avif" loading="eager" alt="" class="dual-img-img" style="touch-action: pan-y;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/681210beae98361a89953455_face-5-shadow.avif" loading="eager" alt="" class="dual-img-shadow" style="touch-action: pan-y;"></div></div></div></div></li><li class="slide-outer current" style="touch-action: pan-y; translate: none; rotate: none; scale: none; transform: translate(100.142%, 0%) translate3d(0px, 0px, 0px);"><div class="slide" style="touch-action: pan-y;"><div class="slide-col flex-ve" style="touch-action: pan-y;"><div style="touch-action: pan-y;">Focus</div><div class="slide-text-block" style="touch-action: pan-y;"><h3 class="font-c size-md" style="touch-action: pan-y;">ATTENTION</h3><div style="touch-action: pan-y;">GSAP sharpens focus with smooth animations, drawing attention to your message for a lasting, memorable impact.</div></div></div><div class="slide-col" style="touch-action: pan-y;"><div class="slide-img" style="touch-action: pan-y;"><div class="dual-img" style="touch-action: pan-y;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/681210befd586a86f7da095a_face-2.avif" loading="eager" alt="" class="dual-img-img" style="touch-action: pan-y;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/681210beae98361a89953455_face-5-shadow.avif" loading="eager" alt="" class="dual-img-shadow" style="touch-action: pan-y;"></div></div></div></div></li><li class="slide-outer" style="touch-action: pan-y; translate: none; rotate: none; scale: none; transform: translate(100.142%, 0%) translate3d(0px, 0px, 0px);"><div class="slide" style="touch-action: pan-y;"><div class="slide-col flex-ve" style="touch-action: pan-y;"><div style="touch-action: pan-y;">Expressive</div><div class="slide-text-block" style="touch-action: pan-y;"><h3 class="font-c size-md" style="touch-action: pan-y;">Motion</h3><div style="touch-action: pan-y;">GSAP infuses elements with expressive motion, transforming static pages into emotional, engaging journeys.</div></div></div><div class="slide-col" style="touch-action: pan-y;"><div class="slide-img" style="touch-action: pan-y;"><div class="dual-img" style="touch-action: pan-y;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/681210be0b24dede691834f1_face-1.avif" loading="eager" alt="" class="dual-img-img" style="touch-action: pan-y;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/681210beae98361a89953455_face-5-shadow.avif" loading="eager" alt="" class="dual-img-shadow" style="touch-action: pan-y;"></div></div></div></div></li><li class="slide-outer" style="touch-action: pan-y; translate: none; rotate: none; scale: none; transform: translate(-399.858%, 0%) translate3d(0px, 0px, 0px);"><div class="slide" style="touch-action: pan-y;"><div class="slide-col flex-ve" style="touch-action: pan-y;"><div style="touch-action: pan-y;">Powerful</div><div class="slide-text-block" style="touch-action: pan-y;"><h3 class="font-c size-md" style="touch-action: pan-y;">IMPACT</h3><div style="touch-action: pan-y;">GSAP delivers animations with powerful impact, ensuring your story resonates clearly and leaves a mark.</div></div></div><div class="slide-col" style="touch-action: pan-y;"><div class="slide-img" style="touch-action: pan-y;"><div class="dual-img" style="touch-action: pan-y;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/681210be710d60755f407cac_face-4.avif" loading="eager" alt="" class="dual-img-img" style="touch-action: pan-y;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/681210beae98361a89953455_face-5-shadow.avif" loading="eager" alt="" class="dual-img-shadow" style="touch-action: pan-y;"></div></div></div></div></li><li class="slide-outer" style="touch-action: pan-y; translate: none; rotate: none; scale: none; transform: translate(-399.858%, 0%) translate3d(0px, 0px, 0px);"><div class="slide" style="touch-action: pan-y;"><div class="slide-col flex-ve" style="touch-action: pan-y;"><div style="touch-action: pan-y;">Seamless</div><div class="slide-text-block" style="touch-action: pan-y;"><h3 class="font-c size-md" style="touch-action: pan-y;">FLOW</h3><div style="touch-action: pan-y;">GSAP crafts seamless flow in motion, syncing with users to create natural, captivating interactions.</div></div></div><div class="slide-col" style="touch-action: pan-y;"><div class="slide-img" style="touch-action: pan-y;"><div class="dual-img" style="touch-action: pan-y;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/681210be320f33da1bb17f66_face-5.avif" loading="eager" alt="" class="dual-img-img" style="touch-action: pan-y;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/681210beae98361a89953455_face-5-shadow.avif" loading="eager" alt="" class="dual-img-shadow" style="touch-action: pan-y;"></div></div></div></div></li></ul><div class="slider-ctrls-w"><button data-slider="prev" class="btn arrow"><div data-wf--u-arrow-button--variant="flip" class="arrow-btn"><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 26 16" fill="none" class="svg arrow w-variant-352da3df-a236-ccac-dbb8-8845a582a471"><path fill-rule="evenodd" clip-rule="evenodd" d="M19.3431 0.929124L25.7071 7.29308C26.0976 7.68361 26.0976 8.31677 25.7071 8.7073L19.3431 15.0713C18.9526 15.4618 18.3195 15.4618 17.9289 15.0713C17.5384 14.6807 17.5384 14.0476 17.9289 13.657L22.5858 9.00019H1C0.447715 9.00019 0 8.55248 0 8.00019C0 7.44791 0.447715 7.00019 1 7.00019H22.5858L17.9289 2.34334C17.5384 1.95281 17.5384 1.31965 17.9289 0.929124C18.3195 0.538599 18.9526 0.538599 19.3431 0.929124Z" fill="currentColor"></path></svg></div></button><ul data-slider="dots" role="list" class="dots-w w-list-unstyled"><li><button class="btn slider-dot"></button></li><li><button class="btn slider-dot current"></button></li><li><button class="btn slider-dot"></button></li><li><button class="btn slider-dot"></button></li><li><button class="btn slider-dot"></button></li></ul><button data-slider="next" class="btn arrow"><div data-wf--u-arrow-button--variant="base" class="arrow-btn"><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 26 16" fill="none" class="svg arrow"><path fill-rule="evenodd" clip-rule="evenodd" d="M19.3431 0.929124L25.7071 7.29308C26.0976 7.68361 26.0976 8.31677 25.7071 8.7073L19.3431 15.0713C18.9526 15.4618 18.3195 15.4618 17.9289 15.0713C17.5384 14.6807 17.5384 14.0476 17.9289 13.657L22.5858 9.00019H1C0.447715 9.00019 0 8.55248 0 8.00019C0 7.44791 0.447715 7.00019 1 7.00019H22.5858L17.9289 2.34334C17.5384 1.95281 17.5384 1.31965 17.9289 0.929124C18.3195 0.538599 18.9526 0.538599 19.3431 0.929124Z" fill="currentColor"></path></svg></div></button></div></div><div class="explainer-w"><div data-module="explainer" data-css="explainer" class="explainer-comp"><label class="div"><input type="checkbox" class="input"><span class="span"><div class="explainer-he">Endless by design</div><div class="plus-icon-w"><div class="plus-line rotate"></div><div class="plus-line"></div></div></span></label><div data-css="" class="explainer-expandable-w"><div class="explainer-overflow"><div class="explainer-content-w"><p class="explainer-par">Ideal for smooth marquees, auto playing sliders, and loops that just keep rolling.</p></div></div></div><div class="explainer-copy-btn-w"><button data-module="copybtn" data-copy="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/6811e2c885ad5b6f59e2efe1_slider-final.json.txt" class="btn copy"><div class="btn-cent-w"><div class="text-block">Copy this</div><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 9 11" fill="none" class="svg copy-icon" style="translate: none; rotate: none; scale: none; transform: rotate(360deg);"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 1.5H1V6.5H5V1.5ZM0 0.5V7.5H6V0.5H0Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M3 8.757V10.5H9V3.5H7.42V4.5H8V9.5H4V8.757H3Z" fill="currentColor"></path></svg></div></button></div><div class="mobile-explainer-prompt">Copy this on Desktop</div></div></div><div class="code-block w-embed w-script"><script>