1<!DOCTYPE html><!-- This site was created in Webflow. https://webflow.com --><!-- Last Published: Sun May 17 2026 17:40:50 GMT+0000 (Coordinated Universal Time) --><html data-wf-domain="daodesign.vn" data-wf-page="6984a4d167577ba26ed66a43" data-wf-site="696db0cd2780ac54df960dfb" lang="vi-VN" data-wf-view-events="157084810"><head><meta charset="utf-8"><link href="https://cdn.prod.website-files.com" rel="preconnect"><title>Contact Us</title><meta content="Contact us directly or send your information through the form, and our team will get back to you as soon as possible." name="description"><meta content="Liên há» vá»i chúng tôi" property="og:title"><meta content="Hãy liên há» trá»±c tiếp hoặc gá»i thông tin qua biá»u mẫu, Äá»i ngÅ© cá»§a chúng tôi sẽ kết ná»i vá»i bạn trong thá»i gian sá»m nhất." property="og:description"><meta content="https://cdn.prod.website-files.com/696db0cd2780ac54df960dfb/69fb446471f4324c1cd051d2_Frame%2035307.png" property="og:image"><meta content="Liên há» vá»i chúng tôi" name="twitter:title"><meta content="Hãy liên há» trá»±c tiếp hoặc gá»i thông tin qua biá»u mẫu, Äá»i ngÅ© cá»§a chúng tôi sẽ kết ná»i vá»i bạn trong thá»i gian sá»m nhất." name="twitter:description"><meta property="og:type" content="website"><meta content="summary_large_image" name="twitter:card"><meta content="width=device-width, initial-scale=1" name="viewport"><meta content="Webflow" name="generator"><link href="/696db0cd2780ac54df960dfb/css/dao-design-caef76.webflow.shared.7cdbea56c.css" rel="stylesheet" type="text/css">
1<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>
1<link href="/696db0cd2780ac54df960dfb/69fca0740a8358870edd55bb_Frame 35306.png" rel="icon" type="image/png" sizes="32x32" media="(prefers-color-scheme: light)"><link href="/696db0cd2780ac54df960dfb/69fca0740a8358870edd55bb_Frame 35306.png" rel="icon" type="image/png" sizes="32x32" media="(prefers-color-scheme: dark)"><link href="/696db0cd2780ac54df960dfb/69fca07435b81ac8d8bfc4df_Frame 35306.png" rel="icon" type="image/png" sizes="48x48"><link href="/696db0cd2780ac54df960dfb/69fca07434dd18e7f10ef3c3_Frame 35306.png" rel="apple-touch-icon" sizes="180x180"><link href="/696db0cd2780ac54df960dfb/69fca0741ec8033a63822224_Frame 35306.png" rel="icon" type="image/png" sizes="192x192"><link href="/696db0cd2780ac54df960dfb/69fca07440f8bfb60165c108_Frame 35306.png" rel="icon" type="image/png" sizes="512x512"><style>.anti-flicker, .anti-flicker * {visibility: hidden !important; opacity: 0 !important;}</style><style>[data-wf-hidden-variation], [data-wf-hidden-variation] * { 2 display: none !important; 3 }</style>
3<script type="text/javascript">(function(e){var s={r:[]};e.wf={r:s.r,ready:t=>{s.r.push(t)}}})(window)</script>
3<link href="/snippet/117540725.js" rel="preload" as="script"><style id="dd-mobile"> 4/* ââ Design Dynamics Mobile Responsive CSS ââ */ 5@media screen and (max-width: 767px) { 6 /* Prevent horizontal scroll */ 7 body, html { overflow-x: hidden !important; max-width: 100vw !important; } 8 9 /* Logo */ 10 .brand-logo { max-width: 180px !important; height: auto !important; } 11 12 /* Navbar */ 13 .navbar-main, .navbar-content-flex { flex-wrap: wrap; } 14 .container-4 { padding-left: 16px !important; padding-right: 16px !important; } 15 16 /* Hero section */ 17 .section-banner { min-height: 70vh !important; } 18 .hero-big-text { font-size: clamp(28px, 10vw, 60px) !important; } 19 .hero-left-text p, .hero-right-text p { font-size: 13px !important; } 20 .hero-content-wrapper { padding: 16px !important; } 21 .hero-bottom-content { flex-direction: column; gap: 12px; } 22 23 /* About section */ 24 .about-wrapper { flex-direction: column !important; gap: 24px !important; } 25 .about-left-box, .about-right-box { width: 100% !important; } 26 .medium-content-text { font-size: 16px !important; line-height: 1.6 !important; } 27 28 /* Sponsor logos */ 29 .sponser-logo-wrap { gap: 16px !important; } 30 .sponser-logo-img { max-height: 28px !important; } 31 32 /* Design Process */ 33 .work-process-sticky { position: relative !important; } 34 .work-process-view { flex-direction: column !important; } 35 .sub-heading { font-size: clamp(24px, 8vw, 40px) !important; } 36 .service-list { padding-left: 0 !important; } 37 .service-content { padding: 16px 0 !important; } 38 39 /* Services accordion */ 40 .content-title { font-size: clamp(22px, 7vw, 36px) !important; } 41 .service-hover-wrapper { padding: 0 !important; } 42 .hover-content { display: none !important; } 43 .hover-content.tablet { display: block !important; } 44 45 /* Projects grid */ 46 .collection-list-3.w-row { flex-direction: column !important; } 47 .collection-item-5 { width: 100% !important; max-width: 100% !important; } 48 .project_content_card { min-height: 260px !important; } 49 50 /* Project page grid */ 51 .project-collection { flex-direction: column !important; } 52 .project-iteam { width: 100% !important; } 53 54 /* Testimonials */ 55 .testimonials-wrap { flex-direction: column !important; gap: 24px !important; } 56 .testimonial-5, .testimonial-7, .testimonial-8 { width: 100% !important; } 57 .testimonial-content-1 { font-size: 15px !important; } 58 59 /* Footer */ 60 .footer_component-wrapper { flex-direction: column !important; gap: 32px !important; } 61 .footer_contact, .footer_site-map-wrapper, .footer_message { width: 100% !important; } 62 .footer_divider-vertical { display: none !important; } 63 .div-block-80 { flex-direction: column !important; gap: 8px !important; text-align: center !important; } 64 65 /* Contact page */ 66 .form { flex-direction: column !important; } 67 .form_field { width: 100% !important; } 68 .two-col { flex-direction: column !important; } 69} 70 71@media screen and (max-width: 479px) { 72 .brand-logo { max-width: 150px !important; } 73 .hero-big-text { font-size: clamp(22px, 9vw, 40px) !important; } 74 .sub-heading { font-size: clamp(20px, 7vw, 32px) !important; } 75 .content-title { font-size: clamp(18px, 6vw, 28px) !important; } 76 .para-2, .para-3 { font-size: 14px !important; } 77 .section { padding: 40px 0 !important; } 78 .w-layout-blockcontainer { padding-left: 16px !important; padding-right: 16px !important; } 79 .hero-slider-v1 { min-height: 50vh !important; } 80 .collection-item-5 { padding: 8px !important; } 81 .project_content_headline { font-size: 16px !important; } 82} 83 84/* Project detail mobile */ 85@media screen and (max-width: 767px) { 86 .showcase_hero-wrapper { flex-direction: column !important; } 87 .showcase_section_hero { padding: 40px 0 !important; } 88 .showcase_hero_image-1 { max-width: 100% !important; height: auto !important; } 89 .showcase_overview-1-wrapper { flex-direction: column !important; } 90 .showcase_solution-wrapper { flex-direction: column !important; } 91 .showcase_solution-1 { flex-direction: column !important; } 92 .showcase_solution-1a { flex-direction: column !important; } 93 .showcase_solution-2 { flex-direction: column !important; } 94 .showcase_solution-3 { flex-direction: column !important; } 95 .showcase_goal-wrapper { flex-direction: column !important; } 96 .showcase_result-wrapper { flex-direction: column !important; } 97 .showcase_mockup-wrapper { flex-direction: column !important; } 98 .showcase_section_overview-1 { padding: 40px 0 !important; } 99 .showcase_section_solution { padding: 40px 0 !important; } 100 .showcase_section_goal { padding: 40px 0 !important; } 101 .showcase_section_result { padding: 40px 0 !important; } 102 .rich-text-block-2, .rich-text-block-3, .rich-text-block-4 { font-size: 15px !important; } 103 .w-richtext img { max-width: 100% !important; height: auto !important; } 104 .showcase_solution-1_text, .showcase_solution-2_text, .showcase_solution-3_text { width: 100% !important; } 105} 106 107/* Projects listing mobile */ 108@media screen and (max-width: 767px) { 109 .project_hero-wrapper { min-height: 50vh !important; padding: 40px 16px !important; } 110 .project_section_hero { padding: 40px 0 !important; } 111 .project_section_content { padding: 40px 0 !important; } 112 .tab-bar { flex-wrap: wrap !important; gap: 8px !important; } 113} 114</style> 115</head><body><div class="w-layout-blockcontainer nav-bar-wrapper container w-container"><div data-animation="default" class="navbar w-nav" data-easing2="ease-in-out" data-easing="ease-in-out-quad" data-collapse="all" role="banner" data-no-scroll="1" data-duration="700" data-doc-height="1"><div class="container-2 w-container"><nav role="navigation" class="nav-menu w-nav-menu"><div class="div-block-55"><div class="dot-off display-none"></div><a data-wf-native-id-path="4c7736e7-ffa4-e2fd-3497-d81e9ed39e05:fabb575e-3f8d-63d2-45ec-937ac47ddb66" data-wf-ao-click-engagement-tracking="true" data-wf-element-id="fabb575e-3f8d-63d2-45ec-937ac47ddb66" data-wf-component-context="%5B%7B%22componentId%22%3A%22d874adae-ecc0-4e22-b291-8f844bf68f4f%22%2C%22instanceId%22%3A%224c7736e7-ffa4-e2fd-3497-d81e9ed39e05%22%7D%5D" href="/" class="nav-link w-nav-link">Home</a></div><div class="divider_horizontal"></div><div class="div-block-55 align-right padding-104"><div class="dot-off display-none"></div><a data-wf-native-id-path="4c7736e7-ffa4-e2fd-3497-d81e9ed39e05:4b5859cd-4859-e24b-571a-4c962ef77ec6" data-wf-ao-click-engagement-tracking="true" data-wf-element-id="4b5859cd-4859-e24b-571a-4c962ef77ec6" data-wf-component-context="%5B%7B%22componentId%22%3A%22d874adae-ecc0-4e22-b291-8f844bf68f4f%22%2C%22instanceId%22%3A%224c7736e7-ffa4-e2fd-3497-d81e9ed39e05%22%7D%5D" href="/about" class="nav-link w-nav-link">About</a></div><div class="divider_horizontal"></div><div class="div-block-55 padding-104"><div class="dot-off display-none"></div><a data-wf-native-id-path="4c7736e7-ffa4-e2fd-3497-d81e9ed39e05:79ae7e77-7d41-ef5b-68e7-7911f0d4ac6e" data-wf-ao-click-engagement-tracking="true" data-wf-element-id="79ae7e77-7d41-ef5b-68e7-7911f0d4ac6e" data-wf-component-context="%5B%7B%22componentId%22%3A%22d874adae-ecc0-4e22-b291-8f844bf68f4f%22%2C%22instanceId%22%3A%224c7736e7-ffa4-e2fd-3497-d81e9ed39e05%22%7D%5D" href="/projects" class="nav-link w-nav-link">Projects</a></div><div class="divider_horizontal"></div><div class="div-block-55 padding-104 display-none"><img src="/696db0cd2780ac54df960dfb/697f22865c3f556475c009cc_arrow-up-right.png" loading="lazy" alt="" class="image-18 display-none"><a data-wf-native-id-path="4c7736e7-ffa4-e2fd-3497-d81e9ed39e05:c25780ea-61d9-52cb-fbb3-8a578e77a917" data-wf-ao-click-engagement-tracking="true" data-wf-element-id="c25780ea-61d9-52cb-fbb3-8a578e77a917" data-wf-component-context="%5B%7B%22componentId%22%3A%22d874adae-ecc0-4e22-b291-8f844bf68f4f%22%2C%22instanceId%22%3A%224c7736e7-ffa4-e2fd-3497-d81e9ed39e05%22%7D%5D" href="/contact" aria-current="page" class="nav-link display-none w-nav-link w--current">connect now</a></div><div class="div-block-53"><a data-wf-native-id-path="4c7736e7-ffa4-e2fd-3497-d81e9ed39e05:3d2b56cd-6549-1bdb-55f2-c8fc49941ea1" data-wf-ao-click-engagement-tracking="true" data-wf-element-id="3d2b56cd-6549-1bdb-55f2-c8fc49941ea1" data-wf-component-context="%5B%7B%22componentId%22%3A%22d874adae-ecc0-4e22-b291-8f844bf68f4f%22%2C%22instanceId%22%3A%224c7736e7-ffa4-e2fd-3497-d81e9ed39e05%22%7D%5D" href="/contact" aria-current="page" class="nav-link-copy w-nav-link w--current">connect now</a><img src="/696db0cd2780ac54df960dfb/697f22865c3f556475c009cc_arrow-up-right.png" loading="lazy" alt="" class="image-18"></div></nav><a data-wf-native-id-path="4c7736e7-ffa4-e2fd-3497-d81e9ed39e05:52ac2585-4ad3-b3bc-e66e-6c82eeec27de" data-wf-ao-click-engagement-tracking="true" data-wf-element-id="52ac2585-4ad3-b3bc-e66e-6c82eeec27de" data-wf-component-context="%5B%7B%22componentId%22%3A%22d874adae-ecc0-4e22-b291-8f844bf68f4f%22%2C%22instanceId%22%3A%224c7736e7-ffa4-e2fd-3497-d81e9ed39e05%22%7D%5D" href="/" class="brand w-nav-brand"><div class="div-block-51"><img src="/696db0cd2780ac54df960dfb/design-dynamics-logo.svg" alt="" class="image-16"></div></a><div class="menu-wrapper w-nav-button"><div data-hover="" role="button" data-menu-button="burger" class="menu-button"><div class="text-block-37">MENU</div><div class="div-block-81"><div class="menu-button-line"></div><div class="menu-button-line"></div><div class="menu-button-line"></div></div></div><div class="icon w-icon-nav-menu"></div></div></div></div><div class="code-embed-4 w-embed w-script">
115<script src="/npm/[email protected]/dist/gsap.min.js"></script>
vendor: 1 bytes, line 115
115
116<script src="/npm/[email protected]/dist/CustomEase.min.js"></script>
116 117
118<script> 119gsap.registerPlugin(CustomEase) 120CustomEase.create("button-ease", "0.5, 0.05, 0.05, 0.99") 121 122function initMenuButton() { 123 // Select elements 124 const menuButton = document.querySelector("[data-menu-button]"); 125 const lines = document.querySelectorAll(".menu-button-line"); 126 const [line1, line2, line3] = lines; 127 128 // Define one global timeline 129 let menuButtonTl = gsap.timeline({ 130 defaults:{ 131 overwrite:"auto", 132 ease: "button-ease", 133 duration: 0.3 134 } 135 }) 136 137 const menuOpen = () => { 138 menuButtonTl.clear() // Stop any previous tweens, if any 139 .to(line2, { scaleX: 0, opacity: 0 }) // Step 1: Hide middle line 140 .to(line1, { x: "-1.3em", opacity: 0 }, "<") // Step 1: Movetop line 141 .to(line3, { x: "1.3em", opacity: 0 }, "<") // Step 1: Move bottom line 142 .to([line1,line3],{opacity:0, duration: 0.1},"<+=0.2") // Step 2: Quickly fade top and bottom lines 143 .set(line1, { rotate: -135, y: "-1.3em", scaleX: 0.9 }) // Step 3: Instantly rotate and scale top line 144 .set(line3, { rotate: 135, y: "-1.4em", scaleX: 0.9 }, "<") // Step 3: Instantly rotate and scale bottom line 145 .to(line1, { opacity: 1, x: "0em", y: "0.5em"}) // Step 4: Move top line to final position 146 .to(line3, { opacity: 1, x: "0em", y: "-0.25em" }, "<+=0.1"); // Step 4: Move bottom line to final position 147 } 148 149 const menuClose = () => { 150 menuButtonTl.clear() // Stop any previous tweens, if any 151 .to([line1, line2, line3], { // Move all lines back in a different animation 152 scaleX: 1, 153 rotate: 0, 154 x: "0em", 155 y: "0em", 156 opacity: 1, 157 duration: 0.45, 158 overwrite: "auto", 159 }) 160 } 161 162 // Toggle Animation 163 menuButton.addEventListener("click", () => { 164 const currentState = menuButton.getAttribute("data-menu-button"); 165 166 if (currentState === "burger") { 167 menuOpen() 168 menuButton.setAttribute("data-menu-button", "close"); 169 } else { 170 menuClose() 171 menuButton.setAttribute("data-menu-button", "burger"); 172 } 173 }); 174} 175 176// Initialize Burger Menu Button 177document.addEventListener('DOMContentLoaded', () => { 178 initMenuButton(); 179}); 180</script>
180</div></div><div data-animation="default" data-collapse="medium" data-duration="500" data-easing="ease-in" data-easing2="ease-in" role="banner" class="navbar-3-none-homepage w-nav"><div class="navbar-main"><div class="container-4 w-container"><div class="navbar-content-flex"><div class="brand-logo-block"><a data-wf-native-id-path="521136eb-a020-9d88-2e83-b4f750644239" data-wf-ao-click-engagement-tracking="true" data-wf-element-id="521136eb-a020-9d88-2e83-b4f750644239" href="/" class="brand-logo-link w-nav-brand"><img src="/696db0cd2780ac54df960dfb/design-dynamics-logo.svg" alt="" class="brand-logo"></a></div><nav role="navigation" class="nav-menu-3 w-nav-menu"><div class="nav-menu-flex-down"><a href="/" data-w-id="521136eb-a020-9d88-2e83-b4f75064423d" data-wf-native-id-path="521136eb-a020-9d88-2e83-b4f75064423d" data-wf-ao-click-engagement-tracking="true" data-wf-element-id="521136eb-a020-9d88-2e83-b4f75064423d" class="nav-menu-link w-inline-block"><div style="opacity:0" class="nav-menu-dot"></div><div class="nav-text">Home</div></a><a data-w-id="521136eb-a020-9d88-2e83-b4f750644241" data-wf-native-id-path="521136eb-a020-9d88-2e83-b4f750644241" data-wf-ao-click-engagement-tracking="true" data-wf-element-id="521136eb-a020-9d88-2e83-b4f750644241" href="/about" class="nav-menu-link w-inline-block"><div style="opacity:0" class="nav-menu-dot"></div><div class="nav-text">About</div></a><a data-w-id="521136eb-a020-9d88-2e83-b4f750644245" data-wf-native-id-path="521136eb-a020-9d88-2e83-b4f750644245" data-wf-ao-click-engagement-tracking="true" data-wf-element-id="521136eb-a020-9d88-2e83-b4f750644245" href="/projects" class="nav-menu-link w-inline-block"><div style="opacity:0" class="nav-menu-dot"></div><div class="nav-text">Projects</div></a><div class="button-wrap nav-tablet"><a data-wf-native-id-path="521136eb-a020-9d88-2e83-b4f75064424a" data-wf-ao-click-engagement-tracking="true" data-wf-element-id="521136eb-a020-9d88-2e83-b4f75064424a" href="/#contact" class="nav-button w-inline-block"><div class="nav-button-dot"></div><div class="nav-button-text-wrap"><div class="nav-button-text">Contact</div><div class="nav-button-text">Contact</div></div></a></div></div></nav><div class="navbar-button-humber-wrapper"><div class="button-wrap nav"><a data-wf-native-id-path="521136eb-a020-9d88-2e83-b4f750644253" data-wf-ao-click-engagement-tracking="true" data-wf-element-id="521136eb-a020-9d88-2e83-b4f750644253" href="/contact" aria-current="page" class="nav-button w-inline-block w--current"><div class="nav-button-dot"></div><div class="nav-button-text-wrap"><div class="nav-button-text">Contact</div><div class="nav-button-text">Contact</div></div></a></div><div class="nav-menu-button w-nav-button"><div data-w-id="521136eb-a020-9d88-2e83-b4f75064425b" data-is-ix2-target="1" class="lottie-animation-3" data-animation-type="lottie" data-src="/69f976603849e045838b90f9/69f976653849e045838b9177_Hamburger.lottie" data-loop="0" data-direction="1" data-autoplay="0" data-renderer="svg" data-default-duration="0" data-duration="4.083333333333333" data-loading="eager"></div></div></div></div></div></div></div><div class="page-wrapper"><div class="main-wrapper"><div class="padding-section-72"></div><section class="contact_section_form"><div class="w-layout-blockcontainer contact_form_wrapper w-container"><div class="div-block-41"><div class="div-block-43"><div class="div-block-44"><div data-scramble="load" class="text-block-23">Ready to share?</div><div class="text-block-24">Contact us directly or send your information through the form, and our team will get back to you as soon as possible.</div></div><div class="div-block-42"><a data-wf-native-id-path="632026f9-dbaf-8a5e-f1d5-789cb2b1b83b" data-wf-ao-click-engagement-tracking="true" data-wf-element-id="632026f9-dbaf-8a5e-f1d5-789cb2b1b83b" href="tel:0974761996" class="link-block-3 w-inline-block"><img src="/696db0cd2780ac54df960dfb/6984a71581f7bc11086aa648_Frame 427.svg" loading="lazy" alt=""><div>+91 98765 43210</div></a><a data-wf-native-id-path="8c70cd20-e706-83a1-9174-3179f81439a2" data-wf-ao-click-engagement-tracking="true" data-wf-element-id="8c70cd20-e706-83a1-9174-3179f81439a2" href="mailto:[email protected]" class="link-block-3 w-inline-block"><img src="/696db0cd2780ac54df960dfb/6984a715beab28641c7f958c_memory_email.svg" loading="lazy" alt=""><div>[email protected]</div></a><div style="display:flex;align-items:center;gap:8px;"><img src="/696db0cd2780ac54df960dfb/69807d7781bcb5165398e84a_pixel_globe.png" loading="lazy" alt="" style="width:20px;"><div>+1 (310) 555-0147</div></div></div></div><div class="div-block-45"><div class="w-form"><form id="wf-form-" name="wf-form-" data-name="" method="get" class="form" data-wf-page-id="6984a4d167577ba26ed66a43" data-wf-element-id="e1939185-b2be-5587-6b5f-ebb26427506f"><div class="form_field"><label for="name" class="field-label">full name</label><div class="text-field_wrapper"><input class="text-field w-input" maxlength="256" name="name" data-name="Name" placeholder="" type="text" id="name" required=""><div class="divider_horizontal"></div></div></div><div class="w-layout-hflex flex-block-3"><div class="form_field"><label for="email" class="field-label">Email</label><div class="text-field_wrapper"><input class="text-field w-input" maxlength="256" name="Email" data-name="Email" placeholder="" type="email" id="Email" required=""><div class="divider_horizontal"></div></div></div><div class="form_field"><label for="email" class="field-label">Phone Number</label><div class="text-field_wrapper"><input class="text-field w-input" maxlength="256" name="Phone" data-name="Phone" placeholder="" type="tel" id="Phone" required=""><div class="divider_horizontal"></div></div></div></div><div class="form_field"><label for="email" class="field-label">MESSAGE</label><div class="text-field_wrapper"><input class="text-field w-input" maxlength="256" name="Note" data-name="Note" placeholder="Tell us more about your project..." type="text" id="Note" required=""><div class="divider_horizontal"></div></div></div><input type="submit" data-wait="Please wait..." data-wf-native-id-path="cc830734-0e5f-8d3f-4240-cb674f49a4eb:cc830734-0e5f-8d3f-4240-cb674f49a4ec" data-wf-ao-click-engagement-tracking="true" data-wf-element-id="cc830734-0e5f-8d3f-4240-cb674f49a4ec" data-wf-component-context="%5B%7B%22componentId%22%3A%22cc830734-0e5f-8d3f-4240-cb674f49a4ec%22%2C%22instanceId%22%3A%22cc830734-0e5f-8d3f-4240-cb674f49a4eb%22%7D%5D" class="submit-button w-button" value="SEND REQUEST"></form><div class="success-message w-form-done"><div class="text-block-30">Thank you! We will contact you as soon as possible.</div></div><div class="w-form-fail"><div>Oops! Something went wrong while submitting the form.</div></div></div></div></div></div><div class="padding-section-120"></div><section class="footer"><div class="carousel-wrapper"><div class="carousel"><div class="div-block-19"><div class="text-block-8">INSPIRE<br></div><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAArElEQVR4nO3YsQ3CMBBA0VsgQoxAA4xFBRJsxwK0YQBGYI18REEFkVAgic/6T/IAX2e7uAhJkqTBgC2wi8yADXAHOuAUySNecsYAZ949Yw6RCbAA2p6YXJPBmJwxx8jEmFIZ8y2gAZYTnhVw64nZ/xJyoRzd4MkUFjI8xpACr1ZTxWOf4fu9/nUSUzOiFDVFtEbMzYiS1LQOWn9Y0OWZRE9M3oiqltiSJCnG9QDveKjnQP0BZAAAAABJRU5ErkJggg==" alt="Right" class="img"><div class="text-block-8">DELIVERY</div><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAArElEQVR4nO3YsQ3CMBBA0VsgQoxAA4xFBRJsxwK0YQBGYI18REEFkVAgic/6T/IAX2e7uAhJkqTBgC2wi8yADXAHOuAUySNecsYAZ949Yw6RCbAA2p6YXJPBmJwxx8jEmFIZ8y2gAZYTnhVw64nZ/xJyoRzd4MkUFjI8xpACr1ZTxWOf4fu9/nUSUzOiFDVFtEbMzYiS1LQOWn9Y0OWZRE9M3oiqltiSJCnG9QDveKjnQP0BZAAAAABJRU5ErkJggg==" alt="Right" class="img"></div><div class="div-block-19"><div class="text-block-8">CREATE<br></div><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAArElEQVR4nO3YsQ3CMBBA0VsgQoxAA4xFBRJsxwK0YQBGYI18REEFkVAgic/6T/IAX2e7uAhJkqTBgC2wi8yADXAHOuAUySNecsYAZ949Yw6RCbAA2p6YXJPBmJwxx8jEmFIZ8y2gAZYTnhVw64nZ/xJyoRzd4MkUFjI8xpACr1ZTxWOf4fu9/nUSUzOiFDVFtEbMzYiS1LQOWn9Y0OWZRE9M3oiqltiSJCnG9QDveKjnQP0BZAAAAABJRU5ErkJggg==" alt="Right" class="img"><div class="text-block-8">INSPIRE<br></div><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAArElEQVR4nO3YsQ3CMBBA0VsgQoxAA4xFBRJsxwK0YQBGYI18REEFkVAgic/6T/IAX2e7uAhJkqTBgC2wi8yADXAHOuAUySNecsYAZ949Yw6RCbAA2p6YXJPBmJwxx8jEmFIZ8y2gAZYTnhVw64nZ/xJyoRzd4MkUFjI8xpACr1ZTxWOf4fu9/nUSUzOiFDVFtEbMzYiS1LQOWn9Y0OWZRE9M3oiqltiSJCnG9QDveKjnQP0BZAAAAABJRU5ErkJggg==" alt="Right" class="img"></div><div class="div-block-19"><div class="text-block-8">DELIVERY</div><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAArElEQVR4nO3YsQ3CMBBA0VsgQoxAA4xFBRJsxwK0YQBGYI18REEFkVAgic/6T/IAX2e7uAhJkqTBgC2wi8yADXAHOuAUySNecsYAZ949Yw6RCbAA2p6YXJPBmJwxx8jEmFIZ8y2gAZYTnhVw64nZ/xJyoRzd4MkUFjI8xpACr1ZTxWOf4fu9/nUSUzOiFDVFtEbMzYiS1LQOWn9Y0OWZRE9M3oiqltiSJCnG9QDveKjnQP0BZAAAAABJRU5ErkJggg==" alt="Right" class="img"><div class="text-block-8">CREATE</div><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAArElEQVR4nO3YsQ3CMBBA0VsgQoxAA4xFBRJsxwK0YQBGYI18REEFkVAgic/6T/IAX2e7uAhJkqTBgC2wi8yADXAHOuAUySNecsYAZ949Yw6RCbAA2p6YXJPBmJwxx8jEmFIZ8y2gAZYTnhVw64nZ/xJyoRzd4MkUFjI8xpACr1ZTxWOf4fu9/nUSUzOiFDVFtEbMzYiS1LQOWn9Y0OWZRE9M3oiqltiSJCnG9QDveKjnQP0BZAAAAABJRU5ErkJggg==" alt="Right" class="img"></div></div><div class="carousel"><div class="div-block-19"><div class="text-block-8">INSPIRE<br></div><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAArElEQVR4nO3YsQ3CMBBA0VsgQoxAA4xFBRJsxwK0YQBGYI18REEFkVAgic/6T/IAX2e7uAhJkqTBgC2wi8yADXAHOuAUySNecsYAZ949Yw6RCbAA2p6YXJPBmJwxx8jEmFIZ8y2gAZYTnhVw64nZ/xJyoRzd4MkUFjI8xpACr1ZTxWOf4fu9/nUSUzOiFDVFtEbMzYiS1LQOWn9Y0OWZRE9M3oiqltiSJCnG9QDveKjnQP0BZAAAAABJRU5ErkJggg==" alt="Right" class="img"><div class="text-block-8">DELIVERY</div><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAArElEQVR4nO3YsQ3CMBBA0VsgQoxAA4xFBRJsxwK0YQBGYI18REEFkVAgic/6T/IAX2e7uAhJkqTBgC2wi8yADXAHOuAUySNecsYAZ949Yw6RCbAA2p6YXJPBmJwxx8jEmFIZ8y2gAZYTnhVw64nZ/xJyoRzd4MkUFjI8xpACr1ZTxWOf4fu9/nUSUzOiFDVFtEbMzYiS1LQOWn9Y0OWZRE9M3oiqltiSJCnG9QDveKjnQP0BZAAAAABJRU5ErkJggg==" alt="Right" class="img"></div><div class="div-block-19"><div class="text-block-8">CREATE<br></div><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAArElEQVR4nO3YsQ3CMBBA0VsgQoxAA4xFBRJsxwK0YQBGYI18REEFkVAgic/6T/IAX2e7uAhJkqTBgC2wi8yADXAHOuAUySNecsYAZ949Yw6RCbAA2p6YXJPBmJwxx8jEmFIZ8y2gAZYTnhVw64nZ/xJyoRzd4MkUFjI8xpACr1ZTxWOf4fu9/nUSUzOiFDVFtEbMzYiS1LQOWn9Y0OWZRE9M3oiqltiSJCnG9QDveKjnQP0BZAAAAABJRU5ErkJggg==" alt="Right" class="img"><div class="text-block-8">INSPIRE<br></div><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAArElEQVR4nO3YsQ3CMBBA0VsgQoxAA4xFBRJsxwK0YQBGYI18REEFkVAgic/6T/IAX2e7uAhJkqTBgC2wi8yADXAHOuAUySNecsYAZ949Yw6RCbAA2p6YXJPBmJwxx8jEmFIZ8y2gAZYTnhVw64nZ/xJyoRzd4MkUFjI8xpACr1ZTxWOf4fu9/nUSUzOiFDVFtEbMzYiS1LQOWn9Y0OWZRE9M3oiqltiSJCnG9QDveKjnQP0BZAAAAABJRU5ErkJggg==" alt="Right" class="img"></div><div class="div-block-19"><div class="text-block-8">DELIVERY</div><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAArElEQVR4nO3YsQ3CMBBA0VsgQoxAA4xFBRJsxwK0YQBGYI18REEFkVAgic/6T/IAX2e7uAhJkqTBgC2wi8yADXAHOuAUySNecsYAZ949Yw6RCbAA2p6YXJPBmJwxx8jEmFIZ8y2gAZYTnhVw64nZ/xJyoRzd4MkUFjI8xpACr1ZTxWOf4fu9/nUSUzOiFDVFtEbMzYiS1LQOWn9Y0OWZRE9M3oiqltiSJCnG9QDveKjnQP0BZAAAAABJRU5ErkJggg==" alt="Right" class="img"><div class="text-block-8">CREATE</div><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAArElEQVR4nO3YsQ3CMBBA0VsgQoxAA4xFBRJsxwK0YQBGYI18REEFkVAgic/6T/IAX2e7uAhJkqTBgC2wi8yADXAHOuAUySNecsYAZ949Yw6RCbAA2p6YXJPBmJwxx8jEmFIZ8y2gAZYTnhVw64nZ/xJyoRzd4MkUFjI8xpACr1ZTxWOf4fu9/nUSUzOiFDVFtEbMzYiS1LQOWn9Y0OWZRE9M3oiqltiSJCnG9QDveKjnQP0BZAAAAABJRU5ErkJggg==" alt="Right" class="img"></div></div></div><div class="footer-wrapper"><div class="w-layout-blockcontainer footer_component-wrapper w-container"><div id="w-node-de562e6c-0f4a-79be-cdaf-34f4cba07b02-cba07ae4" class="footer_contact"><div class="div-block-20-copy"><img loading="lazy" src="/696db0cd2780ac54df960dfb/69807d7662ecd0c600bde722_pixelarticons_home.png" alt=""><div class="text-block-9">based in India</div></div><div class="div-block-20-copy"><img loading="lazy" src="/696db0cd2780ac54df960dfb/69807d7781bcb5165398e84a_pixel_globe.png" alt=""><div class="text-block-9">+91 98765 43210</div></div><div class="div-block-20-copy"><img loading="lazy" src="/696db0cd2780ac54df960dfb/69807d7781bcb5165398e84a_pixel_globe.png" alt=""><div class="text-block-9">+1 (310) 555-0147</div></div><a data-wf-native-id-path="c08a4bb7-eb2b-646d-6ae1-c9dc50f6c1d9:0722df4d-6687-c5e5-887a-107749e2e26b" data-wf-ao-click-engagement-tracking="true" data-wf-element-id="0722df4d-6687-c5e5-887a-107749e2e26b" data-wf-component-context="%5B%7B%22componentId%22%3A%22de562e6c-0f4a-79be-cdaf-34f4cba07ae4%22%2C%22instanceId%22%3A%22c08a4bb7-eb2b-646d-6ae1-c9dc50f6c1d9%22%7D%5D" href="mailto:[email protected]" class="link-block-6
180w-inline-block"><div class="div-block-20-copy"><img loading="lazy" src="/696db0cd2780ac54df960dfb/69807d779f29c66f643aafc4_memory_email.png" alt=""><div class="text-block-9">[email protected]</div></div></a></div><div id="w-node-de562e6c-0f4a-79be-cdaf-34f4cba07b0f-cba07ae4" class="footer_site-map-wrapper"><div class="footer_divider-vertical"></div><div class="footer_site-map"><div class="footer_divider adjust"></div><a data-wf-native-id-path="c08a4bb7-eb2b-646d-6ae1-c9dc50f6c1d9:de562e6c-0f4a-79be-cdaf-34f4cba07b12" data-wf-ao-click-engagement-tracking="true" data-wf-element-id="de562e6c-0f4a-79be-cdaf-34f4cba07b12" data-wf-component-context="%5B%7B%22componentId%22%3A%22de562e6c-0f4a-79be-cdaf-34f4cba07ae4%22%2C%22instanceId%22%3A%22c08a4bb7-eb2b-646d-6ae1-c9dc50f6c1d9%22%7D%5D" href="/" class="div-block-20 w-inline-block"><div class="text-block-9-copy">home</div><img loading="lazy" src="/696db0cd2780ac54df960dfb/69807ea86dfbb91e86f00814_arrow-up-right.png" alt="" class="image-50"></a><div class="footer_divider"></div><a data-wf-native-id-path="c08a4bb7-eb2b-646d-6ae1-c9dc50f6c1d9:de562e6c-0f4a-79be-cdaf-34f4cba07b17" data-wf-ao-click-engagement-tracking="true" data-wf-element-id="de562e6c-0f4a-79be-cdaf-34f4cba07b17" data-wf-component-context="%5B%7B%22componentId%22%3A%22de562e6c-0f4a-79be-cdaf-34f4cba07ae4%22%2C%22instanceId%22%3A%22c08a4bb7-eb2b-646d-6ae1-c9dc50f6c1d9%22%7D%5D" href="/projects" class="div-block-20 w-inline-block"><div class="text-block-9-copy">projects</div><img loading="lazy" src="/696db0cd2780ac54df960dfb/69807ea86dfbb91e86f00814_arrow-up-right.png" alt=""></a><div class="footer_divider"></div><a data-wf-native-id-path="c08a4bb7-eb2b-646d-6ae1-c9dc50f6c1d9:de562e6c-0f4a-79be-cdaf-34f4cba07b1c" data-wf-ao-click-engagement-tracking="true" data-wf-element-id="de562e6c-0f4a-79be-cdaf-34f4cba07b1c" data-wf-component-context="%5B%7B%22componentId%22%3A%22de562e6c-0f4a-79be-cdaf-34f4cba07ae4%22%2C%22instanceId%22%3A%22c08a4bb7-eb2b-646d-6ae1-c9dc50f6c1d9%22%7D%5D" href="/about" class="div-block-20 w-inline-block"><div class="text-block-9-copy">about</div><img loading="lazy" src="/696db0cd2780ac54df960dfb/69807ea86dfbb91e86f00814_arrow-up-right.png" alt=""></a><div class="footer_divider"></div><div class="div-block-20 display-none"><div class="text-block-9-copy">idea</div><img loading="lazy" src="/696db0cd2780ac54df960dfb/69807ea86dfbb91e86f00814_arrow-up-right.png" alt=""></div><div class="footer_divider"></div><a data-wf-native-id-path="c08a4bb7-eb2b-646d-6ae1-c9dc50f6c1d9:de562e6c-0f4a-79be-cdaf-34f4cba07b26" data-wf-ao-click-engagement-tracking="true" data-wf-element-id="de562e6c-0f4a-79be-cdaf-34f4cba07b26" data-wf-component-context="%5B%7B%22componentId%22%3A%22de562e6c-0f4a-79be-cdaf-34f4cba07ae4%22%2C%22instanceId%22%3A%22c08a4bb7-eb2b-646d-6ae1-c9dc50f6c1d9%22%7D%5D" href="/contact" aria-current="page" class="div-block-20 w-inline-block w--current"><div class="text-block-9-copy">connect</div><img loading="lazy" src="/696db0cd2780ac54df960dfb/69807ea86dfbb91e86f00814_arrow-up-right.png" alt=""></a></div><div class="footer_divider-vertical"></div></div><div class="footer_message"><div class="text-block-10"><strong>Ready to share?</strong></div><div class="text-block-11">Connect with us to start the journey of realizing your vision.</div></div></div><div class="footer_logo"><div class="div-block-22"><div class="div-block-20-copy"><img loading="lazy" src="/696db0cd2780ac54df960dfb/69807d778cf0fcc17d89f7b2_solar_copyright-broken.png" alt=""><div class="text-block-9">Design Dynamics</div></div><div class="div-block-20-copy"><img loading="lazy" src="/696db0cd2780ac54df960dfb/69807d7781bcb5165398e84a_pixel_globe.png" alt=""><div class="text-block-9">working globally</div></div></div><div class="div-block-80" style="border-top:1px solid rgba(255,255,255,0.1);margin-top:24px;padding-top:20px;display:flex;justify-content:space-between;align-items:center;"><span style="font-family:inherit;font-size:13px;color:rgba(255,255,255,0.4);letter-spacing:0.05em;">© 2025 Design Dynamics. All rights reserved.</span><span style="font-family:inherit;font-size:13px;color:rgba(255,255,255,0.4);letter-spacing:0.05em;">Crafted with precision.</span></div></div></div></section></section></div></div><div class="transition"><div class="transition-block-3"></div></div><img src="/696db0cd2780ac54df960dfb/69ac5ba4251449e1247d444f_Frame 35304.svg" loading="lazy" alt="" class="cursor">
180<script src="/js/jquery-3.5.1.min.dc5e7f18c8.js__site_696db0cd2780ac54df960dfb" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="></script>
180<script src="/696db0cd2780ac54df960dfb/js/webflow.schunk.d1f366092ea27f7d.js" type="text/javascript"></script>
180<script src="/696db0cd2780ac54df960dfb/js/webflow.schunk.51486e39e9925d2c.js" type="text/javascript"></script>
180<script src="/696db0cd2780ac54df960dfb/js/webflow.schunk.fe839e84701ce45f.js" type="text/javascript"></script>
180<script src="/696db0cd2780ac54df960dfb/js/webflow.schunk.dac51c455b7e76af.js" type="text/javascript"></script>
180<script src="/696db0cd2780ac54df960dfb/js/webflow.f28f1308.b00d9d337b0dd103.js" type="text/javascript"></script>
180 181<!-- Smooth Scrolling -->
182<script src="/gh/studio-freight/[email protected]/bundled/lenis.js"></script>
182 183
184<script> 185const lenis = new Lenis({ 186duration: 1.8, 187easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // https://www.desmos.com/calculator/brs54l4xou 188direction: 'vertical', // vertical, horizontal 189gestureDirection: 'vertical', // vertical, horizontal, both 190smooth: true, 191mouseMultiplier: 1, 192smoothTouch: false, 193touchMultiplier: 2, 194infinite: false, 195}) 196 197//get scroll value 198lenis.on('scroll', ({ scroll, limit, velocity, direction, progress }) => { console.log({ scroll, limit, velocity, direction, progress }) 199}) 200 201function raf(time) 202 203{ 204lenis.raf(time) 205 206 207requestAnimationFrame(raf) 208} 209 210requestAnimationFrame(raf) 211</script>
211 212 213 214 215 216 217<!--pixelate page transition-->
218<script src="/npm/[email protected]/dist/gsap.min.js"></script>
218 219
220<script> 221function adjustGrid() { 222 return new Promise((resolve) => { 223 const transition = document.querySelector('.transition'); 224 225 // Get computed style of the grid and extract the number of columns 226 const computedStyle = window.getComputedStyle(transition); 227 const gridTemplateColumns = computedStyle.getPropertyValue('grid-template-columns'); 228 const columns = gridTemplateColumns.split(' ').length; // Count the number of columns 229 230 const blockSize = window.innerWidth / columns; 231 const rowsNeeded = Math.ceil(window.innerHeight / blockSize); 232 233 // Update grid styles 234 transition.style.gridTemplateRows = `repeat(${rowsNeeded}, ${blockSize}px)`; 235 236 // Calculate the total number of blocks needed 237 const totalBlocks = columns * rowsNeeded; 238 239 // Clear existing blocks 240 transition.innerHTML = ''; 241 242 // Generate blocks dynamically 243 for (let i = 0; i < totalBlocks; i++) { 244 const block = document.createElement('div'); 245 block.classList.add('transition-block'); 246 transition.appendChild(block); 247 } 248 249 // Resolve the Promise after grid creation is complete 250 resolve(); 251 }); 252} 253 254 255document.addEventListener("DOMContentLoaded", () => { 256 adjustGrid().then(() => { 257 let pageLoadTimeline = gsap.timeline({ 258 onStart: () => { 259 gsap.set(".transition", { background: "transparent" }); 260 }, 261 onComplete: () => { 262 gsap.set(".transition", { display: "none" }); 263 }, 264 defaults: { 265 ease: "linear" 266 } 267 }); 268 269 // Play the timeline only after the grid is ready 270 pageLoadTimeline.to(".transition-block", { 271 opacity: 0, 272 duration: 0.1, 273 stagger: { amount: 0.75, from: "random" }, 274 }, 0.5); 275 }); 276 277 // Pre-process all valid links 278 const validLinks = Array.from(document.querySelectorAll("a")).filter(link => { 279 const href = link.getAttribute("href") || ""; 280 const hostname = new URL(link.href, window.location.origin).hostname; 281 282 return ( 283 hostname === window.location.hostname && // Same domain 284 !href.startsWith("#") && // Not an anchor link 285 link.getAttribute("target") !== "_blank" && // Not opening in a new tab 286 !link.hasAttribute("data-transition-prevent") // No 'data-transition-prevent' attribute 287 ); 288 }); 289 290 // Add event listeners to pre-processed valid links 291 validLinks.forEach(link => { 292 link.addEventListener("click", (event) => { 293 event.preventDefault(); 294 const destination = link.href; 295 296 // Show loading grid with animation 297 gsap.set(".transition", { display: "grid" }); 298 gsap.fromTo( 299 ".transition-block", 300 { autoAlpha: 0 }, 301 { 302 autoAlpha: 1, 303 duration: 0.001, 304 ease: "linear", 305 stagger: { amount: 0.5, from: "random" }, 306 onComplete: () => { 307 window.location.href = destination; 308 } 309 } 310 ); 311 }); 312 }); 313 314 window.addEventListener("pageshow", (event) => { 315 if (event.persisted) { 316 window.location.reload(); 317 } 318 }); 319 320 window.addEventListener('resize', adjustGrid); 321}); 322</script>
322 323 324 325<style> 326/* Show grid on page load (it's set to display none in Webflow) */ 327.transition{ display: grid; } 328 329/* Hide grid in the editor */ 330.w-editor .transition{ display: none; } 331</style> 332 333 334 335 336<!-- custom cursor that detect mouse device--> 337<style> 338@media (hover: hover) and (pointer: fine) { 339 body:has(a:hover) .cursor { 340 width: 2rem; 341 } 342} 343</style> 344
345<script> 346document.addEventListener("DOMContentLoaded", function () { 347 348 const hasMouse = window.matchMedia("(hover: hover) and (pointer: fine)").matches; 349 350 // Stop cursor script on tablets & phones 351 if (!hasMouse) { 352 const cursor = document.querySelector(".cursor"); 353 if (cursor) cursor.style.display = "none"; 354 return; 355 } 356 357 // Custom cursor animation 358 gsap.set(".cursor", { xPercent: -50, yPercent: -50 }); 359 360 let xTo = gsap.quickTo(".cursor", "x", { duration: 0.3, ease: "power3" }); 361 let yTo = gsap.quickTo(".cursor", "y", { duration: 0.3, ease: "power3" }); 362 363 window.addEventListener("mousemove", e => { 364 xTo(e.clientX); 365 yTo(e.clientY); 366 }); 367 368}); 369</script>
369 370<!-- GSAP library -->
371<script src="/npm/[email protected]/dist/gsap.min.js"></script>
371 372 373 374 375 376<!-- carousel -->
377<script src="/npm/[email protected]/dist/gsap.min.js"></script>
377 378
379<script> 380window.addEventListener("load", () => { 381 gsap.utils.toArray(".carousel-wrapper").forEach((wrap) => { 382 const tracks = wrap.querySelectorAll(".carousel"); 383 384 const tweens = Array.from(tracks).map((track) => 385 gsap.to(track, { xPercent: -100, duration: 20, ease: "none", repeat: -1 }) 386 ); 387 388 gsap.set(wrap, { pointerEvents: "auto" }); 389 390 gsap.utils.toArray([wrap]).forEach((el) => { 391 el.onmouseenter = () => tweens.forEach((t) => t.pause()); 392 el.onmouseleave = () => tweens.forEach((t) => t.resume()); 393 }); 394 }); 395}); 396</script>
396 397 398 399 400 401<!-- Hero Text Scramble Animation -->
402<script src="/npm/[email protected]/dist/gsap.min.js"></script>
vendor: 1 bytes, line 402
402
403<script src="/npm/[email protected]/dist/ScrambleTextPlugin.min.js"></script>
vendor: 1 bytes, line 403
403
404<script src="/npm/[email protected]/dist/SplitText.min.js"></script>
vendor: 1 bytes, line 404
404
405<script src="/npm/[email protected]/dist/ScrollTrigger.min.js"></script>
405 406
407<script> 408gsap.registerPlugin(ScrollTrigger, ScrambleTextPlugin, SplitText) 409 410// Function to reveal stuff on load 411function initScrambleOnLoad(){ 412 let targets = document.querySelectorAll('[data-scramble="load"]') 413 414 targets.forEach((target) => { 415 // split into seperate words + letters 416 let split = new SplitText(target, { 417 type: "words, chars", 418 wordsClass: "word", 419 charsClass: "char" 420 }); 421 422 gsap.to(split.words, { 423 delay: 0.5, 424 duration: 1.2, 425 stagger: 0.01, 426 scrambleText: { 427 text: "{original}", 428 chars: 'upperCase', // experiment with different scramble characters here 429 speed: 0.85, 430 }, 431 // Once animation is done, revert the split to reduce DOM size 432 onComplete: () => split.revert() 433 }); 434 }); 435} 436 437// Initialize Scramble Functions 438document.addEventListener("DOMContentLoaded", () => { 439 initScrambleOnLoad(); 440 initScrambleOnScroll(); 441 initScrambleOnHover(); 442}); 443 444</script>
444 445
446<script src="/nav-fix.js"></script>
446</body></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.