script.js

const wrapper=document.querySelector(".wrapper"),main=document.querySelector("main");function startloadingTextAnim(){let e=document.querySelector(".wrapper h1"),t=Splitting({target:e,by:"chars"});t[0].chars.forEach(e=>{e.style.marginRight="5px",e.style.opacity=1}),gsap.timeline({defaults:{duration:6,opacity:1}}).to(t[0].chars[16],{repeat:-1,repeatDelay:1,yoyo:!0,ease:"linear",motionPath:{path:"#path",align:"#path",autoRotate:!0,alignOrigin:[.5,.5]}},"<.4").to(t[0].chars[15],{repeat:-1,repeatDelay:1,yoyo:!0,ease:"linear",motionPath:{path:"#path",align:"#path",autoRotate:!0,alignOrigin:[.5,.5]}},"<.4").to(t[0].chars[14],{repeat:-1,repeatDelay:1,yoyo:!0,ease:"linear",motionPath:{path:"#path",align:"#path",autoRotate:!0,alignOrigin:[.5,.5]}},"<.4").to(t[0].chars[13],{repeat:-1,repeatDelay:1,yoyo:!0,ease:"linear",motionPath:{path:"#path",align:"#path",autoRotate:!0,alignOrigin:[.5,.5]}},"<.4").to(t[0].chars[12],{repeat:-1,repeatDelay:1,yoyo:!0,ease:"linear",motionPath:{path:"#path",align:"#path",autoRotate:!0,alignOrigin:[.5,.5]}},"<.4").to(t[0].chars[11],{repeat:-1,repeatDelay:1,yoyo:!0,ease:"linear",motionPath:{path:"#path",align:"#path",autoRotate:!0,alignOrigin:[.5,.5]}},"<.4").to(t[0].chars[10],{repeat:-1,repeatDelay:1,yoyo:!0,ease:"linear",motionPath:{path:"#path",align:"#path",autoRotate:!0,alignOrigin:[.5,.5]}},"<.4").to(t[0].chars[9],{repeat:-1,repeatDelay:1,yoyo:!0,ease:"linear",motionPath:{path:"#path",align:"#path",autoRotate:!0,alignOrigin:[.5,.5]}},"<.4").to(t[0].chars[8],{repeat:-1,repeatDelay:1,yoyo:!0,ease:"linear",motionPath:{path:"#path",align:"#path",autoRotate:!0,alignOrigin:[.5,.5]}},"<.4").to(t[0].chars[7],{repeat:-1,repeatDelay:1,yoyo:!0,ease:"linear",motionPath:{path:"#path",align:"#path",autoRotate:!0,alignOrigin:[.5,.5]}},"<.4").to(t[0].chars[6],{repeat:-1,repeatDelay:1,yoyo:!0,ease:"linear",motionPath:{path:"#path",align:"#path",autoRotate:!0,alignOrigin:[.5,.5]}},"<.4").to(t[0].chars[5],{repeat:-1,repeatDelay:1,yoyo:!0,ease:"linear",motionPath:{path:"#path",align:"#path",autoRotate:!0,alignOrigin:[.5,.5]}},"<.4").to(t[0].chars[4],{repeat:-1,repeatDelay:1,yoyo:!0,ease:"linear",motionPath:{path:"#path",align:"#path",autoRotate:!0,alignOrigin:[.5,.5]}},"<.4").to(t[0].chars[3],{repeat:-1,repeatDelay:1,yoyo:!0,ease:"linear",motionPath:{path:"#path",align:"#path",autoRotate:!0,alignOrigin:[.5,.5]}},"<.4").to(t[0].chars[2],{repeat:-1,repeatDelay:1,yoyo:!0,ease:"linear",motionPath:{path:"#path",align:"#path",autoRotate:!0,alignOrigin:[.5,.5]}},"<.4").to(t[0].chars[1],{repeat:-1,repeatDelay:1,yoyo:!0,ease:"linear",motionPath:{path:"#path",align:"#path",autoRotate:!0,alignOrigin:[.5,.5]}},"<.4").to(t[0].chars[0],{repeat:-1,repeatDelay:1,yoyo:!0,ease:"linear",motionPath:{path:"#path",align:"#path",autoRotate:!0,alignOrigin:[.5,.5]}},"<.4")}gsap.registerPlugin(MotionPathPlugin),Splitting();let tlLoader=gsap.timeline({paused:!0,defaults:{duration:1.8}}).fromTo(".wrapper .loader",{duration:1.8,opacity:1},{opacity:0}).fromTo(".wrapper h1",{duration:1.8,opacity:1},{opacity:0},"<.5").fromTo(".wrapper",{ease:"elastic(2, .1)",transformOrigin:"50% 0%",yPercent:0,scale:1,borderRadius:"0px"},{yPercent:-100,scale:0,borderRadius:"50%"},"<.1");function loading(){setTimeout(()=>{tlLoader.play(),main.style.display="block",setTimeout(()=>main.style.opacity=1,50);const e=window.matchMedia("(min-width: 1100px)");function t(e){if(e.matches){const e=document.querySelector("#tracker");document.addEventListener("mousemove",t=>{e.setAttribute("style","top: "+(t.pageY-10)+"px; left: "+(t.pageX-10)+"px; display:block;")})}else{const e=document.querySelector("#tracker");e.style.width=0,e.style.display="none"}}setTimeout(()=>{t(e),e.addListener(t)},2e3);const a=window.matchMedia("(min-width: 1510px)"),o=window.matchMedia("(max-width: 1510px)"),i=window.matchMedia("(max-width: 1410px)"),n=window.matchMedia("(max-width: 1310px)"),r=window.matchMedia("(max-width: 1170px)"),s=window.matchMedia("(max-width: 1024px)"),l=window.matchMedia("(max-width: 910px)"),c=window.matchMedia("(max-width: 801px)"),p=window.matchMedia("(max-width: 710px)"),d=window.matchMedia("(max-width: 610px)"),y=window.matchMedia("(max-width: 564px)"),h=window.matchMedia("(max-width: 510px)"),g=window.matchMedia("(max-width: 410px)"),u=window.matchMedia("(max-width: 360px)"),m=window.matchMedia("(max-width: 340px)");function x(){a.matches&&(gsap.to(".to-left",{x:-720,duration:9,ease:"linear",yoyo:!0,repeat:-1}),gsap.to(".to-right",{x:0,duration:9,ease:"linear",yoyo:!0,repeat:-1}))}function f(){o.matches&&(gsap.to(".to-left",{x:-440,duration:5,ease:"linear",yoyo:!0,repeat:-1}),gsap.to(".to-right",{x:0,duration:5,ease:"linear",yoyo:!0,repeat:-1}))}function w(){i.matches&&(gsap.to(".to-left",{x:-300,duration:4,ease:"linear",yoyo:!0,repeat:-1}),gsap.to(".to-right",{x:0,duration:4,ease:"linear",yoyo:!0,repeat:-1}))}function L(){n.matches&&(gsap.to(".to-left",{x:-440,duration:5,ease:"linear",yoyo:!0,repeat:-1}),gsap.to(".to-right",{x:0,duration:5,ease:"linear",yoyo:!0,repeat:-1}))}function T(){r.matches&&(gsap.to(".to-left",{x:-310,duration:4,ease:"linear",yoyo:!0,repeat:-1}),gsap.to(".to-right",{x:0,duration:4,ease:"linear",yoyo:!0,repeat:-1}))}function P(){s.matches&&(gsap.to(".to-left",{x:-390,duration:5,ease:"linear",yoyo:!0,repeat:-1}),gsap.to(".to-right",{x:0,duration:5,ease:"linear",yoyo:!0,repeat:-1}))}function v(){l.matches&&(gsap.to(".to-left",{x:-230,duration:4.2,ease:"linear",yoyo:!0,repeat:-1}),gsap.to(".to-right",{x:0,duration:4.2,ease:"linear",yoyo:!0,repeat:-1}))}function b(){c.matches&&(gsap.to(".to-left",{x:-260,duration:4.4,ease:"linear",yoyo:!0,repeat:-1}),gsap.to(".to-right",{x:0,duration:4.4,ease:"linear",yoyo:!0,repeat:-1}))}function k(){p.matches&&(gsap.to(".to-left",{x:-180,duration:4.2,ease:"linear",yoyo:!0,repeat:-1}),gsap.to(".to-right",{x:0,duration:4.2,ease:"linear",yoyo:!0,repeat:-1}))}function R(){d.matches&&(gsap.to(".to-left",{x:-280,duration:4.4,ease:"linear",yoyo:!0,repeat:-1}),gsap.to(".to-right",{x:0,duration:4.4,ease:"linear",yoyo:!0,repeat:-1}))}function E(){y.matches&&(gsap.to(".to-left",{x:-160,duration:3.8,ease:"linear",yoyo:!0,repeat:-1}),gsap.to(".to-right",{x:0,duration:3.8,ease:"linear",yoyo:!0,repeat:-1}))}function O(){h.matches&&(gsap.to(".to-left",{x:-155,duration:3.8,ease:"linear",yoyo:!0,repeat:-1}),gsap.to(".to-right",{x:0,duration:3.8,ease:"linear",yoyo:!0,repeat:-1}))}function D(){g.matches&&(gsap.to(".to-left",{x:-190,duration:4,ease:"linear",yoyo:!0,repeat:-1}),gsap.to(".to-right",{x:0,duration:4,ease:"linear",yoyo:!0,repeat:-1}))}function M(){u.matches&&(gsap.to(".to-left",{x:-188,duration:4,ease:"linear",yoyo:!0,repeat:-1}),gsap.to(".to-right",{x:0,duration:4,ease:"linear",yoyo:!0,repeat:-1}))}function S(){m.matches&&(gsap.to(".to-left",{x:-150,duration:3.8,ease:"linear",yoyo:!0,repeat:-1}),gsap.to(".to-right",{x:0,duration:3.8,ease:"linear",yoyo:!0,repeat:-1}))}x(),a.addListener(x),f(),o.addListener(f),w(),i.addListener(w),L(),n.addListener(L),T(),r.addListener(T),P(),s.addListener(P),v(),l.addListener(v),b(),c.addListener(b),k(),p.addListener(k),R(),d.addListener(R),E(),y.addListener(E),O(),h.addListener(O),D(),g.addListener(D),M(),u.addListener(M),S(),m.addListener(S);let q=document.querySelectorAll("#nav > p.to-left > span"),A=document.querySelectorAll("#nav > p.to-right > span");function z(){tracker.classList.toggle("scale-up")}q.forEach(e=>{e.addEventListener("mouseover",z)}),q.forEach(e=>{e.addEventListener("mouseout",z)}),A.forEach(e=>{e.addEventListener("mouseover",z)}),A.forEach(e=>{e.addEventListener("mouseout",z)})},1e4)}function startGSAPAnimations(){let e=e=>document.querySelector(e),t=e("section#nav"),a=e("section#about"),o=e("section#artworks"),i=e("section#websites"),n=e("section#contact");a.style.display="flex",o.style.display="flex",i.style.display="flex",n.style.display="flex";let r=e("#nav > p.to-left > span:nth-child(1)"),s=e("#nav > p.to-right > span:nth-child(4)"),l=e("section#about .back"),c=e("#nav > p.to-left > span:nth-child(2)"),p=e("#nav > p.to-right > span:nth-child(3)"),d=e("section#artworks .back"),y=e("#nav > p.to-left > span:nth-child(3)"),h=e("#nav > p.to-right > span:nth-child(2)"),g=e("section#websites .back"),u=e("#nav > p.to-left > span:nth-child(4)"),m=e("#nav > p.to-right > span:nth-child(1)"),x=e("section#contact .back"),f=gsap.timeline({paused:!0,defaults:{duration:1.4,transformOrigin:"50% 50%",opacity:0,ease:"elastic(.1, 1)"}}).fromTo("section#about",{yPercent:50,xPercent:-50,scale:0,opacity:0,borderRadius:"50%"},{yPercent:-50,xPercent:-50,scale:1,opacity:1,borderRadius:"0px"}).to(".logo",{color:"hsl(251, 60%, 17%)",opacity:1},"<.6").to(".copyright",{color:"hsl(251, 60%, 17%)",opacity:1},"<.6").fromTo("section#about .about-img",{duration:5,y:-100,opacity:0,ease:"elastic(2, .1)"},{y:0,opacity:1},"<.6").from("section#about .splitting .char",{y:40,duration:1.8,stagger:.008,ease:"elastic(.8, 0.0)"},"<.6").to("#tracker",{background:"hsl(56, 19%, 16%)",opacity:1},"<.6");r.addEventListener("click",()=>{f.play(),setTimeout(()=>{t.style.display="none"},1e3)}),s.addEventListener("click",()=>{f.play(),setTimeout(()=>{t.style.display="none"},1e3)}),l.addEventListener("click",()=>{f.reverse(),setTimeout(()=>{t.style.display="flex"},50)});let w=gsap.timeline({paused:!0,defaults:{duration:1.4,transformOrigin:"50% 50%",opacity:0,ease:"elastic(.1, 1)"}}).fromTo("section#artworks",{yPercent:50,xPercent:-50,scale:0,opacity:0,borderRadius:"50%"},{yPercent:-50,xPercent:-50,scale:1,opacity:1,borderRadius:"0px"}).to(".logo",{color:"hsl(251, 60%, 17%)",opacity:1},"<.6").to(".copyright",{color:"hsl(251, 60%, 17%)",opacity:1},"<.6").fromTo("section#artworks .work-img",{duration:5,y:-100,opacity:0,ease:"elastic(2, .1)"},{y:0,opacity:1},"<.6").from("section#artworks .splitting .char",{y:40,duration:1.8,stagger:.01,ease:"elastic(.8, 0.0)"},"<.6").to("#tracker",{background:"hsl(56, 19%, 16%)",opacity:1},"<.6");c.addEventListener("click",()=>{w.play(),setTimeout(()=>{t.style.display="none"},1e3)}),p.addEventListener("click",()=>{w.play(),setTimeout(()=>{t.style.display="none"},1e3)}),d.addEventListener("click",()=>{w.reverse(),setTimeout(()=>{t.style.display="flex"},50)});let L=gsap.timeline({paused:!0,defaults:{duration:1.4,transformOrigin:"50% 50%",opacity:0,ease:"elastic(.1, 1)"}}).fromTo("section#websites",{yPercent:50,xPercent:-50,scale:0,opacity:0,borderRadius:"50%"},{yPercent:-50,xPercent:-50,scale:1,opacity:1,borderRadius:"0px"}).to(".logo",{color:"hsl(251, 60%, 17%)",opacity:1},"<.6").to(".copyright",{color:"hsl(251, 60%, 17%)",opacity:1},"<.6").fromTo("section#websites .work-img",{duration:5,y:-100,opacity:0,ease:"elastic(2, .1)"},{y:0,opacity:1},"<.6").from("section#websites .splitting .char",{y:40,duration:1.8,stagger:.01,ease:"elastic(.8, 0.0)"},"<.6").to("#tracker",{background:"hsl(56, 19%, 16%)",opacity:1},"<.6");y.addEventListener("click",()=>{L.play(),setTimeout(()=>{t.style.display="none"},1e3)}),h.addEventListener("click",()=>{L.play(),setTimeout(()=>{t.style.display="none"},1e3)}),g.addEventListener("click",()=>{L.reverse(),setTimeout(()=>{t.style.display="flex"},50)});let T=gsap.timeline({paused:!0,defaults:{duration:1.4,transformOrigin:"50% 50%",opacity:0,ease:"elastic(.1, 1)"}}).fromTo("section#contact",{yPercent:50,xPercent:-50,scale:0,opacity:0,borderRadius:"50%"},{yPercent:-50,xPercent:-50,scale:1,opacity:1,borderRadius:"0px"}).to(".logo",{color:"hsl(251, 60%, 17%)",opacity:1},"<.6").to(".copyright",{color:"hsl(251, 60%, 17%)",opacity:1},"<").from("section#contact .splitting .char",{y:40,duration:1.8,stagger:.01,ease:"elastic(.8, 0.0)"},"<.6").to("#tracker",{background:"hsl(56, 19%, 16%)",opacity:1},"<.6");u.addEventListener("click",()=>{T.play(),setTimeout(()=>{t.style.display="none"},1e3)}),m.addEventListener("click",()=>{T.play(),setTimeout(()=>{t.style.display="none"},1e3)}),x.addEventListener("click",()=>{T.reverse(),setTimeout(()=>{t.style.display="flex"},50)})}const sectionLoader=document.querySelector(".loader"),sectionLoadertext=document.querySelector("h1");function resize(){let e=window.innerWidth/sectionLoader.offsetWidth;e<7&&e>=6?(gsap.set(sectionLoader,{scale:.8}),gsap.set(sectionLoadertext,{scale:.8})):e<6&&e>=5?(gsap.set(sectionLoader,{scale:.7}),gsap.set(sectionLoadertext,{scale:.7})):e<5&&e>=4?(gsap.set(sectionLoader,{scale:.6}),gsap.set(sectionLoadertext,{scale:.6,marginTop:-390})):e<4&&e>=3?(gsap.set(sectionLoader,{scale:.5}),gsap.set(sectionLoadertext,{scale:.5,marginTop:-420})):e<3&&e>=2?(gsap.set(sectionLoader,{scale:.4}),e<3&&e>=2.4?gsap.set(sectionLoadertext,{scale:.4,marginTop:-440}):e<2.4&&e>=2.3?gsap.set(sectionLoadertext,{scale:.4,marginTop:-560}):e<2.3&&e>=2.2?gsap.set(sectionLoadertext,{scale:.4,marginTop:-600}):e<2.2&&e>=2&&gsap.set(sectionLoadertext,{scale:.4,marginTop:-680})):e<2&&e>=1?(gsap.set(sectionLoader,{scale:.4}),e<2&&e>=1.6&&gsap.set(sectionLoadertext,{scale:.36,marginTop:-690}),e<1.6&&e>=1.5?gsap.set(sectionLoadertext,{scale:.3,marginTop:-780}):e<1.5&&e>=1.4?gsap.set(sectionLoadertext,{scale:.28,marginTop:-690}):e<1.4&&e>=1.3?gsap.set(sectionLoadertext,{scale:.26,marginTop:-690}):e<1.3&&e>=1&&gsap.set(sectionLoadertext,{scale:.24,marginTop:-940})):(gsap.set(sectionLoader,{scale:1}),gsap.set(sectionLoadertext,{scale:1,marginTop:-300}))}document.addEventListener("DOMContentLoaded",function(){window.addEventListener("load",function(){wrapper.style.visibility="visible",setTimeout(()=>{startloadingTextAnim(),setTimeout(()=>{startGSAPAnimations(),setTimeout(()=>{console.log("before execution"),loading(),console.log("after execution")},2e3)},100)},100)},!1)}),window.onresize=resize,window.onload=resize;