1gsap.registerPlugin(ScrollTrigger); 2document.addEventListener("DOMContentLoaded", function () { 3 /* ========================= 4 SWIPER SLIDERS 5 ========================= */ 6 const swiper7 = new Swiper('.lp_art_swiper_7', { 7 loop: true, 8 speed: 4000, 9 autoplay: { 10 delay: 1, 11 disableOnInteraction: false, 12 }, 13 // Breakpoints: 5 on LG, 3 on MID, 1 on SM 14 breakpoints: { 15 1200: { 16 slidesPerView: 4, 17 spaceBetween: 30 18 }, 19 768: { 20 slidesPerView: 3, 21 spaceBetween: 20 22 }, 23 0: { 24 slidesPerView: 1, 25 spaceBetween: 10 26 } 27 }, 28 // Important for continuous ticker motion 29 freeMode: { 30 enabled: true, 31 momentum: false, 32 }, 33 // Removes the "snap" so it glides perfectly 34 momentum: false 35 }); 36 // Top Track 37 new Swiper('.lp_section_9_swiper_top', { 38 loop: true, 39 speed: 3000, 40 autoplay: { 41 delay: 0, 42 }, 43 slidesPerView: 'auto', 44 freeMode: true, 45 }); 46 new Swiper('.lp_new_about_section_3 .swiper', { 47 loop: true, 48 speed: 1000, 49 autoplay: { 50 delay: 2000, 51 disableOnInteraction: false, 52 }, 53 breakpoints: { 54 320: { 55 slidesPerView: 1, 56 spaceBetween: 20 57 }, 58 768: { 59 slidesPerView: 2, 60 spaceBetween: 30 61 }, 62 1024: { 63 slidesPerView: 3, 64 spaceBetween: 40 65 }, 66 1600: { 67 slidesPerView: 3, 68 spaceBetween: 40 69 }, 70 1800: { 71 slidesPerView: 4, 72 spaceBetween: 40 73 } 74 } 75 }); 76 // Bottom Track (RTL for alternative direction) 77 new Swiper('.lp_section_9_swiper_bottom', { 78 loop: true, 79 speed: 3000, // Different speed makes it look more lavish 80 autoplay: { 81 delay: 0, 82 }, 83 slidesPerView: 'auto', 84 freeMode: true, 85 }); 86 if (typeof Swiper !== "undefined") { 87 new Swiper(".feb-2026-slider", { 88 loop: true, 89 effect: "fade", 90 autoplay: { 91 delay: 2500, 92 disableOnInteraction: false 93 }, 94 speed: 600, 95 pagination: { 96 el: ".swiper-pagination", 97 clickable: true 98 } 99 }); 100 new Swiper(".myBookSlider", { 101 slidesPerView: 1, 102 loop: true, 103 speed: 900, 104 effect: "fade", 105 fadeEffect: { crossFade: true }, 106 autoplay: { 107 delay: 3500, 108 disableOnInteraction: false 109 } 110 }); 111 var swiper332322 = new Swiper(".logo_people_packaigng_swiper", { 112 slidesPerView: 3, 113 centeredSlides: true, 114 loop: true, 115 speed: 800, 116 spaceBetween: -60, // overlap effect 117 grabCursor: true, 118 autoplay: { 119 delay: 3000, 120 disableOnInteraction: false, 121 }, 122 breakpoints: { 123 0: { slidesPerView: 1 }, 124 768: { slidesPerView: 2 }, 125 1024: { slidesPerView: 3 } 126 } 127 }); 128 } 129 /* ========================= 130 AOS 131 ========================= */ 132 if (typeof AOS !== "undefined") { 133 AOS.init({ 134 duration: 200, 135 offset: 100 136 }); 137 window.addEventListener("load", function () { 138 AOS.refreshHard(); 139 }); 140 } 141 /* ========================= 142 MOBILE FORM FIXES 143 ========================= */ 144 if (window.innerWidth <= 768) { 145 const formBox = document.querySelector(".form-wrapper"); 146 if (formBox) { 147 formBox.style.margin = "30px 15px"; 148 formBox.style.padding = "40px 20px"; 149 const heading = formBox.querySelector("h2"); 150 if (heading) { 151 heading.innerHTML = "Connect Us Now!"; 152 heading.style.position = "static"; 153 heading.style.transform = "none"; 154 heading.style.background = "transparent"; 155 heading.style.padding = "0"; 156 heading.style.textAlign = "center"; 157 heading.style.whiteSpace = "normal"; 158 heading.style.fontSize = "24px"; 159 heading.style.marginBottom = "30px"; 160 } 161 const fakeBorder = formBox.querySelector('div[style*="height:1px"]'); 162 if (fakeBorder) fakeBorder.style.display = "none"; 163 const formRow = formBox.querySelector("form > div"); 164 if (formRow) { 165 formRow.style.flexDirection = "column"; 166 formRow.style.gap = "30px"; 167 } 168 const badge = document.getElementById("formBadge"); 169 if (badge) { 170 badge.style.position = "static"; 171 badge.style.margin = "0 auto 20px"; 172 badge.style.textAlign = "center"; 173 } 174 const inputs = formBox.querySelectorAll("input, textarea");
175 inputs.forEach(el => el.style.fontSize = "14px"); 176 const textarea = formBox.querySelector("textarea"); 177 if (textarea) { 178 textarea.style.padding = "20px 0"; 179 textarea.rows = 4; 180 } 181 const btn = formBox.querySelector("button"); 182 if (btn && btn.parentElement) { 183 btn.parentElement.style.textAlign = "center"; 184 } 185 } 186 const badge = document.getElementById('formBadge'); 187 if (badge && badge.querySelector('img')) { 188 badge.style.right = '120px'; 189 badge.querySelector('img').style.maxWidth = '160px'; 190 } 191 } 192 /* ========================= 193 COLLAPSIBLE 194 ========================= */ 195 /* ========================= 196 OWL CAROUSEL 197 ========================= */ 198 if (typeof $ !== "undefined" && $.fn.owlCarousel) { 199 $('.quote-carousel').owlCarousel({ 200 loop: true, 201 autoplay: true, 202 items: 1, 203 slideBy: 1, 204 margin: 30, 205 nav: true, 206 dots: true, 207 smartSpeed: 500, 208 navText: ["PREV", "NEXT"] 209 }); 210 } 211 /* ========================= 212 COUNTER + RING 213 ========================= */ 214 const counterConfigs = [ 215 { id: 'num-1', ring: 'ring-1', target: 80, suffix: '%', ringPercent: 80, duration: 2000 }, 216 { id: 'num-2', ring: 'ring-2', target: 4, suffix: ' sec', ringPercent: 100, duration: 2000 }, 217 { id: 'num-3', ring: 'ring-3', target: 85, suffix: '%', ringPercent: 85, duration: 2000 } 218 ]; 219 function animateNumber(el, start, end, duration, suffix) { 220 let startTimestamp = null; 221 const step = (ts) => { 222 if (!startTimestamp) startTimestamp = ts; 223 const progress = Math.min((ts - startTimestamp) / duration, 1); 224 const ease = progress < 0.5 225 ? 2 * progress * progress 226 : 1 - Math.pow(-2 * progress + 2, 2) / 2; 227 const val = Math.floor(ease * (end - start) + start); 228 el.textContent = val + suffix; 229 if (progress < 1) requestAnimationFrame(step); 230 }; 231 requestAnimationFrame(step); 232 } 233 function animateRing(ring, percent, duration) { 234 const radius = 54; 235 const circumference = 2 * Math.PI * radius; 236 let startTimestamp = null; 237 const step = (ts) => { 238 if (!startTimestamp) startTimestamp = ts; 239 const progress = Math.min((ts - startTimestamp) / duration, 1); 240 const currentPercent = progress * percent; 241 const offset = circumference - (circumference * currentPercent / 100); 242 ring.style.strokeDashoffset = offset; 243 if (progress < 1) requestAnimationFrame(step); 244 }; 245 requestAnimationFrame(step); 246 } 247 function setupObserver() { 248 const section = document.getElementById('your-counter-section'); 249 if (!section) return; 250 const observer = new IntersectionObserver((entries) => { 251 entries.forEach(entry => { 252 if (entry.isIntersecting) { 253 counterConfigs.forEach(cfg => { 254 const num = document.getElementById(cfg.id); 255 const ring = document.getElementById(cfg.ring); 256 if (num && ring) { 257 animateNumber(num, 0, cfg.target, cfg.duration, cfg.suffix); 258 animateRing(ring, cfg.ringPercent, cfg.duration); 259 } 260 }); 261 } 262 }); 263 }, { 264 threshold: 0.2, 265 rootMargin: "0px 0px -10% 0px" 266 }); 267 observer.observe(section); 268 } 269 setupObserver(); 270 /* ========================= 271 ANIMATED TEXT 272 ========================= */ 273 const sections = document.querySelectorAll(".animated-text-on-scroll"); 274 sections.forEach(section => { 275 const text = section.getAttribute("data-text"); 276 if (!text) return; 277 const heading = document.createElement("h2"); 278 text.split(" ").forEach((word, wi) => { 279 const wordSpan = document.createElement("span"); 280 wordSpan.classList.add("word-holder"); 281 word.split("").forEach((char, ci) => { 282 const charSpan = document.createElement("span"); 283 charSpan.classList.add("char"); 284 charSpan.style.transitionDelay = `${(wi * 150 + ci * 60)}ms`; 285 charSpan.textContent = char; 286 wordSpan.appendChild(charSpan); 287 }); 288 heading.appendChild(wordSpan); 289 }); 290 section.appendChild(heading); 291 const observer = new IntersectionObserver(([entry]) => { 292 if (entry.isIntersecting) { 293 section.classList.add("animate"); 294 } else { 295 section.classList.remove("animate"); 296 } 297 }, {
298 threshold: 0.2, 299 rootMargin: "0px 0px -10% 0px" 300 }); 301 observer.observe(section); 302 }); 303 /* ========================= 304 BOOK SLIDER 305 ========================= */ 306 const slides = document.querySelectorAll('#bookSlider .slide'); 307 if (slides.length) { 308 let current = 0; 309 setInterval(() => { 310 slides[current].style.opacity = "0"; 311 current = (current + 1) % slides.length; 312 slides[current].style.opacity = "1"; 313 }, 3000); 314 } 315 // CHANGES AS ON 06-04-2026 316 // 21. text-scale-anim 317 const headingslp = document.querySelectorAll('.text-scale-anim-lp-not-using'); 318 headingslp.forEach(headingdp => { 319 const textNodes = []; 320 headingdp.childNodes.forEach(node => { 321 if (node.nodeType === Node.TEXT_NODE) { 322 node.textContent.split(' ').forEach((word, index, array) => { 323 const wordSpandp = document.createElement('span'); 324 wordSpandp.classList.add('lp-word-span'); 325 word.split('').forEach(letter => { 326 const letterSpan = document.createElement('span'); 327 letterSpan.classList.add('lp-letter-span'); 328 letterSpan.textContent = letter; 329 wordSpandp.appendChild(letterSpan); 330 }); 331 textNodes.push(wordSpandp); 332 if (index < array.length - 1) { 333 textNodes.push(document.createTextNode(' ')); 334 } 335 }); 336 } else if (node.nodeType === Node.ELEMENT_NODE) { 337 textNodes.push(node.cloneNode(true)); 338 } 339 }); 340 headingdp.innerHTML = ''; 341 textNodes.forEach(node => headingdp.appendChild(node)); 342 const letters = headingdp.querySelectorAll('.lp-letter-span'); 343 letters.forEach((letter, index) => { 344 $(letter).on('mouseenter', () => { 345 // center letter 346 gsap.to(letter, { 347 scaleY: 1.6, 348 y: '-24%', 349 duration: 0.4, 350 ease: 'sine' 351 }); 352 // left neighbor 353 const prev = letters[index - 1]; 354 if (prev) { 355 gsap.to(prev, { 356 scaleY: 1.3, 357 y: '-12%', 358 duration: 0.4, 359 ease: 'sine' 360 }); 361 } 362 // right neighbor 363 const next = letters[index + 1]; 364 if (next) { 365 gsap.to(next, { 366 scaleY: 1.3, 367 y: '-12%', 368 duration: 0.4, 369 ease: 'sine' 370 }); 371 } 372 }); 373 $(letter).on('mouseleave', () => { 374 // reset center letter 375 gsap.to(letter, { 376 scaleY: 1, 377 y: '0%', 378 duration: 0.4, 379 ease: 'sine' 380 }); 381 // reset left and right neighbors 382 const prev = letters[index - 1]; 383 const next = letters[index + 1]; 384 [prev, next].forEach(el => { 385 if (el) { 386 gsap.to(el, { 387 scaleY: 1, 388 y: '0%', 389 duration: 0.4, 390 ease: 'sine' 391 }); 392 } 393 }); 394 }); 395 }); 396 }); 397 // Find ALL elements with this class 398 const newlp_all_badges = document.querySelectorAll('.newlp_dgn_badge_text'); 399 if (newlp_all_badges.length > 0) { 400 newlp_all_badges.forEach((badge_el) => { 401 // Get the text from THIS specific badge 402 const newlp_text_raw = badge_el.textContent.trim(); 403 const newlp_chars_array = newlp_text_raw.split(""); 404 // Clear THIS specific badge 405 badge_el.textContent = ""; 406 newlp_chars_array.forEach((char, i) => { 407 const rotation_deg = i * (360 / newlp_chars_array.length); 408 const char_span = document.createElement('span'); 409 char_span.style.transform = `rotate(${rotation_deg}deg)`; 410 // Critical for circular positioning 411 char_span.style.position = "absolute"; 412 char_span.style.left = "50%"; 413 char_span.innerHTML = char === " " ? " " : char; 414 badge_el.appendChild(char_span); 415 }); 416 }); 417 } 418 // Find ALL elements with this class 419 const newlp_all_badgessmall = document.querySelectorAll('.newlp_dgn_badge_text_small'); 420 if (newlp_all_badgessmall.length > 0) { 421 newlp_all_badgessmall.forEach((badge_elsmall) => { 422 // Get the text from THIS specific badge 423 const newlp_text_rawsmall = badge_elsmall.textContent.trim(); 424 const newlp_chars_arraysmall = newlp_text_rawsmall.split(""); 425 // Clear THIS specific badge 426 badge_elsmall.textContent = ""; 427 newlp_chars_arraysmall.forEach((char, i) => { 428 const rotation_degsmall = i * (360 / newlp_chars_arraysmall.length); 429 const char_spansmall = document.createElement('span'); 430 char_spansmall.style.transform = `rotate(${rotation_degsmall}deg)`; 431 // Critical for circular positioning 432 char_spansmall.style.position = "absolute"; 433 char_spansmall.style.left = "50%"; 434 char_spansmall.innerHTML = char === " " ? " " : char; 435 badge_elsmall.appendChild(char_spansmall); 436 }); 437 }); 438 } 439 // Create a timeline for the entire section 440 const brandingTL = gsap.timeline({ 441 scrollTrigger: { 442 trigger: ".logo_people_new_branding_section_2_main_wrap", 443 start: "top 80%", // Starts when the top of the section hits 80% of the viewport 444 toggleActions: "play none none none" 445 } 446 }); 447 // 1. Animate the Big Card (Left) 448 brandingTL.from(".logo_people_new_branding_section_2_big_card", { 449 x: -50, 450 opacity: 0, 451 duration: 1, 452 ease: "power3.out" 453 }); 454 // 2. Animate the palette colors one by one (Staggered) 455 brandingTL.from(".logo_people_new_branding_section_2_color", { 456 scaleX: 0, 457 opacity: 0, 458 duration: 0.5, 459 stagger: 0.1, 460 transformOrigin: "left center", 461 ease: "power2.out" 462 }, "-=0.5"); // Starts slightly before the previous animation ends 463 // 3. Animate the Middle Stacked Images 464 brandingTL.from(".logo_people_new_branding_section_2_stacked img", { 465 y: 50, 466 opacity: 0, 467 duration: 0.8, 468 stagger: 0.2, 469 ease: "power3.out" 470 }, "-=0.6"); 471 // 4. Animate the Content Wrap (Right) 472 brandingTL.from(".logo_people_new_branding_section_2_content_wrap img", { 473 x: 50, 474 opacity: 0, 475 duration: 0.8, 476 ease: "power3.out" 477 }, "-=0.6"); 478 // 5. Fade in the text and the "More" button 479 brandingTL.from(".logo_people_new_branding_section_2_text p", { 480 y: 20, 481 opacity: 0, 482 duration: 0.6, 483 stagger: 0.2, 484 ease: "power2.out" 485 }, "-=0.4"); 486 const section3_TL = gsap.timeline({ 487 scrollTrigger: { 488 trigger: ".logo_people_new_branding_section_3_main_wrap", 489 start: "top 70%", 490 end: "bottom center", 491 // 'play none none reverse' allows it to re-animate if they scroll back up 492 toggleActions: "play none none reverse" 493 } 494 }); 495 // INITIAL SETTINGS (Prevents the 'flash' of content) 496 gsap.set(".logo_people_new_branding_section_3_unit", { 497 transformPerspective: 2000, 498 rotationY: -5, 499 rotationX: 5 500 }); 501 section3_TL 502 /* 1. THE REVEALER: Shutter wipe */ 503 .from(".logo_people_new_branding_section_3_image_container", { 504 clipPath: "inset(100% 0% 0% 0%)", 505 duration: 1, 506 ease: "expo.inOut" 507 }) 508 /* 2. THE SCALE: Settle in */ 509 .from(".logo_people_new_branding_section_3_img_top", { 510 scale: 1.3, 511 duration: 1.5, 512 ease: "expo.out" 513 }, "-=0.2") 514 /* 3. THE TILT: 3D settling */ 515 .to(".logo_people_new_branding_section_3_unit", { 516 rotationY: 0, 517 rotationX: 0, 518 duration: 2, 519 ease: "power4.out" 520 }, "-=0.5") 521 const brandingSection = document.querySelector(".logo_people_new_branding_section_3_main_wrap"); 522 const brandingImage = document.querySelector(".logo_people_new_branding_section_3_img_top"); 523 if (brandingSection && brandingImage) { 524 let xTo = gsap.quickTo(brandingImage, "x", { duration: 0.6, ease: "power2.out" }); 525 let yTo = gsap.quickTo(brandingImage, "y", { duration: 0.6, ease: "power2.out" }); 526 brandingSection.addEventListener("mousemove", (e) => { 527 const { clientX, clientY } = e;
528 const xPos = (clientX / window.innerWidth - 0.5) * 30; 529 const yPos = (clientY / window.innerHeight - 0.5) * 30; 530 xTo(xPos); 531 yTo(yPos); 532 }); 533 } 534 const section8_TL = gsap.timeline({ 535 scrollTrigger: { 536 trigger: ".logo_people_new_branding_section_8_main_wrap", 537 start: "top 75%", 538 toggleActions: "play none none reverse" 539 } 540 }); 541 // INITIAL STATE: Blurred and slightly scaled up 542 gsap.set(".logo_people_new_branding_section_8_card img", { 543 scale: 1.4, 544 filter: "blur(15px)", 545 opacity: 0 546 }); 547 section8_TL 548 /* 1. Cinematic Stagger Reveal */ 549 .to(".logo_people_new_branding_section_8_card img", { 550 scale: 1, 551 filter: "blur(0px)", 552 opacity: 1, 553 stagger: 0.1, 554 duration: 1.8, 555 ease: "expo.out" 556 }) 557 /* 2. Rapid Text Entrance */ 558 .from(".logo_people_new_branding_section_8_content", { 559 y: 20, 560 opacity: 0, 561 duration: 0.8, 562 ease: "power2.out" 563 }, "-=1.2"); 564 // 1. Create the Main Timeline 565 const lavishRevealTL = gsap.timeline({ 566 scrollTrigger: { 567 trigger: ".lp_web_dev_section_2_main_wrap", 568 start: "top 65%", 569 end: "bottom top", 570 toggleActions: "play none none reverse" 571 } 572 }); 573 // PRE-SET: Elements start invisible and "digitally" distorted 574 gsap.set(".lp_web_dev_section_2_brand_stack > *", { 575 clipPath: "inset(0% 100% 0% 0%)", 576 filter: "blur(20px)", 577 x: -30 578 }); 579 gsap.set(".lp_web_dev_section_2_hand_img", { 580 clipPath: "inset(100% 0% 0% 0%)", // Reveals from bottom up like a scan 581 scale: 1.2, 582 filter: "blur(15px)", 583 opacity: 0 584 }); 585 // THE ANIMATION SEQUENCE 586 lavishRevealTL 587 /* A. The Scan-Up: Hand Mockup appears like a 3D projection */ 588 .to(".lp_web_dev_section_2_hand_img", { 589 clipPath: "inset(0% 0% 0% 0%)", 590 filter: "blur(0px)", 591 opacity: 1, 592 scale: 1, 593 duration: 2, 594 ease: "expo.inOut" 595 }) 596 /* B. The Shutter Reveal: Left stack opens like a book */ 597 .to(".lp_web_dev_section_2_brand_stack > *", { 598 clipPath: "inset(0% 0% 0% 0%)", 599 filter: "blur(0px)", 600 x: 0, 601 stagger: 0.15, 602 duration: 1.5, 603 ease: "power4.inOut" 604 }, "-=1.4") // Heavy overlap for flow 605 /* C. Typography Reveal: Soft fade and focus */ 606 .from(".lp_web_dev_section_2_content", { 607 y: 20, 608 opacity: 0, 609 filter: "blur(10px)", 610 duration: 1, 611 ease: "power2.out" 612 }, "-=0.8"); 613 // 2. THE "LAVISH" INTERACTION: Mouse Follow Parallax 614 // This makes the hand mockup feel like it's floating in a 3D environment 615 document.addEventListener("mousemove", (e) => { 616 const { clientX, clientY } = e; 617 const xPos = (clientX / window.innerWidth - 0.5) * 40; 618 const yPos = (clientY / window.innerHeight - 0.5) * 40; 619 gsap.to(".lp_web_dev_section_2_hand_img", { 620 x: xPos, 621 y: yPos, 622 rotationY: xPos / 2, 623 rotationX: -yPos / 2, 624 duration: 1.2, 625 ease: "power2.out" 626 }); 627 }); 628 const lavish3TL = gsap.timeline({ 629 scrollTrigger: { 630 trigger: ".lp_web_dev_section_3_main_wrap", 631 start: "top 70%", 632 } 633 }); 634 // Setup: Set images to clipped and blurred 635 gsap.set(".lp_web_dev_3_main_mockup", { 636 clipPath: "inset(0% 0% 100% 0%)", 637 scale: 1.1, 638 filter: "blur(20px)" 639 }); 640 lavish3TL 641 /* 1. The Mockup Reveal (Liquid Scan) */ 642 .to(".lp_web_dev_3_main_mockup", { 643 clipPath: "inset(0% 0% 0% 0%)", 644 filter: "blur(0px)", 645 scale: 1, 646 duration: 2.2, 647 ease: "expo.inOut" 648 }) 649 /* 3. Branding Grid reveals from the Right */ 650 .from(".lp_web_dev_section_3_identity_grid > *", { 651 opacity: 0, 652 x: 40, 653 filter: "blur(10px)", 654 stagger: 0.15, 655 duration: 1.5, 656 ease: "power4.out" 657 }, "-=1.5"); 658 const lp4_TL = gsap.timeline({ 659 scrollTrigger: { 660 trigger: ".lp_web_dev_section_4_main_wrap", 661 start: "top 70%", 662 toggleActions: "play none none reverse" 663 } 664 }); 665 // INITIAL STATES 666 gsap.set(".lp_web_dev_section_4_img_box", { opacity: 0, y: 100, scale: 0.8 }); 667 gsap.set(".lp_web_dev_section_4_hand_img", { opacity: 0, x: 150, rotation: 10 }); 668 lp4_TL 669 /* 1. Staggered Elastic Entrance for the left grid */ 670 .to(".lp_web_dev_section_4_img_box", { 671 opacity: 1, 672 y: 0, 673 scale: 1, 674 stagger: 0.2, 675 duration: 1.5, 676 ease: "back.out(1.7)" 677 }) 678 /* 2. Cinematic Hand Sweep */ 679 .to(".lp_web_dev_section_4_hand_img", { 680 opacity: 1, 681 x: 0, 682 rotation: 0, 683 duration: 2, 684 ease: "expo.out" 685 }, "-=1") 686 /* 3. Text Fade & Focus */ 687 .from(".lp_web_dev_section_4_text", { 688 opacity: 0, 689 y: 20, 690 filter: "blur(10px)", 691 duration: 1 692 }, "-=1.2"); 693 // LAVISH CONTINUOUS PARALLAX 694 // This makes the hand and grid move at different speeds while scrolling 695 gsap.to(".lp_web_dev_section_4_hand_img", { 696 y: -50, 697 scrollTrigger: { 698 trigger: ".lp_web_dev_section_4_main_wrap", 699 scrub: 1 700 } 701 }); 702 gsap.to(".lp_web_dev_section_4_grid_container", { 703 y: 30, 704 scrollTrigger: { 705 trigger: ".lp_web_dev_section_4_main_wrap", 706 scrub: 1 707 } 708 }); 709 const lp5_TL = gsap.timeline({ 710 scrollTrigger: { 711 trigger: ".lp_web_dev_section_5_main_wrap", 712 start: "top 70%", 713 toggleActions: "play none none reverse" 714 } 715 }); 716 // PRE-SET: Tablet starts turned away and blurred 717 gsap.set(".lp_web_dev_5_tablet_img", { 718 rotationY: -45, 719 rotationX: 10, 720 x: 100, 721 opacity: 0, 722 filter: "blur(15px)" 723 }); 724 gsap.set(".lp_web_dev_section_5_brand_identity", { opacity: 0, x: -50 }); 725 lp5_TL 726 /* 1. Left Side Slide-in */ 727 .to(".lp_web_dev_section_5_brand_identity", { 728 opacity: 1, 729 x: 0, 730 duration: 1.5, 731 ease: "expo.out" 732 }) 733 /* 2. THE TURN: Tablet swings into position */ 734 .to(".lp_web_dev_5_tablet_img", {
735 rotationY: -10, // Keeps a slight lavish "angle" instead of flat 736 rotationX: 0, 737 x: 0, 738 opacity: 1, 739 filter: "blur(0px)", 740 duration: 2.5, 741 ease: "power4.out" 742 }, "-=1.2") 743 /* 3. Text Reveal */ 744 .from(".lp_web_dev_section_5_content", { 745 y: 30, 746 opacity: 0, 747 duration: 1 748 }, "-=1"); 749 // LAVISH: Continuous Mouse-Follow "Turning" 750 const section5 = document.querySelector(".lp_web_dev_section_5_main_wrap"); 751 const tabletImg = document.querySelector(".lp_web_dev_5_tablet_img"); 752 if (section5 && tabletImg) { 753 let rotateTo = gsap.quickTo(tabletImg, "rotationY", { 754 duration: 0.8, 755 ease: "power2.out" 756 }); 757 section5.addEventListener("mousemove", (e) => { 758 const { clientX } = e; 759 const xPos = (clientX / window.innerWidth - 0.5) * 30; 760 rotateTo(-10 + (xPos / 2)); // keeps your base tilt 761 }); 762 } 763 // Timeline for Section 6 764 const lp6_RevealTL = gsap.timeline({ 765 scrollTrigger: { 766 trigger: ".lp_web_dev_section_6_main_wrap", 767 start: "top 75%", // Starts when the section enters 75% of the viewport 768 toggleActions: "play none none reverse" 769 } 770 }); 771 // Initial States (Set via JS for a cleaner CSS file) 772 gsap.set(".lp_web_dev_6_hand_img", { y: 150, opacity: 0 }); 773 gsap.set(".lp_web_dev_section_6_logo_box", { x: 50, opacity: 0 }); 774 gsap.set(".lp_web_dev_6_sign_box", { y: 80, opacity: 0, scale: 0.95 }); 775 gsap.set(".lp_web_dev_section_6_content", { opacity: 0, y: 30 }); 776 // The Animation Sequence 777 lp6_RevealTL 778 /* 1. The Phone Mockup Glides Up */ 779 .to(".lp_web_dev_6_hand_img", { 780 y: 0, 781 opacity: 1, 782 duration: 1.8, 783 ease: "power4.out" 784 }) 785 /* 2. Logo Slides in from the Right */ 786 .to(".lp_web_dev_section_6_logo_box", { 787 x: 0, 788 opacity: 1, 789 duration: 1.2, 790 ease: "expo.out" 791 }, "-=1.2") // Starts while phone is still moving 792 /* 3. The Two Branding Images Stagger Up */ 793 .to(".lp_web_dev_6_sign_box", { 794 y: 0, 795 opacity: 1, 796 scale: 1, 797 stagger: 0.2, 798 duration: 1.5, 799 ease: "power3.out" 800 }, "-=1") 801 /* 4. Text Content Fades In */ 802 .to(".lp_web_dev_section_6_content", { 803 opacity: 1, 804 y: 0, 805 duration: 1, 806 ease: "power2.out" 807 }, "-=0.8"); 808 // --- 1. Unique Scoped Selectors --- 809 const s8_listRight = document.querySelector('.track_right .lp_web_dev_page_section_8_portfolio_list'); 810 const s8_listLeft = document.querySelector('.track_left .lp_web_dev_page_section_8_portfolio_list'); 811 const s8_projectModal = document.getElementById('lpProjectModal'); 812 const s8_modalContainer = s8_projectModal.querySelector('.lp_portfolio_modal_container'); 813 const s8_modalFullImg = document.getElementById('lpModalFullImg'); 814 const s8_modalTitle = document.getElementById('lpModalTitle'); 815 const s8_portfolioCards = document.querySelectorAll('.lp_web_dev_page_section_8_portfolio_card'); 816 // --- 2. Infinite Marquee Timelines --- 817 const s8_animRight = gsap.to(s8_listRight, { 818 x: "-50%", 819 duration: 30, 820 repeat: -1, 821 ease: "none" 822 }); 823 const s8_animLeft = gsap.fromTo(s8_listLeft, { x: "-50%" }, { 824 x: "0%", 825 duration: 30, 826 repeat: -1, 827 ease: "none" 828 }); 829 // --- 3. Interaction Logic --- 830 s8_portfolioCards.forEach(s8_card => { 831 s8_card.addEventListener('click', () => { 832 // Pause specific Section 8 animations 833 s8_animRight.pause(); 834 s8_animLeft.pause(); 835 // Populate Modal Data 836 const s8_targetTitle = s8_card.getAttribute('data-title'); 837 const s8_targetImg = s8_card.getAttribute('data-full-img'); 838 s8_modalTitle.innerText = s8_targetTitle; 839 s8_modalFullImg.src = s8_targetImg; 840 // Lavish Reveal Animation 841 s8_projectModal.style.display = 'flex'; 842 gsap.fromTo(s8_modalContainer, 843 { scale: 0.85, opacity: 0 }, 844 { scale: 1, opacity: 1, duration: 0.7, ease: "expo.out" } 845 ); 846 }); 847 }); 848 // --- 4. Unique Scoped Close Function --- 849 const s8_closePortfolioModal = () => { 850 gsap.to(s8_modalContainer, { 851 scale: 0.85, 852 opacity: 0, 853 duration: 0.4, 854 ease: "power2.in", 855 onComplete: () => {
856 s8_projectModal.style.display = 'none'; 857 // Resume Marquees 858 s8_animRight.resume(); 859 s8_animLeft.resume(); 860 // Reset scroll for the next open 861 const s8_modalBody = document.querySelector('.lp_portfolio_modal_body'); 862 if (s8_modalBody) s8_modalBody.scrollTop = 0; 863 } 864 }); 865 }; 866 // Event Listeners for Closing 867 const s8_closeBtn = document.querySelector('.lp_modal_close'); 868 const s8_overlay = document.querySelector('.lp_portfolio_modal_overlay'); 869 if (s8_closeBtn) s8_closeBtn.addEventListener('click', s8_closePortfolioModal); 870 if (s8_overlay) s8_overlay.addEventListener('click', s8_closePortfolioModal); 871 /* ========================= 872 CUSTOM CURSOR (YOUR ORIGINAL + SAFE) 873========================= */ 874 const kpsUltraCursor9821 = document.querySelector(".lp_kps_ultra_cursor_9821"); 875 const kpsPortfolioSection9821 = document.querySelector(".lp_kps_portfolio_cursor_scope_9821"); 876 const kpsPortfolioCards9821 = document.querySelectorAll(".lp_web_dev_page_section_8_portfolio_card"); 877 if (kpsUltraCursor9821 && kpsPortfolioSection9821) { 878 let isInsideSection = false; 879 kpsPortfolioSection9821.addEventListener("mouseenter", () => { 880 isInsideSection = true; 881 }); 882 kpsPortfolioSection9821.addEventListener("mouseleave", () => { 883 isInsideSection = false; 884 gsap.to(kpsUltraCursor9821, { scale: 0, opacity: 0, duration: 0.2 }); 885 }); 886 document.addEventListener("mousemove", (e) => { 887 if (!isInsideSection) return; 888 gsap.to(kpsUltraCursor9821, { 889 x: e.clientX, 890 y: e.clientY, 891 duration: 0.2, 892 ease: "power3.out" 893 }); 894 }); 895 kpsPortfolioCards9821.forEach(card => { 896 card.addEventListener("mouseenter", () => { 897 gsap.to(kpsUltraCursor9821, { 898 scale: 1, 899 opacity: 1, 900 duration: 0.25 901 }); 902 }); 903 card.addEventListener("mouseleave", () => { 904 gsap.to(kpsUltraCursor9821, { 905 scale: 0, 906 opacity: 0, 907 duration: 0.2 908 }); 909 }); 910 }); 911 } 912 // ADD EVENTLISTENR ENDING 913}); 914// ADD EVENTLISTENR ENDING 915//&&&&&&&&&&&&&&&&&&&&&&& 916//&&&&&&&&&&&&&&&&&&&&&&& 917//&&&&&&&&&&&&&&&&&&&&&&& 918//&&&&&&&&&&&&&&&&&&&&&&& 919//&&&&&&&&&&&&&&&&&&&&&&& 920//&&&&&&&&&&&&&&&&&&&&&&& 921//&&&&&&&&&&&&&&&&&&&&&&& 922//&&&&&&&&&&&&&&&&&&&&&&& 923//&&&&&&&&&&&&&&&&&&&&&&& 924//&&&&&&&&&&&&&&&&&&&&&&& 925//&&&&&&&&&&&&&&&&&&&&&&& 926//&&&&&&&&&&&&&&&&&&&&&&& 927//&&&&&&&&&&&&&&&&&&&&&&& 928//&&&&&&&&&&&&&&&&&&&&&&& 929//&&&&&&&&&&&&&&&&&&&&&&& 930//&&&&&&&&&&&&&&&&&&&&&&& 931//&&&&&&&&&&&&&&&&&&&&&&& 932//&&&&&&&&&&&&&&&&&&&&&&& 933//&&&&&&&&&&&&&&&&&&&&&&& 934//&&&&&&&&&&&&&&&&&&&&&&& 935//&&&&&&&&&&&&&&&&&&&&&&& 936//&&&&&&&&&&&&&&&&&&&&&&& 937//&&&&&&&&&&&&&&&&&&&&&&& 938//&&&&&&&&&&&&&&&&&&&&&&& 939//&&&&&&&&&&&&&&&&&&&&&&& 940//&&&&&&&&&&&&&&&&&&&&&&& 941//&&&&&&&&&&&&&&&&&&&&&&& 942//&&&&&&&&&&&&&&&&&&&&&&& 943//&&&&&&&&&&&&&&&&&&&&&&& 944//&&&&&&&&&&&&&&&&&&&&&&& 945//&&&&&&&&&&&&&&&&&&&&&&& 946//&&&&&&&&&&&&&&&&&&&&&&& 947//&&&&&&&&&&&&&&&&&&&&&&& 948//&&&&&&&&&&&&&&&&&&&&&&& 949//&&&&&&&&&&&&&&&&&&&&&&& 950//&&&&&&&&&&&&&&&&&&&&&&& 951//&&&&&&&&&&&&&&&&&&&&&&& 952//&&&&&&&&&&&&&&&&&&&&&&& 953//&&&&&&&&&&&&&&&&&&&&&&& 954//&&&&&&&&&&&&&&&&&&&&&&& 955//&&&&&&&&&&&&&&&&&&&&&&& 956const _adv6_Tl = gsap.timeline({ 957 scrollTrigger: { 958 trigger: ".lp_new_business_adv_section_6", 959 start: "top 80%", 960 toggleActions: "play none none reverse" 961 } 962 }); 963 964 _adv6_Tl.from(".adv_reveal_6", { 965 y: 60, 966 opacity: 0, 967 filter: "blur(10px)", 968 stagger: 0.2, 969 duration: 1.2, 970 ease: "power3.out" 971 }); 972const _adv5_Tl = gsap.timeline({ 973 scrollTrigger: { 974 trigger: ".lp_new_business_adv_section_5", 975 start: "top 75%", 976 toggleActions: "play none none reverse" 977 } 978}); 979 980// Animate the frames with a 3D tilt and blur-to-sharp transition 981_adv5_Tl.from(".adv_reveal_5 .brochure_frame_v5, .cornitos_logo_bar", { 982 rotationY: -15, 983 rotationX: 10, 984 opacity: 0, 985 y: 60, 986 filter: "blur(15px)", 987 stagger: 0.2, 988 duration: 1.5, 989 ease: "expo.out" 990}) 991 // Bring in the text slightly after 992 .from(".brochure_text_block_v5", { 993 opacity: 0, 994 y: 20, 995 duration: 1, 996 ease: "power2.out" 997 }, "-=1"); 998const _adv4_Tl = gsap.timeline({ 999 scrollTrigger: { 1000 trigger: ".lp_new_business_adv_section_4", 1001 start: "top 80%", 1002 } 1003}); 1004 1005_adv4_Tl.from(".adv_reveal_4", { 1006 y: 40, 1007 opacity: 0, 1008 stagger: 0.1, 1009 duration: 0.8, 1010 ease: "power2.out" 1011}); 1012const _adv3_Tl = gsap.timeline({ 1013 scrollTrigger: { 1014 trigger: ".lp_new_business_adv_section_3", 1015 start: "top 80%", 1016 toggleActions: "play none none reverse" 1017 } 1018}); 1019 1020_adv3_Tl.from(".adv_reveal_3", { 1021 y: 40, 1022 opacity: 0, 1023 stagger: 0.15, 1024 duration: 1, 1025 ease: "power2.out" 1026}); 1027const _mainVid = document.getElementById("adv_sec2_main_video"); 1028if (_mainVid) { 1029 // 1. Force the video to play and loop naturally 1030 _mainVid.muted = true; 1031 _mainVid.loop = true; 1032 _mainVid.play(); 1033 // 2. Create the ScrollTrigger to increase playback speed 1034 gsap.to(_mainVid, { 1035 scrollTrigger: { 1036 trigger: ".lp_new_business_adv_section_2",
1037 start: "top bottom", // Starts when section enters view 1038 end: "bottom top", // Ends when section leaves view 1039 scrub: 0.5, // Lower scrub for faster response 1040 }, 1041 // We animate the playbackRate property 1042 // 1.0 is normal speed. 4.0 is very fast. 1043 playbackRate: 1.0, 1044 ease: "none" 1045 }); 1046} 1047// --- The Reveal Animation (Stays the same) --- 1048const _revealTl = gsap.timeline({ 1049 scrollTrigger: { 1050 trigger: ".lp_new_business_adv_section_2", 1051 start: "top 80%", 1052 } 1053}); 1054_revealTl.from(".reveal_img", { 1055 scale: 0.95, 1056 opacity: 0, 1057 filter: "blur(15px)", 1058 duration: 1.5, 1059 stagger: 0.3, 1060 ease: "expo.out" 1061}) 1062 .from(".brochure_portfolio_text", { 1063 y: 30, 1064 opacity: 0, 1065 duration: 1, 1066 ease: "power2.out" 1067 }, "-=1"); 1068const _0xVid = document.getElementById("russCanVideo"); 1069if (_0xVid) { 1070 _0xVid.onloadedmetadata = function () { 1071 gsap.to(_0xVid, { 1072 scrollTrigger: { 1073 trigger: ".lp_art_illustration_section_3", 1074 start: "top center", 1075 end: "bottom center", 1076 scrub: 1.5 1077 }, 1078 currentTime: _0xVid.duration, 1079 ease: "none" 1080 }); 1081 }; 1082} 1083// --- Secondary Animations --- 1084// 1. Illustration Subtle Scale 1085gsap.from(".lp_art_illustration_section_3_art_wrap", { 1086 scrollTrigger: { 1087 trigger: ".lp_art_illustration_section_3_art_wrap", 1088 start: "top 80%", 1089 scrub: true 1090 }, 1091 duration: 1 1092}); 1093// 2. Text Reveal 1094gsap.from(".lp_art_illustration_section_3_content > *", { 1095 scrollTrigger: { 1096 trigger: ".lp_art_illustration_section_3_content", 1097 start: "top 80%" 1098 }, 1099 x: -30, 1100 stagger: 0.2, 1101 duration: 1.2, 1102 ease: "power4.out" 1103}); 1104gsap.to(".lp_art_illustration_section_2_sign", { 1105 rotation: 3, 1106 duration: 3, 1107 repeat: -1, 1108 yoyo: true, 1109 ease: "sine.inOut", 1110 transformOrigin: "top center" 1111}); 1112gsap.from(".lp_art_illustration_section_2_main_art", { 1113 scrollTrigger: { 1114 trigger: ".lp_art_illustration_section_2", 1115 start: "top 70%", 1116 toggleActions: "play none none reverse" 1117 }, 1118 ease: "expo.out" 1119}); 1120gsap.to(".lp_art_illustration_section_2_content p", { 1121 scrollTrigger: { 1122 trigger: ".lp_art_illustration_section_2_content", 1123 start: "top 80%" 1124 }, 1125 opacity: 1, 1126 duration: 2, 1127 ease: "rough({ template: none.out, strength: 1, points: 20, taper: 'none', randomize: true, clamp: false})" 1128}); 1129const artSection = document.querySelector(".lp_art_illustration_section_2"); 1130const artImage = document.querySelector(".lp_art_illustration_section_2_main_art"); 1131if (artSection && artImage) { 1132 let rotateXTo = gsap.quickTo(artImage, "rotationX", { 1133 duration: 0.8, 1134 ease: "power2.out" 1135 }); 1136 let rotateYTo = gsap.quickTo(artImage, "rotationY", { 1137 duration: 0.8, 1138 ease: "power2.out" 1139 }); 1140} 1141// 1. Image Focus Reveal 1142gsap.fromTo(".lux_main_render", 1143 { 1144 scale: 1.15, 1145 filter: "blur(20px)", 1146 opacity: 0, 1147 rotateY: -10, 1148 y: 50 1149 }, 1150 { 1151 scrollTrigger: { 1152 trigger: ".lp_new_label_pack_section_2", 1153 start: "top 75%", 1154 end: "top 25%", 1155 scrub: 1.5, // Follows scroll smoothly 1156 }, 1157 scale: 1, 1158 filter: "blur(0px)", 1159 opacity: 1, 1160 rotateY: 0, 1161 y: 0, 1162 ease: "power2.out" 1163 } 1164); 1165// 2. Text Content Staggered Reveal 1166const textTl = gsap.timeline({ 1167 scrollTrigger: { 1168 trigger: ".lux_text_content", 1169 start: "top 80%", 1170 } 1171}); 1172textTl.from(".lux_title", { 1173 y: 40, 1174 opacity: 0, 1175 duration: 1.2, 1176 ease: "expo.out" 1177}) 1178 .from(".lux_description", { 1179 y: 20, 1180 opacity: 0, 1181 duration: 1, 1182 ease: "power3.out" 1183 }, "-=0.8") 1184 .to(".lux_accent_line", { 1185 width: "80px", 1186 duration: 1, 1187 ease: "power4.inOut" 1188 }, "-=0.5"); 1189// 3. Subtle Continuous Floating 1190gsap.to(".lux_main_render", { 1191 y: -15, 1192 duration: 3, 1193 repeat: -1, 1194 yoyo: true, 1195 ease: "sine.inOut" 1196}); 1197gsap.from(".lp_inf_card", { 1198 scrollTrigger: { 1199 trigger: ".lp_new_label_pack_section_inf", 1200 start: "top 85%", 1201 toggleActions: "play none none reverse", 1202 }, 1203 opacity: 0, 1204 y: 60, 1205 duration: 1.2, 1206 stagger: 0.15, 1207 ease: "power4.out", 1208 clearProps: "all" 1209}); 1210gsap.to(".lp_inf_main_img", { 1211 scrollTrigger: { 1212 trigger: ".lp_new_label_pack_section_inf", 1213 start: "top bottom", 1214 end: "bottom top", 1215 scrub: 1.5, 1216 }, 1217 y: -30, 1218 ease: "none" 1219}); 1220gsap.from(".lp_new_contact_form .custom-field-group", { 1221 scrollTrigger: { 1222 trigger: ".lp_new_contact_form", 1223 start: "top 85%", 1224 }, 1225 y: 40, 1226 opacity: 0, 1227 stagger: 0.15, 1228 duration: 1, 1229 ease: "power3.out" 1230}); 1231gsap.from(".cnt-submit-btn", { 1232 scrollTrigger: { 1233 trigger: ".cnt-submit-btn", 1234 start: "top 95%", 1235 }, 1236 scale: 0.8, 1237 opacity: 0, 1238 delay: 0.8, 1239 duration: 0.8, 1240 ease: "back.out(1.7)" 1241}); 1242/* header menu new */ 1243$('#navtoggle').click(function() { 1244 $(this).toggleClass('active'); 1245 $('header').toggleClass('navopen'); 1246 }); 1247 1248 jQuery(function($) { 1249 $(window).scroll(function(){ 1250 if ($(window).scrollTop() > 0){ 1251 $('header:first').addClass('header-fixed-top').css({'padding-top':'10px', 'background':'#e43945','color':'#fff', 'min-height': '76px'}); 1252 $("#grid").css({"color":"#fff",'text-align':'center'}); 1253 $(".mob_contect_no").css({"position":"absolute","top":"50%","left":"50%","transform":"translate(-50%,-50%)","margin-top":"0"}); 1254 } else { 1255 $('header:first').removeClass('header-fixed-top').css({'padding':'', 'background':''}); 1256 $('header').removeClass('header-fixed-top').css({'padding':'', 'background':''}); 1257 1258 $(".mob_contect_no").css({"position":"unset","top":"unset","left":"unset","background-color":"#e43945","color":"#000","transform":"translateX(0)","margin-top":"8px"}); 1259 } 1260 }); 1261}); 1262 1263$(window).scroll(function (event) { 1264 if($(window).scrollTop() >= 10) { 1265 $("#normal_logo").css({"display":"none"}); 1266 $(".toogle_button span").css({"background":"#fff"}); 1267 $("#stick_head").css({'display':'inline-block','width':'60px'}); 1268 $("small").css({"color":"#fff"}); 1269 $(".language select").css({"color":"#fff", 'background-color':'#e43945'}); 1270 $(".langconsult").css({"color":"#fff"}); 1271 $(".langconsult a").css({"color":"#fff"}); 1272 $(".toogle_button").css({"right":"5%"}); 1273 $("#stick_head").attr("src", "https://www.logopeople.in/wp-content/themes/logopeople/img/bogo-01.svg"); 1274 } else { 1275 $("#stick_head").attr("src", "https://www.logopeople.in/wp-content/themes/logopeople/img/logo.svg"); 1276 $("#normal_logo").css({"display":"inline-block"}); 1277 $("#stick_head").css({"display":"none"}); 1278 $(".toogle_button span").css({"background":"#000"}); 1279 $("small").css({"color":"#000"}); 1280 $(".language select").css({"color":"#000", 'background-color':'#fff'}); 1281 $(".langconsult").css({"color":"#000"}); 1282 $(".langconsult a").css({"color":"#000"}); 1283 $(".toogle_button").css({"top":"0","right":"5%"}); 1284 } 1285}); 1286 1287var btn = document.getElementsByClassName("collapsible"); 1288var i; 1289 1290for (i = 0; i < btn.length; i++) { 1291 btn[i].addEventListener("click", function() { 1292 1293 this.classList.toggle("active"); 1294 1295 /* Toggle between hiding and showing the active panel */ 1296 var panel = this.nextElementSibling; 1297 if (panel.style.display === "block") { 1298 panel.style.display = "none"; 1299 } else { 1300 panel.style.display = "block"; 1301 } 1302 }); 1303}
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.