script.js

function valueSetters(){gsap.set("#nav a",{y:"-100%",opacity:0}),gsap.set("#home span .child",{y:"100%"}),gsap.set("#home .row img",{opacity:0}),document.querySelectorAll("#Visual g").forEach(function(e){var t=e.querySelector("path, polyline");t&&(t.style.strokeDasharray=t.getTotalLength()+"px",t.style.strokeDashoffset=t.getTotalLength()+"px")})}function revealToSpan(){document.querySelectorAll(".reveal").forEach(function(e){var t=document.createElement("span"),a=document.createElement("span");t.classList.add("parent"),a.classList.add("child"),a.innerHTML=e.innerHTML,t.appendChild(a),e.innerHTML="",e.appendChild(t)})}function loaderAnimation(){gsap.timeline().from("#loader .child span",{x:100,duration:.8,stagger:.2,ease:"Power3.easeInOut"}).to("#loader .parent .child",{y:"-100%",duration:.8,ease:"Circ.easeInOut"}).to("#loader",{height:0,duration:1,ease:"Circ.easeInOut"}).to("#green-div",{height:"100%",top:0,duration:1,delay:-.5,ease:"Circ.easeInOut"}).to("#green-div",{height:"0%",duration:1,delay:-.6,ease:"Circ.easeInOut",onComplete:function(){animateHomepage()}})}function animateSvg(){gsap.to("#Visual g path, #Visual g polyline",{strokeDashoffset:0,duration:2,ease:"Expo.easeInOut"})}function animateHomepage(){gsap.timeline().to("#nav a",{y:0,opacity:1,ease:"Expo.easeInOut"}).to("#home .parent .child",{y:0,duration:1.5,ease:"Expo.easeInOut"}).to("#home .row img",{opacity:1,delay:-.5,ease:"Expo.easeInOut",onComplete:function(){animateSvg()}})}function cardShow(){document.querySelectorAll(".cnt").forEach(function(e){var t;e.addEventListener("mousemove",function(e){var a=e.target.dataset.index,o=document.querySelector("#cursor").children[a];o&&(o.style.opacity=1,t=e.target,o.style.transform=`translate(${e.clientX}px, ${e.clientY}px)`,document.querySelector("#work-part2").style.backgroundColor=e.target.dataset.bgColor)}),e.addEventListener("mouseleave",function(e){var a=t?t.dataset.index:null;if(null!==a){var o=document.querySelector("#cursor").children[a];o&&(o.style.opacity=0)}})})}document.addEventListener("DOMContentLoaded",function(){let e=new LocomotiveScroll({el:document.querySelector("#main"),smooth:!0});e.on("scroll",e=>{let t=e.scroll.y,a=document.querySelectorAll("#imgright .imgcontainer");a.forEach((e,a)=>{let o=e.getAttribute("data-translate-x"),n=e.getAttribute("data-translate-y"),r=parseFloat(e.getAttribute("data-rotate"));e.style.transform=`translate(${o}, ${n}) rotate(${r+.005*t}deg)`})})}),document.addEventListener("DOMContentLoaded",()=>{let e=document.getElementById("work");document.querySelectorAll(".cnt,.button-container").forEach(t=>{t.addEventListener("mouseover",t=>{let a=t.target.getAttribute("data-bgcolor");e.style.backgroundColor=a}),t.addEventListener("mouseout",()=>{e.style.backgroundColor=""})})}),document.addEventListener("DOMContentLoaded",()=>{let e=document.getElementById("work");document.querySelectorAll("button-container").forEach(t=>{t.addEventListener("mouseover",t=>{let a=t.target.getAttribute("data-bgcolor");e.style.backgroundColor=a}),t.addEventListener("mouseout",()=>{e.style.backgroundColor=""})})}),revealToSpan(),valueSetters(),loaderAnimation(),cardShow();