animoxjs/dist/Animox.min.js

it is an library that helps in your easing the web development effects and animations

var ThemeToggler=function(){var e={};function t(e){return document.querySelector(e)}function n(e){return e.startsWith(".")?e:e.startsWith("#")?e:e.toLowerCase()}return{Mode:function o(s){if(s&&s.elements)Array.isArray(s.elements)?s.elements.forEach(function(t){e[t]=n(t)}):Object.keys(s.elements).forEach(function(t){e[t]=n(t)});else{console.error("Elements not provided!");return}if(!s||!s.toggleButton){console.error("Toggle button not provided!");return}s.toggleButton.addEventListener("click",function(){document.body.classList.contains("dark")?(Object.keys(e).forEach(function(e){var o=n(e),s=t(o);s?s.classList.remove("dark-theme"):console.error('Element with selector "'+o+'" not found in the DOM.')}),document.body.classList.remove("dark")):(Object.keys(e).forEach(function(e){var o=n(e),s=t(o);s?s.classList.add("dark-theme"):console.error('Element with selector "'+o+'" not found in the DOM.')}),document.body.classList.add("dark"))})}}}();function HoverEffect(e,t={}){switch(t.style||1){case 1:e.forEach(function e(n){n.classList.add("btnE1"),n.classList.add("btnM1"),(t.bgColor||t.color||t.width||t.height)&&(n.style.backgroundColor=t.bgColor,n.style.color=t.color,n.style.width=t.width,n.style.height=t.height)});break;case 2:e.forEach(function e(n){if(n.classList.add("btnE5"),2==t.style)switch(t.effect||"center"){case"center":n.classList.add("btn-center");break;case"left":n.classList.add("btn-left");break;case"right":n.classList.add("btn-right");break;case"bottom":n.classList.add("btn-bottom")}});break;default:console.warn("Animox Js : no such style available for Hover Effect, mentioned in HoverEffect()")}}function TextEffect(e,t={}){if(e){if(e instanceof NodeList)e.forEach(e=>{applyEffect(e,t)});else if(e instanceof HTMLElement)applyEffect(e,t);else if("string"==typeof e){let n=document.querySelectorAll(e);n.forEach(e=>{applyEffect(e,t)})}else console.error("Invalid input. Please provide valid HTMLElement, NodeList, or selector string.")}}function applyEffect(e,t){let n;switch(t.style||1){case 1:e.classList.add("rolling-text");let o=e.innerText;for(let s of(e.innerHTML="",(n=document.createElement("div")).classList.add("block"),o)){let a=document.createElement("span");a.innerText=""===s.trim()?"\xa0":s,a.classList.add("letter"),n.appendChild(a)}e.appendChild(n),e.appendChild(n.cloneNode(!0)),e.addEventListener("mouseover",()=>{e.classList.remove("play")});break;case 2:e.classList.add("magic");break;case 3:(t.fontFamily||t.fontSize||t.TextTransform)&&(e.style.fontSize=t.fontSize,e.style.fontFamily=t.fontFamily,e.style.textTransform=t.TextTransform),e.classList.add("JText"),e.dataset.value=e.innerText,e.onmouseover=e=>{let t=0,n=setInterval(()=>{e.target.innerText=e.target.innerText.split("").map((n,o)=>o<t?e.target.dataset.value[o]:"ABCDEFGHIJKLMNOPQRSTUVWXYZ"[Math.floor(26*Math.random())]).join(""),t>=e.target.dataset.value.length&&clearInterval(n),t+=1/3},100)};break;case 4:e.classList.add("txt-line");let l=document.createElement("p");l.textContent=e.textContent,e.innerHTML="",e.appendChild(l),gsap.from(l,{duration:1.8,delay:1,y:200,skewY:10,stagger:{amount:.4}});break;case 5:e.classList.add("TE5");let r=document.createElement("p");r.textContent=e.textContent,e.innerHTML="",e.appendChild(r),gsap.to(r,{backgroundPositionX:"0%",stagger:1,scrollTrigger:{trigger:".TE5",scrub:1,start:"top top",end:"bottom top"}});break;case 6:t.fontSize&&(e.style.fontSize=t.fontSize),e.classList.add("TE6"),e.setAttribute("data-text",e.textContent);break;case 7:(t.fontFamily||t.fontSize||t.TextTransform)&&(e.style.fontSize=t.fontSize,e.style.fontFamily=t.fontFamily,e.style.textTransform=t.TextTransform),e.classList.add("TE7C"),(n=document.createElement("div")).classList.add("TE7"),n.innerText=e.innerText,e.innerHTML="",e.appendChild(n);break;case 8:(t.fontFamily||t.fontSize||t.TextTransform)&&(e.style.fontSize=t.fontSize,e.style.fontFamily=t.fontFamily,e.style.textTransform=t.TextTransform),e.classList.add("textEffects");let c=e.textContent.split("");e.innerHTML="",c.forEach((t,n)=>{let o=document.createElement("span");o.textContent=t,o.classList.add("char",`char-${n+1}`),e.appendChild(o),gsap.set(o,{y:"100%"}),gsap.to(o,{y:0,opacity:1,duration:.5,delay:.1*n,ease:"power2.out"})});break;case 9:(t.fontFamily||t.fontSize||t.TextTransform)&&(e.style.fontSize=t.fontSize,e.style.fontFamily=t.fontFamily,e.style.textTransform=t.TextTransform),e.classList.add("typewriter");let d=e.textContent;e.textContent="";let f=d.split("");f.forEach((t,n)=>{let o=document.createElement("span");o.textContent=t,o.style.visibility="hidden",e.appendChild(o),gsap.to(o,{visibility:"visible",duration:.5,delay:.1*n,onComplete(){n===f.length-1&&(e.style.borderRight="none")}})});break;default:console.warn("Animox Js: no such style available for Text Effects, mentioned in TextEffect()")}}function $(e){let t=document.querySelector(e),n=document.querySelectorAll(e);return t.MouseFollower=function(e={}){var n,o,s,a,l,r,c,d,f;switch(e.style||1){case 1:n=t,e.bgColor?(n.classList.add("mf"),n.style.backgroundColor=e.bgColor):n.classList.add("mf"),document.addEventListener("mousemove",function(t){gsap.to(n,{top:t.clientY,left:t.clientX,duration:e.duration||1,ease:e.ease||Expo.easeOut})});break;case 2:o=null,s=null,o=document.createElement("div"),s=document.createElement("div"),o.classList.add("mf2"),s.classList.add("mf2"),s.id="behindmouse",a=0,l=0,e.bgColor&&(o.style.backgroundColor=e.bgColor),addEventListener("mousemove",function(t){e.skew&&(l=gsap.utils.clamp(15,35,t.clientX-a),a=t.clientX,gsap.to(".mf2",{width:l+"px",ease:e.ease||Expo.easeOut,duration:e.duration||1})),gsap.to(".mf2",{top:t.clientY,left:t.clientX,duration:e.duration||1,ease:e.ease||Expo.easeOut})}),addEventListener("mouseenter",function(){gsap.to(".mf2",{opacity:1})}),addEventListener("mouseleave",function(){gsap.to(".mf2",{opacity:0,duration:e.duration||1,ease:e.ease||Expo.easeOut})}),document.body.appendChild(s),document.body.appendChild(o);break;case 3:c=null,(r=t).classList.add("c"),(c=document.createElement("div")).classList.add("inner-circle"),(e.bgColor||e.border)&&(c.style.backgroundColor=e.bgColor,r.style.border=e.border),window.addEventListener("mousemove",function(e){let t=e.clientX,n=e.clientY;c.style.left=`${t}px`,c.style.top=`${n}px`,r.animate({left:`${t}px`,top:`${n}px`},{duration:500,fill:"forwards"})}),document.body.appendChild(c);break;case 4:!function t(){let n={x:0,y:0},o=e.colors||["#e31b39","#e62637","#e93036","#ec3834","#ef4032","#f24830","#f44f2e","#f7562c","#f95c2a","#fb6328","#fd6a26","#ff7024"];for(let s=0;s<20;s++){let a=document.createElement("div");a.classList.add("c2"),a.style.backgroundColor=o[s%o.length],document.body.appendChild(a)}let l=document.querySelectorAll(".c2");l.forEach(e=>{e.x=0,e.y=0}),window.addEventListener("mousemove",function(e){n.x=e.clientX,n.y=e.clientY}),!function e(){let t=n.x-12,o=n.y-12;l.forEach((e,n)=>{e.style.left=t+"px",e.style.top=o+"px",e.style.scale=(l.length-n)/l.length,e.x=t,e.y=o;let s=l[n+1]||l[0];t+=(s.x-t)*.3,o+=(s.y-o)*.3}),requestAnimationFrame(e)}()}(t);break;case 5:let u,y,m,h,p;d=t,u={x:0,y:0},y=!1,h=[],document.addEventListener("mousemove",function(e){u.x=e.clientX,u.y=e.clientY,d.id="cid",d.style.left=e.clientX-d.offsetWidth/2+"px",d.style.top=e.clientY-d.offsetHeight/2+"px",y=!0,clearTimeout(m),m=setTimeout(()=>{y=!1,setTimeout(()=>{clearInterval(p),p=setInterval(()=>{h.length>0?h.shift().remove():clearInterval(p)},5)},1e3)},100)}),setInterval(()=>{if(y){let e=document.createElement("div");e.classList.add("cc3"),document.body.appendChild(e),e.style.left=u.x-e.offsetWidth/2+"px",e.style.top=u.y-e.offsetHeight/2+"px",h.push(e)}},10);break;case 6:(f=t).classList.add("c4"),document.addEventListener("mousemove",function(e){gsap.to(".c4",{top:e.clientY,left:e.clientX,duration:1,ease:Expo.easeOut})});break;case 7:!function t(n){n.classList.add("c5");let o=document.querySelector(".c5");e.border&&(o.style.border=e.border);let s={x:0,y:0},a={x:0,y:0},l={x:0,y:0},r=0,c=0;window.addEventListener("mousemove",e=>{s.x=e.x,s.y=e.y});let d=()=>{l.x+=(s.x-l.x)*.17,l.y+=(s.y-l.y)*.17;let e=`translate(${l.x}px, ${l.y}px)`,t=s.x-a.x,n=s.y-a.y;a.x=s.x,a.y=s.y;let f=t**2+n**2;r+=(Math.min(f/22500*.5,.5)-r)*.17,Math.sqrt(f)>20&&(c=180*Math.atan2(n,t)/Math.PI);let u=`${e} rotate(${c}deg) scale(${1+r}, ${1-r})`;o.style.transform=u,window.requestAnimationFrame(d)};return d(),n}(t);break;default:console.warn("Animox Js : no such style available for Mouse Follower, mentioned in MouseFollower()")}},t.Magnet=function(e={}){switch(e.style||1){case 1:n.forEach(function t(n){return(e.bgColor||e.color||e.fontFamily||e.fontSize)&&(n.style.backgroundColor=e.bgColor,n.style.color=e.color,n.style.fontFamily=e.fontFamily,n.style.fontSize=e.fontSize),n.classList.add("Mbtn"),(e.width||e.height)&&(n.style.width=e.width,n.style.height=e.height),document.querySelectorAll(".Mbtn").forEach(e=>{e.addEventListener("mousemove",function(t){let n=t.offsetX,o=t.offsetY,s=e.clientWidth,a=e.clientHeight;e.style.transform=`translateX(${n-s/2}px) translateY(${o-a/2}px)`;let l=t.pageX-e.offsetLeft,r=t.pageY-e.offsetTop;e.style.setProperty("--x",l+"px"),e.style.setProperty("--y",r+"px")}),e.addEventListener("mouseout",function(){e.style.transform=""})}),n});break;case 2:function t(e,t,n){return e*(1-n)+t*n}n.forEach(function n(o){o&&"function"==typeof o.addEventListener&&(o.addEventListener("mousemove",function(n){var s=o.getBoundingClientRect(),a=gsap.utils.mapRange(0,s.width,0,1,n.clientX-s.left),l=gsap.utils.mapRange(0,s.height,0,1,n.clientY-s.top);gsap.to(".mf2",{scale:4,ease:Power2,duration:.5}),gsap.to(o,{x:t(-20,20,a),y:t(-20,20,l),duration:e.duration||1,ease:e.ease||Expo.easeOut})}),o.addEventListener("mouseleave",function(){gsap.to(".mf2",{scale:1,ease:Power2,duration:.5}),gsap.to(o,{x:0,y:0,duration:e.duration||1,ease:e.ease||Expo.easeOut})}))});break;default:console.warn("Animox Js : no such style available for Magnet Effect, mentioned in Magnet()")}},t.Scroll=function(e={}){switch(e.style||1){case 1:!function e(t){gsap.registerPlugin(ScrollTrigger);let n=new LocomotiveScroll({el:t,smooth:!0});return n.on("scroll",ScrollTrigger.update),ScrollTrigger.scrollerProxy(t,{scrollTop(e){return arguments.length?n.scrollTo(e,0,0):n.scroll.instance.scroll.y},getBoundingClientRect:()=>({top:0,left:0,width:window.innerWidth,height:window.innerHeight}),pinType:t.style.transform?"transform":"fixed"}),ScrollTrigger.addEventListener("refresh",()=>n.update()),ScrollTrigger.refresh(),t}(t);break;case 2:new function e(){let t=this;function n(e){requestAnimationFrame(n)}t.on=(e,t)=>{},requestAnimationFrame(n)};break;case 3:var n;n=t,new LocomotiveScroll({el:n,smooth:!0});break;default:console.warn("Animox Js : no such style available for Scroll, mentioned in Scroll()")}},t.StickyNav=function(e,n={}){var o,s;switch(n.style||1){case 1:o=t,window.addEventListener("scroll",()=>{o.classList.toggle("sticky",window.scrollY>0)});break;case 2:s=t,window.addEventListener("scroll",()=>{window.scrollY>0&&gsap.to(e||".nav",{backgroundColor:"transparent",scrollTrigger:{trigger:n.trigger||".page1",scroller:s||".main",start:n.start||"20% 15%",end:n.end||"15% top",scrub:!0,markers:n.markers||!1}})});break;default:console.warn("Animox Js : no such style available for sticky Navbars, mentioned in StickyNav()")}},t.ScrolltoTop=function(e={}){var n,o,s;switch(e.style||1){case 1:n=t,window.addEventListener("scroll",function(){n.classList.add("stt");var e=document.querySelector(".stt");e||((e=document.createElement("button")).classList.add("stt"),e.innerText="Scroll to Top",document.body.appendChild(e)),window.scrollY>200?e.style.display="block":e.style.display="none"}),document.addEventListener("click",function(e){e.target.classList.contains("stt")&&window.scrollTo({top:0,behavior:"smooth"})});break;case 2:(o=document.createElement("div")).classList.add("pbc"),document.body.appendChild(o),(s=document.createElement("div")).classList.add("pb"),o.appendChild(s),window.addEventListener("scroll",function(){var e=document.getElementById("stt2");document.querySelector(".pb");var t=document.body.scrollHeight-window.innerHeight,n=window.pageYOffset/t*100;s.style.width=n+"%",e||((e=document.createElement("button")).classList.add("stt2"),e.innerHTML="&#9650;",e.setAttribute("id","stt2"),document.body.appendChild(e)),window.scrollY>200?e.style.display="block":e.style.display="none"}),document.addEventListener("click",function(e){e.target.classList.contains("stt2")&&window.scrollTo({top:0,behavior:"smooth"})});break;default:console.warn("Animox Js : no such style available for scroll to top effect, mentioned in ScrollTop()")}},t.TextSplit=function(e={}){!function e(t){let n=t,o=n.innerText;n.innerHTML="";for(let s=0;s<o.length;s++){let a=document.createElement("span");a.textContent=o[s],a.className=`char char-${s+1}`,n.appendChild(a)}return t}(t)},t.BtnHover=function(e={}){switch(e.style||1){case 1:n.forEach(function t(n){return(e.bgColor||e.color)&&(n.style.backgroundColor=e.bgColor,n.style.color=e.color),n.classList.add("btnEffect1"),n});break;case 2:console.log("Sorry for inconvience this effect will be soon available to use");break;default:console.warn("Animox Js : no such style available for Button Effects, mentioned in BtnHover()")}},t.ImageTrail=function(){!function e(t){t.classList.add("hero");let n=document.querySelector(".hero"),o={isEnabled:!1,count:1,time:50},s=()=>{for(i=0;i<images.length;i++){let e=document.createElement("link");e.rel="preload",e.as="image",e.href=images[i],document.head.appendChild(e)}},a=e=>(o.count++,o.count==e&&(o.count=0),o.count),l=e=>{let t=document.createElement("img"),o=a(images.length);t.classList.add("hero_media"),t.setAttribute("src",images[o]),t.style.width="20rem",t.style.height="20rem",t.style.left=e.pageX-100+"px",t.style.top=e.pageY-100+"px",n.appendChild(t);let s=Math.floor(15*Math.random());window.setTimeout(()=>{t.style.transform=`scale(1) rotate(${s}deg)`},50),window.setTimeout(()=>{t.style.opacity=0,t.style.filter="blur(10px)",t.style.transform="scale(0.25)"},1500),window.setTimeout(()=>{n.removeChild(t)},2500)};return window.addEventListener("mousemove",e=>{o.isEnabled||(o.isEnabled=!0,setTimeout(()=>{o.isEnabled=!1},o.time),l(e))}),window.onload=()=>{s()},t}(t)},t.onHoverExpand=function(e,n={}){var o;return o=t,(SElem=document.querySelector(e)).addEventListener("mouseenter",function(){o.classList.contains("mf")&&o.classList.add("ECircle")}),SElem.addEventListener("mouseleave",function(){o.classList.remove("ECircle"),o.style.transition="all 0.20s"}),t},t.InfiniteCarousel=function(e={}){var n,o,s,a,l,r,c,d,f,u;switch(e.style||1){case 1:(o=n=t).classList.add("ls"),document.body.appendChild(o),(s=document.createElement("div")).classList.add("lc"),o.appendChild(s),function e(t){t.forEach(e=>{var t=document.createElement("img");t.src=e,t.alt="Logo",s.appendChild(t)})}(images),a=s.innerHTML,s.innerHTML+=a,s.scrollWidth,l=s.querySelector("img").offsetWidth*images.length,gsap.fromTo(s,{x:0},{duration:l/100,x:-l,ease:"linear",repeat:-1});break;case 2:(c=r=t).classList.add("q-scroller"),document.body.appendChild(c),(d=document.createElement("div")).classList.add("qc"),c.appendChild(d),function e(t){t.forEach(e=>{var t=document.createElement("div");t.classList.add("quote"),t.textContent=e,d.appendChild(t)})}(quotes),f=d.innerHTML,d.innerHTML+=f,d.scrollWidth,u=d.querySelector(".quote").offsetWidth*quotes.length,gsap.fromTo(d,{x:0},{duration:u/100,x:-u,ease:"linear",repeat:-1});break;default:console.warn("Animox Js : no such style available for Infinite Scroller or Carousel, mentioned in InfiniteCarousel()")}},t.ImageSlider=function(e={}){switch(e.style||1){case 1:!function t(n){n.classList.add("slider");let o=n;(e.height||e.width)&&(o.style.width=e.width,o.style.height=e.height);let s=0;async function a(){for(let e=0;e<imageUrls.length;e++){let t=document.createElement("div");t.classList.add("slide"),t.style.backgroundImage=`url('${imageUrls[e]}')`,o.appendChild(t)}}function l(){gsap.to(o,{x:-s*o.offsetWidth,duration:.5,ease:"power2.out"})}return a(),document.getElementById("prevBtn").addEventListener("click",function e(){s>0&&(s--,l())}),document.getElementById("nextBtn").addEventListener("click",function e(){s<o.children.length-1&&(s++,l())}),n}(t);break;case 2:console.log("sorry for inconvience this effect will be soon available to use");break;default:console.warn("Animox Js : no such style available for Infinite Scroller or Carousel, mentioned in InfiniteCarousel()")}},t}