Ümit Tunç
1 line
15 KiB
PHP
1 line
15 KiB
PHP
</script></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">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></section><section id="inertia" data-animate="inertia" class="sec inertia" style="transform-style: preserve-3d; perspective: 5000px; touch-action: pan-y; cursor: grab; user-select: none;"><div data-inertia="item" class="comp inertia" style="transform-style: preserve-3d; touch-action: pan-y;"><div class="inertia-slide" style="translate: none; rotate: none; scale: none; touch-action: pan-y; transform: translate3d(127.949px, 0px, -809.47px) rotateY(-218.664deg); transform-origin: 50% 50%;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68014be6408118620403e9a0_run1.avif" loading="lazy" alt="" class="img-full" style="touch-action: pan-y;"></div><div class="inertia-slide" style="translate: none; rotate: none; scale: none; touch-action: pan-y; transform: translate3d(-74.5137px, 0px, -840.321px) rotateY(-158.664deg); transform-origin: 50% 50%;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68014be61c6cd36ab183dfcb_run2.avif" loading="lazy" alt="" class="img-full" style="touch-action: pan-y;"></div><div class="inertia-slide" style="translate: none; rotate: none; scale: none; touch-action: pan-y; transform: translate3d(-202.463px, 0px, -680.408px) rotateY(-98.664deg); transform-origin: 50% 50%;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68014be69e11d4352fe75f35_run3.avif" loading="lazy" alt="" class="img-full" style="touch-action: pan-y;"></div><div class="inertia-slide" style="translate: none; rotate: none; scale: none; touch-action: pan-y; transform: translate3d(-127.949px, 0px, -489.645px) rotateY(-38.664deg); transform-origin: 50% 50%;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68014be611882842b65d0cde_run4.avif" loading="lazy" alt="" class="img-full" style="touch-action: pan-y;"></div><div class="inertia-slide" style="translate: none; rotate: none; scale: none; touch-action: pan-y; transform: translate3d(74.5137px, 0px, -458.794px) rotateY(21.336deg); transform-origin: 50% 50%;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68014be65c4395c2a01bca17_run5.avif" loading="lazy" alt="" class="img-full" style="touch-action: pan-y;"></div><div class="inertia-slide" style="translate: none; rotate: none; scale: none; touch-action: pan-y; transform: translate3d(202.463px, 0px, -618.706px) rotateY(81.336deg); transform-origin: 50% 50%;"><img src="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/68014be64f5f29ef20ed7ccc_run6.avif" loading="lazy" alt="" class="img-full" style="touch-action: pan-y;"></div><div style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1; cursor: grab; translate: none; rotate: none; scale: none; touch-action: pan-y;"></div></div><div class="explainer-w" style="touch-action: pan-y;"><div data-module="explainer" data-css="explainer" class="explainer-comp" style="touch-action: pan-y;"><label class="div" style="touch-action: pan-y;"><input type="checkbox" class="input" style="touch-action: pan-y;"><span class="span" style="touch-action: pan-y;"><div class="explainer-he" style="touch-action: pan-y;">Feel the inertia</div><div class="plus-icon-w" style="touch-action: pan-y;"><div class="plus-line rotate" style="touch-action: pan-y;"></div><div class="plus-line" style="touch-action: pan-y;"></div></div></span></label><div data-css="" class="explainer-expandable-w" style="touch-action: pan-y;"><div class="explainer-overflow" style="touch-action: pan-y;"><div class="explainer-content-w" style="touch-action: pan-y;"><p class="explainer-par" style="touch-action: pan-y;">Continue movement from a given speed, slow naturally to a stop. Perfect for adding physicality and flow to your interface.</p></div></div></div><div class="explainer-copy-btn-w" style="touch-action: pan-y;"><button data-module="copybtn" data-copy="https://cdn.prod.website-files.com/67fea42b19018db93e3fe132/6811e2c7ef67f371639c0386_inertia-final.json.txt" class="btn copy" style="touch-action: pan-y;"><div class="btn-cent-w" style="touch-action: pan-y;"><div class="text-block" style="touch-action: pan-y;">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="touch-action: pan-y;"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 1.5H1V6.5H5V1.5ZM0 0.5V7.5H6V0.5H0Z" fill="currentColor" style="touch-action: pan-y;"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M3 8.757V10.5H9V3.5H7.42V4.5H8V9.5H4V8.757H3Z" fill="currentColor" style="touch-action: pan-y;"></path></svg></div></button></div><div class="mobile-explainer-prompt" style="touch-action: pan-y;">Copy this on Desktop</div></div></div><div class="code-block w-embed w-script" style="touch-action: pan-y;"><script style="touch-action: pan-y;"> |