https://www.svgator.com/4ba0be399e4305ff834b3476112f302c5235ca97-685fcf1a4b86ffa5ef1b.js

1(self.webpackChunkwww_svgator=self.webpackChunkwww_svgator||[]).push([[7401],{2008:function(e,t,a){"use strict";a.d(t,{j:function(){return n}});const n={title:"Free SVG animation templates",description:"Customize any template in SVGator, free for commercial use. Export as SVG, Lottie, GIF, or video, from the same project."}},4801:function(e,t,a){"use strict";a.d(t,{A:function(){return u}});var n=a(6540),r="cb_kQ",l="cb_cc",o="cb_kP",c="cb_kR",i=a(6942),s=a.n(i);function u(e){let t=e.children,a=e.onClose,i=e.className;const u=(0,n.useRef)(null);(0,n.useEffect)(()=>{const e=document.body,t=window.innerWidth-document.documentElement.clientWidth,a=e.style.overflow,n=e.style.paddingRight;return e.style.overflow="hidden",t>0&&(e.style.paddingRight=t+"px"),()=>{e.style.overflow=a,e.style.paddingRight=n}},[]),(0,n.useEffect)(()=>{if(u.current){u.current.querySelectorAll("script").forEach(e=>{const t=document.createElement("script");Array.from(e.attributes).forEach(e=>{t.setAttribute(e.name,e.value)}),e.innerHTML&&(t.innerHTML=e.innerHTML),e.parentNode.replaceChild(t,e)})}},[t]);return n.createElement("div",{className:s()(o),onClick:a,onKeyDown:e=>{"Escape"===e.key&&a&&a()},role:"none"},n.createElement("div",{className:s()(l,i),onClick:e=>e.stopPropagation(),role:"presentation"},n.createElement("button",{className:s()(r),onClick:a,tabIndex:0},"×"),n.createElement("div",{ref:u,className:s()(c)},t)))}},6162:function(e,t,a){"use strict";a.d(t,{A:function(){return C}});a(410);var n=a(6540),r=a(4794),l=a(9993),o=a.n(l),c=a(2416),i=a(6942),s=a.n(i),u=a(5901),m="cY_ln",d="cY_mk";var f=function(e){let t=e.tags,a=e.activeTag;return t.length?n.createElement("nav",{className:s()("cY_f"),"aria-label":"Template categories"},n.createElement(u.A,{to:c.TEMPLATES_BASE_PATH,className:s()(d,{[m]:!a}),"aria-current":a?void 0:"page","data-label":"All animations"},"All animations"),t.map(e=>{const t=a===e;return n.createElement(u.A,{key:e,to:(0,c.getCategoryPath)(e),className:s()(d,{[m]:t}),"aria-current":t?"page":void 0,"data-label":e},e)})):null};var p=function(e){let t=e.value,a=e.onChange,r=e.placeholder,l=void 0===r?"Search":r;const o=(0,n.useRef)(null),c=(0,n.useCallback)(()=>{var e;a(""),null===(e=o.current)||void 0===e||e.focus()},[a]),i=(0,n.useCallback)(e=>{"Escape"===e.key&&t&&(e.preventDefault(),c())},[c,t]);return n.createElement("div",{className:s()("c1_f"),role:"search"},n.createElement("div",{className:s()("c1_mz")},n.createElement("svg",{className:s()("c1_mB"),viewBox:"0 0 20 20",width:"18",height:"18","aria-hidden":"true",focusable:"false"},n.createElement("circle",{cx:"9",cy:"9",r:"6",fill:"none",stroke:"currentColor",strokeWidth:"1.6"}),n.createElement("path",{d:"M13.5 13.5 17.5 17.5",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round"})),n.createElement("input",{ref:o,type:"search",name:"search",className:s()("c1_mC"),value:t,placeholder:l,"aria-label":"Search templates",autoComplete:"off",onChange:e=>a(e.target.value),onKeyDown:i}),t?n.createElement("button",{type:"button",className:s()("c1_mD"),onClick:c,"aria-label":"Clear search"},n.createElement("svg",{viewBox:"0 0 16 16",width:"14",height:"14","aria-hidden":"true",focusable:"false"},n.createElement("path",{d:"M4 4 12 12M12 4 4 12",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round"}))):null))},h=a(8880),v=a(4801),E=a(2444),g=a(7531);var w=function(e){let t=e.template,a=e.onClose;return(0,n.useEffect)(()=>{const e=e=>{"Escape"===e.key&&(e.stopPropagation(),a())};return document.addEventListener("keydown",e,!0),()=>document.removeEventListener("keydown",e,!0)},[a]),t?n.createElement(v.A,{onClose:a,className:s()("c2_hy")},n.createElement("div",{className:s()("c2_mF")}),n.createElement(E.Ay,{template:t,variant:E.yY}),n.createElement("div",{className:s()("c2_mG")})):null},b=a(2157),y=a(8439),k=a(776),A=a(2008);var C=function(e){let t=e.activeTag,a=void 0===t?null:t,i=e.heading,u=void 0===i?A.j.title:i,m=e.paragraph,d=void 0===m?A.j.description:m;const v=(0,r.useStaticQuery)("2947165475"),E=v.site.siteMetadata.appUrl,C=(0,n.useMemo)(()=>

1v.allAnimationTemplate.nodes.map(g.JR),[v]),N=(0,n.useState)(()=>(0,g.ZS)(g.ce)),_=N[0],S=N[1],T=(0,g.XL)(_),L=(0,n.useState)(""),M=L[0],P=L[1],x=(0,n.useState)(T),R=x[0],z=x[1],B=(0,n.useState)(null),D=B[0],F=B[1],W=(0,n.useState)(C),j=W[0],G=W[1],H=(0,n.useMemo)(()=>function(e){const t=new Set;return e.forEach(e=>(e.tags||[]).forEach(e=>t.add(e))),Array.from(t).sort()}(j),[j]);(0,n.useEffect)(()=>{if(!E)return;const e=new AbortController;return(async()=>{try{const t=await fetch(E+l.TEMPLATES_ENDPOINT,{signal:e.signal});if(!t.ok)return;const a=await t.json();if(!Array.isArray(a))return;G(a.map(o()))}catch(t){if("AbortError"===t.name)return;console.error("[animation-templates] failed to fetch remote templates:",t)}})(),()=>e.abort()},[E]),(0,n.useEffect)(()=>{if("undefined"==typeof window)return;let e=null;const t=()=>S((0,g.ZS)(g.ce)),a=()=>{null!==e&&window.cancelAnimationFrame(e),e=window.requestAnimationFrame(t)};return window.addEventListener("resize",a),()=>{window.removeEventListener("resize",a),null!==e&&window.cancelAnimationFrame(e)}},[]);const I=(0,n.useMemo)(()=>(0,g.BK)(j),[j]),Y=(0,n.useMemo)(()=>{const e=(0,g.QJ)(M);return a||e.length?I.filter(t=>{let n=t.template,r=t.haystack;return!(a&&!(n.tags||[]).includes(a))&&(0,g.Cs)(r,e)}).map(e=>e.template):j},[a,I,M,j]),K=(0,n.useCallback)(e=>{P(e),z(T)},[T]),O=(0,n.useCallback)(()=>{z(e=>e+T)},[T]),Q=(0,n.useRef)(!1);(0,n.useEffect)(()=>{if(Q.current||"undefined"==typeof window)return;const e=window.location.hash.replace(/^#/,""),t=e?j.find(t=>t.id===e):void 0;if(t)return Q.current=!0,void window.location.replace((0,c.getTemplatePath)(t.fileName,t.tags));if(a)return;const n=(0,c.findTagBySlug)(H,new URLSearchParams(window.location.search).get(g.vx));n&&(Q.current=!0,window.location.replace((0,c.getCategoryPath)(n)))},[a,H,j]);const V=(0,n.useCallback)(e=>{F(e)},[]),q=(0,n.useCallback)(()=>F(null),[]),J=D?j.find(e=>e.id===D):null;return n.createElement(b.A,null,n.createElement(y.A,{section:u,halfBottom:!0},n.createElement(k.A,{className:s()("bc_c")},n.createElement("h1",{className:s()("bc_gc")},u),n.createElement("p",{className:s()("bc_cb")},d))),n.createElement(y.A,{className:"bc_bz",halfTop:!0},n.createElement(k.A,{fullWidth:!0,className:s()("bc_gb")},n.createElement(f,{tags:H,activeTag:a}),n.createElement(p,{value:M,onChange:K}),n.createElement(h.A,{templates:Y,visibleCount:R,onLoadMore:O,onOpenTemplate:V})),J&&n.createElement(w,{template:J,onClose:q})))}},9993:function(e){e.exports=function(e){var t,a,n,r;return{id:String(e.id),title:e.title,description:e.description,fileName:e.fileName,tags:Array.isArray(e.tags)?e.tags:[],size:{width:null!==(t=null===(a=e.size)||void 0===a?void 0:a.width)&&void 0!==t?t:void 0,height:null!==(n=null===(r=e.size)||void 0===r?void 0:r.height)&&void 0!==n?n:void 0},background:e.background||void 0,author:e.author?{name:e.author.name||void 0,avatar:e.author.avatar||void 0,url:e.author.url||void 0}:void 0}},e.exports.TEMPLATES_ENDPOINT="/api/svgator/animation-templates"}}]);