window.addEventListener("load", function () { let logoMoving = gsap .timeline({ repeat: -1, repeatDelay: 0 }) .to(".logo-grid", { x: "-100%", ease: "none", duration: 30 }) .set(".logo-grid", { x: "0%" }); //Banner let banner_tl_duration = 0.3; let expand_width = $(".floating-banner-inner").innerWidth(); let show_banner_tl = gsap .timeline({ paused: true, onStart: () => { gsap.set(".floating-banner", { pointerEvents: "auto" }); }, delay: 1, ease: "power2.inOut" }) .fromTo( ".floating-banner-inner-side.floating", { y: 50, scale: 0, opacity: 0 }, { y: 0, scale: 1, opacity: 1, duration: banner_tl_duration } ) .fromTo( ".floating-banner-inner-circle-bg._1", { opacity: 1, scale: 1 }, { opacity: 1, scale: 1.5, delay: 0.25, duration: banner_tl_duration * 1.25 }, "<" ) .to(".floating-banner-inner-circle-bg._1", { scale: 0, delay: 0.5, duration: banner_tl_duration * 2 }) .to(".floating-banner-inner-side .btn-circle", { scale: 1, duration: banner_tl_duration }) .to(".floating-banner-inner-circle-bg._2", { borderRadius: "0.625rem", duration: banner_tl_duration / 2 }) .to(".floating-banner-inner-side.floating", { width: expand_width, paddingLeft: "1.125rem", paddingRight: "1.125rem", duration: banner_tl_duration * 1.75 }) .to(".floating-banner-inner-side.left,.floating-banner-inner-side.right", { opacity: 1, duration: banner_tl_duration }) .to(".floating-banner", { borderColor: "rgba(25, 25, 25, 1)", backgroundColor: "white", duration: banner_tl_duration }) .to( ".floating-banner-inner", { x: -5, y: -5, duration: banner_tl_duration }, "<" ); window.addEventListener("scroll", () => { if (!show_banner_tl.paused()) return; show_banner_tl.play(); }); $(".floating-banner") .on("mouseenter", function () { gsap.to(".floating-banner-inner", { x: -5, y: 0, duration: banner_tl_duration }); }) .on("mouseleave", function () { gsap.to(".floating-banner-inner", { x: -5, y: -5, duration: banner_tl_duration }); }); //Banner //Hero section gsap.to(".home-hero-illustration-top-wrap", { delay: 0.75, opacity: 1 }); let hero_scaling_factor; if (windowViewPort == "desktop") { hero_scaling_factor = 0.65; } else if (windowViewPort === "tablet") { hero_scaling_factor = 0.45; } else { hero_scaling_factor = 0.35; } let hero_tunnel_top = new NavPhysic({ container_element_id: "#hero-tunnel-top-layer", scaling_factor: hero_scaling_factor, physical_factors: { frictionAir: 0.14, //Control falling speed restitution: 0.5 //Control how bouncy the tags are }, tunnel_mode: true }); let hero_tunnel_bottom = new NavPhysic({ container_element_id: "#hero-tunnel-bottom-layer", scaling_factor: hero_scaling_factor, physical_factors: { frictionAir: 0.14, //Control falling speed restitution: 0.7 //Control how bouncy the tags are }, tunnel_mode: true, tunnel_bot_layer: true }); // hero_tunnel_bottom.wall_color = "red"; if (!hero_tunnel_top.initialized) { hero_tunnel_top.init(); } setTimeout(() => { if (!hero_tunnel_bottom.initialized) { hero_tunnel_bottom.init(); } }, 5500); // setTimeout(() => { // hero_tunnel_top.pause(); // hero_tunnel_bottom.pause(); // }, 6500); // setTimeout(() => { // hero_tunnel_top.resume(); // hero_tunnel_bottom.resume(); // }, 12000); let hero_tube_moving_loop = gsap .timeline({ repeat: -1, paused: true }) .to(".home-hero-tube", { yPercent: -66.66666, duration: 14, ease: "none" }) .to(".home-hero-tube", { yPercent: 0, duration: 0, ease: "none" }); let cta_tube_moving_loop = gsap .timeline({ repeat: -1, paused: true }) .to(".home-cta-wave", { xPercent: -49.51, duration: 32, ease: "none" }) .to(".home-cta-wave", { yPercent: 0, duration: 0, ease: "none" }); let cta_tags_moving_loop = gsap .timeline({ repeat: -1, paused: true }) .to(".home-cta-tag-wrap[tag-side='left']", { x: "95em", duration: 17, ease: "none", stagger: { from: "random", each: 3.5 } }) .to( ".home-cta-tag-wrap[tag-side='right']", { x: "-95em", duration: 17, ease: "none", stagger: { from: "random", each: 3.5 } }, "<" ); let nav_closed = true; $(".hamburger_wrap").on("click", function () { if (nav_closed) { nav_closed = false; hero_tube_moving_loop.pause(); if (hero_tunnel_top.initialized) { hero_tunnel_top.pause(); } if (hero_tunnel_bottom.initialized) { hero_tunnel_bottom.pause(); } } else { setTimeout(() => { nav_closed = true; hero_tube_moving_loop.play(); if (hero_tunnel_top.paused) { hero_tunnel_top.resume(); } if (hero_tunnel_bottom.paused) { hero_tunnel_bottom.resume(); } }, 1500); } }); ///Star section $(".background-img.home._10").each(function () { let triggerElement = $(this); let tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, start: "top 50%", end: "bottom bottom", toggleActions: "play none none none" // scrub: 1 } }); tl.to(".background-img.home._11", { opacity: 1 }).to(".background-img.home._10", { scale: 1, opacity: 1 }); }); $(".home-wormhole-text").each(function () { let triggerElement = $(this); let tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, start: "top 55%", end: "bottom bottom", // markers: true, toggleActions: "play none none none" // scrub: 1 } }); tl.fromTo( triggerElement, { opacity: 0 }, { opacity: 1 } ); }); $("#home-star-section").each(function () { let triggerElement = $(this); let star_1 = $(this).find(".home-star-svg-icon._1 svg"); let star_2 = $(this).find(".home-star-svg-icon._2 svg"); let tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, start: "top bottom", end: "bottom top", toggleActions: "play none none none", scrub: 1 } }); tl.to(star_1, { rotation: 1080 }).to( star_2, { rotation: -1080 }, "<" ); }); /////////////////Spinning labels let side_label_spinning, center_label_spinning; let big_labels_side = $( "[big-label][position='right'],[big-label][position='left']" ); let big_labels_center = $("[big-label][position='center']"); side_label_spinning = gsap .timeline({ repeat: -1, paused: true }) .to(big_labels_side, { rotate: "-360deg", duration: 5, ease: "none" }) .set(big_labels_side, { rotate: "0deg" }) .to(big_labels_side, { rotate: "-360deg", duration: 5, ease: "none" }); center_label_spinning = gsap .timeline({ repeat: -1, paused: true }) .to(big_labels_center, { rotate: "360deg", duration: 5 * 2.41, ease: "none" }) .set(big_labels_center, { rotate: "0deg" }) .to(big_labels_center, { rotate: "360deg", duration: 5 * 2.41, ease: "none" }); //Adjust speed side_label_spinning.timeScale(0); center_label_spinning.timeScale(0); let canvas_space_plane = new Plane_Three_Sketch({ dom: document.getElementById("canvas-test-embed") }); $(`[label-role="side"],#label-spinning-section a`).on( "mouseenter", function () { side_label_spinning.timeScale(1.25); center_label_spinning.timeScale(1.25); canvas_space_plane.animating_speed = 1.25; } ); $(`[label-role="side"],#label-spinning-section a`).on( "mouseleave", function () { side_label_spinning.timeScale(0); center_label_spinning.timeScale(0); canvas_space_plane.animating_speed = 1; } ); //setup $(`[label-role="center"][is-active="true"]`).css({ opacity: 1, pointerEvents: "auto" }); $("[label-role='side']").on("click", function () { let side_value = $(this).attr("percent-value"); let center_label = $("[label-role='center'][is-active='true']"); let center_value = center_label.attr("percent-value"); //Update side label $(this).find("h3").text(center_value); $(this).attr("percent-value", center_value); //Remove previous center label and Add new center label let prev_center_label = center_label; let next_center_label = $( `[label-role='center'][percent-value='${side_value}']` ); // console.log(side_value, center_value); // console.log(prev_center_label.length, next_center_label.length); // return; prev_center_label.attr("is-active", "false"); next_center_label.attr("is-active", "true"); gsap .timeline({ onStart: () => { $(`[label-role="side"]`).css("pointer-events", "none"); }, onComplete: () => { $(`[label-role="side"]`).css("pointer-events", "auto"); } }) .to(prev_center_label, { opacity: 0, scale: 0.95, duration: 0.2, pointerEvents: "none" }) .fromTo( next_center_label, { opacity: 0, scale: 0.95 }, { opacity: 1, duration: 0.2, scale: 1, pointerEvents: "auto" } ); }); ////Sticky sections --- Piechart $(".page-anchor").each(function () { let triggerElement = $(this); let id = triggerElement.attr("id"); let target, stage_id; let animated_bg = windowViewPort === "desktop" ? ".link_animated_bg[version='desktop']" : ".link_animated_bg[version='tablet']"; switch (id) { case "CUT-CONTENT-WASTE-1": target = windowViewPort === "desktop" ? "#CUT-CONTENT-WASTE-BTN-1" : "#CUT-CONTENT-WASTE-BTN-1-TABLET"; stage_id = 1; break; case "CUT-CONTENT-WASTE-2": target = windowViewPort === "desktop" ? "#CUT-CONTENT-WASTE-BTN-2" : "#CUT-CONTENT-WASTE-BTN-2-TABLET"; stage_id = 2; break; case "CUT-CONTENT-WASTE-3": stage_id = 3; target = windowViewPort === "desktop" ? "#CUT-CONTENT-WASTE-BTN-3" : "#CUT-CONTENT-WASTE-BTN-3-TABLET"; break; default: } let update_UI_enter_in = () => { let currentLink = $(`${target}`); // console.log("entering in", stage_id); // $("[cut-content-waste-div]").each(function () { // let id = $(this).attr("content-piechart-stage"); // console.log(id, $(this).css("opacity")); // }); switch (stage_id) { case 1: gsap.to($("img[piechart-stage='1']"), { opacity: 1 }); addPie({ chart_1: { data: stage_1.data, backgroundColor: stage_1.background_color.piechart_1 }, chart_2: { data: stage_1.data, backgroundColor: stage_1.background_color.piechart_2 } }); setTimeout(() => { show_tooltip($(`[piechart-tag][piechart-stage='1']`)); hide_tooltip($(`[piechart-tag][piechart-stage='2']`)); hide_tooltip($(`[piechart-tag][piechart-stage='3']`)); }, 450); break; case 2: addPie({ chart_1: { data: stage_2.data, backgroundColor: stage_2.background_color.piechart_1 }, chart_2: { data: stage_2.data, backgroundColor: stage_2.background_color.piechart_2 } }); gsap.timeline().to('[content-piechart-stage="1"]', { scale: 0.7, opacity: 0 }); setTimeout(() => { show_tooltip($(`[piechart-tag][piechart-stage='1']`)); show_tooltip($(`[piechart-tag][piechart-stage='2']`)); hide_tooltip($(`[piechart-tag][piechart-stage='3']`)); }, 450); break; case 3: addPie({ chart_1: { data: stage_3.data, backgroundColor: stage_3.background_color.piechart_1 }, chart_2: { data: stage_3.data, backgroundColor: stage_3.background_color.piechart_2 } }); gsap.timeline().to('[content-piechart-stage="2"]', { scale: 0.7, opacity: 0 }); setTimeout(() => { show_tooltip($(`[piechart-tag][piechart-stage='1']`)); show_tooltip($(`[piechart-tag][piechart-stage='2']`)); show_tooltip($(`[piechart-tag][piechart-stage='3']`)); }, 450); break; default: } setTimeout(() => { $("#on-page-nav a").attr("is-active", "false"); currentLink.attr("is-active", "true"); }, 250); }; let tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, start: "top 10%", end: "bottom bottom", toggleActions: "play none none reverse", onEnter: () => { Flip.fit(animated_bg, target, { duration: 0.45, ease: "power2.inOut", absolute: true, onStart: update_UI_enter_in }); } } }); }); $(".page-anchor-inner").each(function () { let triggerElement = $(this); let id = triggerElement.closest(".page-anchor").attr("id"); let target, stage_id; let animated_bg = windowViewPort === "desktop" ? ".link_animated_bg[version='desktop']" : ".link_animated_bg[version='tablet']"; switch (id) { // case "CUT-CONTENT-WASTE-1": // target = // windowViewPort === "desktop" // ? "#CUT-CONTENT-WASTE-BTN-1" // : "#CUT-CONTENT-WASTE-BTN-1-TABLET"; // stage_id = 1; // break; case "CUT-CONTENT-WASTE-2": target = windowViewPort === "desktop" ? "#CUT-CONTENT-WASTE-BTN-1" : "#CUT-CONTENT-WASTE-BTN-1-TABLET"; stage_id = 1; break; case "CUT-CONTENT-WASTE-3": stage_id = 2; target = windowViewPort === "desktop" ? "#CUT-CONTENT-WASTE-BTN-2" : "#CUT-CONTENT-WASTE-BTN-2-TABLET"; break; default: } let update_UI_leave_back = () => { let currentLink = $(`${target}`); // console.log("entering back", stage_id, target); // $("[cut-content-waste-div]").each(function () { // let id = $(this).attr("content-piechart-stage"); // console.log(id, $(this).css("opacity")); // }); switch (stage_id) { case 1: gsap.to($("img[piechart-stage='1']"), { opacity: 1 }); gsap.timeline().to('[content-piechart-stage="1"]', { scale: 1, opacity: 1 }); addPie({ chart_1: { data: stage_1.data, backgroundColor: stage_1.background_color.piechart_1 }, chart_2: { data: stage_1.data, backgroundColor: stage_1.background_color.piechart_2 } }); setTimeout(() => { show_tooltip($(`[piechart-tag][piechart-stage='1']`)); hide_tooltip($(`[piechart-tag][piechart-stage='2']`)); hide_tooltip($(`[piechart-tag][piechart-stage='3']`)); }, 450); break; case 2: addPie({ chart_1: { data: stage_2.data, backgroundColor: stage_2.background_color.piechart_1 }, chart_2: { data: stage_2.data, backgroundColor: stage_2.background_color.piechart_2 } }); gsap.timeline().to('[content-piechart-stage="2"]', { scale: 1, opacity: 1 }); setTimeout(() => { show_tooltip($(`[piechart-tag][piechart-stage='1']`)); show_tooltip($(`[piechart-tag][piechart-stage='2']`)); hide_tooltip($(`[piechart-tag][piechart-stage='3']`)); }, 450); break; // case 3: // addPie({ // chart_1: { // data: stage_3.data, // backgroundColor: stage_3.background_color.piechart_1 // }, // chart_2: { // data: stage_3.data, // backgroundColor: stage_3.background_color.piechart_2 // } // }); // gsap.timeline().to('[content-piechart-stage="2"]', { // scale: 1, // opacity: 1 // }); // setTimeout(() => { // show_tooltip($(`[piechart-tag][piechart-stage='1']`)); // show_tooltip($(`[piechart-tag][piechart-stage='2']`)); // show_tooltip($(`[piechart-tag][piechart-stage='3']`)); // }, 450); // break; default: } setTimeout(() => { $("#on-page-nav a").attr("is-active", "false"); currentLink.attr("is-active", "true"); }, 250); }; let tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, start: "top 20%", end: "bottom bottom", toggleActions: "play none none reverse", // markers: true, onLeaveBack: () => { // console.log("EnteringBack", target); // console.log("EnteringBack", target, $(`${target}`).length); update_UI_leave_back(); Flip.fit(animated_bg, target, { duration: 0.45, ease: "power2.inOut", absolute: true }); } } }); }); // setTimeout(() => { $("[section-w-bg-animation]").each(function () { let triggerElement = $(this); let section_name = $(this).attr("section-w-bg-animation"); let init_bg_animation = () => { switch (section_name) { case "hero": hero_tube_moving_loop.play(); if (hero_tunnel_top.paused) { // console.log("resuming tunnel top"); hero_tunnel_top.resume(); } if (hero_tunnel_bottom.paused) { // console.log("resuming tunnel bot"); hero_tunnel_bottom.resume(); } break; case "cog": canvas_space_plane.play(); side_label_spinning.play(); center_label_spinning.play(); break; case "cta": cta_tube_moving_loop.play(); cta_tags_moving_loop.play(); break; default: } }; let pause_bg_animation = () => { switch (section_name) { case "hero": hero_tube_moving_loop.pause(); if (hero_tunnel_top.initialized) { hero_tunnel_top.pause(); } if (hero_tunnel_bottom.initialized) { hero_tunnel_bottom.pause(); } break; case "cog": canvas_space_plane.stop(); side_label_spinning.pause(); center_label_spinning.pause(); break; case "cta": cta_tube_moving_loop.pause(); cta_tags_moving_loop.pause(); break; default: } }; let tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, start: "top bottom", end: "bottom top", toggleActions: "play none none none", // markers: true, // scrub: 1, onEnter: () => { // console.log("Entering: ", section_name); init_bg_animation(); }, onLeave: () => { // console.log("Leaving: ", section_name); pause_bg_animation(); }, onEnterBack: () => { init_bg_animation(); // console.log("Entering back: ", section_name); }, onLeaveBack: () => { // console.log("Leaving back: ", section_name); pause_bg_animation(); } } }); }); // }, 1000); });