https://www.svgator.com/component---src-pages-create-keyframe-animation-js-794b6350f5af4c67880c.js

1"use strict";(self.webpackChunkwww_svgator=self.webpackChunkwww_svgator||[]).push([[5265],{35:function(e,t,a){a.d(t,{A:function(){return m}});var n=a(4506),i=a(2212),r=a(7387),s=a(6942),o=a.n(s),l=a(6540),c=a(6551);let m=function(e){function t(t){var a;return(a=e.call(this,t)||this).state={selectedIdx:0,isMouseDown:!1,isMouseOver:!1},a.scrollIntervalDefault=5e3,a.scrollIntervalAltered=1e4,a.autoScrollTimeout=null,a.manualScrollTimeout=null,a.containerRef=l.createRef(),a.onWindowResize=a.onWindowResize.bind(a),a}(0,r.A)(t,e);var a=t.prototype;return a.onWindowResize=function(){this.focusTestimonial(this.state.selectedIdx)},a.focusTestimonial=function(e){var t;const a=this.containerRef.current,n=null==a||null===(t=a.childNodes)||void 0===t?void 0:t[e];n&&n.parentElement&&(this._isProgrammaticScroll=!0,this._programmaticScrollTarget=n.offsetLeft,n.parentElement.scrollLeft=n.offsetLeft,this.setState({selectedIdx:e}))},a.onClickTestimonialBtn=function(e){e.preventDefault();const t=e.currentTarget;if(!t)return;const a=(0,n.A)(t.parentElement.children).indexOf(t);a<0||this.focusTestimonial(a)},a.autoScroll=function(){window.clearTimeout(this.autoScrollTimeout),this.autoScrollTimeout=window.setTimeout(()=>{if(this.props.childrenList.length<=1)return;if(this.autoScroll(),this.state.isMouseDown||this.state.isMouseOver)return;let e=this.state.selectedIdx+1;e>=this.props.childrenList.length&&(e=0),this.focusTestimonial(e)},this.scrollInterval)},a.componentDidMount=function(){this.autoScroll(),window.addEventListener("resize",this.onWindowResize)},a.componentWillUnmount=function(){window.removeEventListener("resize",this.onWindowResize),window.clearTimeout(this.autoScrollTimeout),window.clearTimeout(this.manualScrollTimeout)},a.render=function(){const e=e=>{(0,c._c)(e,e=>{const t=(0,n.A)(e.target.parentElement.children).indexOf(e.target);this.focusTestimonial(t)})},t=()=>{this.setState({isMouseDown:!0}),this.autoScroll()},a=()=>{this.setState({isMouseDown:!1}),this.autoScroll()},i=[];return Array.from(this.props.childrenList).forEach((t,a)=>{const n=[];a===this.state.selectedIdx&&(n.push("cq_ln"),n.push(this.props.classNameBtnActive)),i.push(l.createElement("button",{key:"testimonial_button_"+a,tabIndex:0,"aria-label":"Go to testimonial "+(a+1),className:o().apply(void 0,n),onKeyDown:e,onClick:e=>this.onClickTestimonialBtn(e)},l.createElement("span",null)))}),l.createElement("div",{className:o()("cq_lk",{[this.props.className]:!!this.props.className}),role:"presentation","aria-label":"Testimonials",onTouchStart:t,onTouchEnd:a,onMouseEnter:()=>{this.setState({isMouseOver:!0})},onMouseLeave:()=>{this.setState({isMouseOver:!1})},onMouseDown:t,onMouseUp:a},l.createElement("div",{className:"cq_ll"},l.createElement("div",{className:"cq_t",onScroll:e=>{if(this._isProgrammaticScroll){return void(Math.abs(e.currentTarget.scrollLeft-this._programmaticScrollTarget)<1&&(this._isProgrammaticScroll=!1))}const t=e.currentTarget;t&&(window.clearTimeout(this.manualScrollTimeout),this.manualScrollTimeout=window.setTimeout(()=>{const e=t.scrollLeft;let a=0,i=1/0;(0,n.A)(t.children).forEach((t,n)=>{const r=t.offsetLeft,s=Math.abs(e-r);s<i&&(a=n,i=s)}),this.setState({selectedIdx:a})},20))},ref:this.containerRef},l.Children.toArray(this.props.childrenList))),this.props.childrenList.length>1&&l.createElement("div",{className:o()("cq_lm",this.props.classNameBar)},i))},(0,i.A)(t,[{key:"scrollInterval",get:function(){return this.state.isMouseDown?this.scrollIntervalAltered:this.scrollIntervalDefault}}])}(l.Component);m.defaultProps={childrenList:[]}},866:function(e,t,a){var n=a(6540),i=a(2871);const r=e=>n.createElement("svg",Object.assign({},e,{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"}),n.createElement("circle",{cx:"12",cy:"12",r:"11",stroke:"white",strokeWidth:"2"}),n.createElement("path",{d:"M7.66699 13.5L10.167 16L17.167 9",stroke:"white",strokeWidth:"2",strokeLinecap:"round"})),s=e=>n.createElement("svg",Object.assign({},e,{width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"}),n.createElement("circle",{cx:"20",cy:"20",r:"19",stroke:"white",strokeWidth:"2"}),n.createElement("path",{d:"M12.7778 22.5L16.9445 26.6667L28.6112 15",stroke:"white",strokeWidth:"2",strokeLinecap:"round"})),o=e=>n.createElement("svg",Object.assign({},e,{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"}),n.createElement("path",{d:"M7.66699 13.5L10.167 16L17.167 9",stroke:"white",strokeWidth:"2",strokeLinecap:"round"})),l=e=>n.createElement("svg",Object.assign({},e,{width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"}),n.createElement("path",{d:"M12.7778 22.5L16.9445 26.6667L28.6112 15",stroke:"white",strokeWidth:"2",strokeLinecap:"round"}));function c(e){return n.createElement(i.A,Object.assign({circledSmallSvg:r,circledLargeSvg:s,nakedSmallSvg:o,nakedLargeSvg:l,strokedPath:!0},e))}c.color={WHITE:"white",DARK:"dark",FLUORESCENT:"fluorescent",AZURE:"azure",CURRENT_COLOR:"currentColor"},c.structure={CIRCLED:"circled",NAKED:"naked"},c.size={SMALL:"small",LARGE:"large"},t.A=c},2806:function(e,t,a){a.d(t,{A:function(){return o}});var n=a(6540),i=a(5556),r=a.n(i),s=a(4719);function o(e){let t=e.mobile,a=e.desktop,i=e.breakpoint,r=void 0===i?768:i;const o=(0,s.A)(r).isMobile?t:a;return n.createElement(n.Fragment,null,o)}o.propTypes={mobile:r().node,desktop:r().node,breakpoint:r().number}},2871:function(e,t,a){a.d(t,{A:function(){return w}});var n={};a.r(n),a.d(n,{azure:function(){return o},circled:function(){return l},currentColor:function(){return c},customIcon:function(){return m},dark:function(){return u},fluorescent:function(){return d},naked:function(){return f},small:function(){return h},strokedPath:function(){return p},white:function(){return g}});var i=a(6540),r=a(6942),s=a.n(r),o="dV_qs",l="dV_qn",c="dV_qr",m="dV_qm",u="dV_l5",d="dV_qq",f="dV_qt",h="dV_mc",p="dV_qp",g="dV_jG";function y(e){var t,a;let r=e.className,o=e.size,c=e.structure,d=e.color,f=void 0===d?y.color.CURRENT_COLOR:d,h=e.nakedSmallSvg,g=e.nakedLargeSvg,w=e.circledSmallSvg,v=e.circledLargeSvg,E=e.strokedPath;if(r=[m,r,null!==(t=n[c])&&void 0!==t?t:l,null!==(a=n[f])&&void 0!==a?a:u,{[p]:E,[n[o]]:o}],r=s()(r),c===y.structure.NAKED)switch(o){case y.size.SMALL:return i.createElement(h,{className:r});case y.size.LARGE:default:return i.createElement(g,{className:r})}switch(o){case y.size.SMALL:return i.createElement(w,{className:r});case y.size.LARGE:default:return i.createElement(v,{className:r})}}y.color={WHITE:"white",DARK:"dark",FLUORESCENT:"fluorescent",AZURE:"azure",CURRENT_COLOR:"currentColor"},y.structure={CIRCLED:"circled",NAKED:"naked"},y.size={SMALL:"small",LARGE:"large"};var w=y},2933:function(e,t,a){a.d(t,{A:function(){return o}});var n=a(6942),i=a.n(n),r=a(6540),s="cp_lj";function o(e){let t=e.className,a=e.children;return r.createElement("div",{className:i()(s,t)},a)}},3033:function(e,t,a){a.d(t,{A:function(){return m}});var n=a(6540),i="cR_l5",r="cR_mb",s="cR_l9",o=a(6942),l=a.n(o);function c(e){let t=e.className,a=e.children,o=e.size,m=e.textColor,u=e.color;switch(t=[t],o){case c.size.MEDIUM:t.push(r);break;case c.size.SMALL:t.push("cR_mc");break;default:t.push(r)}switch(m){case c.textColor.TEXT_WHITE:t.push(s);break;case c.textColor.TEXT_DARK:t.push("cR_l6");break;case c.textColor.TEXT_AZURE:t.push("cR_l8");break;case c.textColor.TEXT_FLUORESCENT:t.push("cR_l7");break;default:t.push(s)}switch(u){case c.color.DARK:t.push(i);break;case c.color.LIGHT:t.push("cR_lF");break;default:t.push(i)}return n.createElement("div",{className:l()("cR_hx",t)},a)}c.color={DARK:"dark",LIGHT:"light"},c.textColor={TEXT_DARK:"textDark",TEXT_FLUORESCENT:"textFluorescent",TEXT_AZURE:"textAzure",TEXT_WHITE:"textWhite"},c.size={SMALL:"small",MEDIUM:"medium"};var m=c},4159:function(e,t,a){a.d(t,{A:function(){return u}});var n=a(6942),i=a.n(n),r=a(6540);var s=Object.freeze({nHD:[640,360],VGA:[640,480],SVGA:[800,600],XVGA:[1024,768],WXGA1:[1280,720],WXGA2:[1280,800],SXGA:[1280,1024],HD:[1366,768],"HD+":[1600,900],UXGA:[1600,1200],"WSXGA+":[1680,1050],FHD:[1920,1080],WUXGA:[1920,1200],QWXGA:[2048,1152],QXGA:[2048,1536],UWFHD:[2560,1080],QHD:[2560,1440],WQXGA:[2560,1600],UWQHD:[3440,1440],"4K":[3840,2160],"8K":[7680,4320]}),o=a(1664),l="b9_kN",c="b9_kL",m="b9_kM";function u(e){let t=e.src,a=e.alt,n=e.width,u=void 0===n?s["4K"][0]:n,d=e.height,f=e.className,h=e.skipLazy,p=void 0===h||h,g=e.color,y=void 0===g?"var(--rich-black)":g,w=e.objAltSrc,v=void 0===w?null:w,E=e.flipped,A=void 0!==E&&E;

1return v||p||(v=t),t&&a?r.createElement(o.A,{alt:a,src:t,objAltSrc:v,size:[u,d],className:i()(l,f),skipLazy:p}):r.createElement("svg",{viewBox:"0 0 100 15",preserveAspectRatio:"none",className:i()(A?m:c,l,f)},r.createElement("rect",{x:"-2",y:"2",width:"104",height:"13"}),r.createElement("ellipse",{cx:"50",cy:"-85",fill:y,rx:"100",ry:"100"}))}u.foldStyle="b9_b9"},6212:function(e,t,a){a.r(t),a.d(t,{Head:function(){return F},default:function(){return P}});var n=a(6540),i=a(6874),r=a(423),s=a(6942),o=a.n(s),l=a(2157),c=a(8439),m=a(1664),u=a(4785),d=a(776),f=a(975),h=a(4719),p=a(229),g=a(8248),y=a(1904),w=a(2505),v=a(9584),E=a(866),A=a(4159);var k=e=>{let t=e.title,a=e.text,i=e.alt,r=e.image,s=e.className,l=e.size,c=void 0===l?[186,130]:l;return n.createElement("div",{className:o()("dZ_W",s)},n.createElement(w.A,{className:"dZ_cr",alt:i,size:c,src:m.A.LP_CDN+r,skipLazy:!0}),n.createElement("h3",{className:"dZ_br"},t),n.createElement("p",{className:"dZ_fg"},a))},b=a(7998),N=a(6561),S=a(6623),x=a(8097),_=a(9849),L=a.n(_),T="X_b4",C="X_bc",D="X_cn",G="X_fy",R="X_cc",z="X_X",I="X_br";const W="keyframe-animation-made-simple/",X=m.A.LP_CDN+W,M=X+"f8-testimonials",j=[{text:"I’ve created many keyframe animations using this tool. Without the help of tutorials, and with zero coding. The list of reasons why I recommend SVGator goes on and on!”",name:"Clément Jacquelin",personImage:{png:M+"/testimonial-clement%20jacquelin.png"},position:"Game Developer"},{text:"I haven't found any other keyframe animation tool that’s just as easy to use. It's such a breeze compared to other workflows.",name:"Pavlo Yevsehnieiev",personImage:{png:M+"/testimonial-pavlo%20yevsehnieiev.png"},position:"UX Engineer"},{text:"SVGator is for those who do not want to be faced with coding. You can create and animate SVG dynamically without knowing anything about code. It’s awesome!",name:"Yudai Heber",personImage:{png:M+"/testimonial-yudai%20heber.png"},position:"Software Engineer"}];function K(e){return L().cdnLink+"/assets/landing-pages/keyframe-animation-made-simple/f3-keyframe-animation-examples/clients-logos/"+e+".svg"}const V=[{src:K("toptal"),width:80,alt:"Toptal logo"},{src:K("goto"),width:52,alt:"GoTo logo"},{src:K("globant"),width:118,alt:"Globant logo"},{src:K("envato"),width:112,alt:"Envato logo"},{src:K("wix"),width:52,alt:"WiX logo"},{src:K("spotify"),width:84,alt:"Spotify logo"},{src:K("canva"),width:79,alt:"Canva logo"},{src:K("webflow"),width:128,alt:"Webflow logo"}];function O(){const e=(0,h.A)(1024).isMobile;return n.createElement(l.A,null,n.createElement(c.A,{className:o()("X_9",A.A.foldStyle),styling:c.A.styling.BLACK,section:"Keyframe Animation Made Simple",suffix:n.createElement(A.A,null)},n.createElement(g.A,{reverse:!1,exceed:!0,className:o()(R)},n.createElement("div",null,n.createElement(u.A,{left:!0},n.createElement("h1",null,"Keyframe Animation Made Simple")),n.createElement("p",null,"SVGator empowers you to design, breathe life into your keyframe animations, and export them seamlessly, all within an intuitive interface."),n.createElement(y.A,{className:C,text:"Get started for free"})),n.createElement(x.A,{className:"X_bZ",src:X+"f1-keyframe-animation-made-simple/keyframe-animation-made-simple.webm",preload:"auto",width:670,height:485}))),n.createElement(c.A,{section:"User-friendly keyframe animation software",className:"X_bd"},n.createElement(f.A,{className:D,title:n.createElement("h2",null,"User-friendly keyframe",n.createElement("br",null)," animation software"),subtitle:n.createElement("p",{className:z},"Work together in a shared workspace, exchange feedback, and create stunning animations, enjoying an intuitive and efficient experience."),cols:[{alt:"Animation showing app interface",image:W+"f2-user-friendly-keyframe/intuitive-interface.svg",title:"Intuitive interface",text:"Enjoy a clean, intuitive interface designed to enhance your creative flow."},{alt:"Easily animate",image:W+"f2-user-friendly-keyframe/easily-animate.svg",title:"Transparency support",text:"Set keyframes and control motion with ease. Apply advanced animation effects like easing, delay, and loop."},{alt:"Animated cursor showing multiple options",image:W+"f2-user-friendly-keyframe/multiple-exports.svg",title:"Multiple export options",text:"Export your animations in various formats such as SVG, Lottie, GIF, JavaScript, and more."}].map(e=>n.createElement(k,Object.assign({size:[200,200],className:"X_W",key:e.title},e)))})),n.createElement(c.A,{className:"X_bh",section:"Keyframe animation examples made with SVGator"},n.createElement(d.A,{fullWidth:!0,className:o()(R,T)},n.createElement("div",null,n.createElement("h2",{className:I},"Keyframe animation examples",!e&&n.createElement("br",null)," made with SVGator"),n.createElement("p",{className:z},"Get inspired by outstanding live projects made by animation teams already working with SVGator")),n.createElement(y.A,{className:C,text:"Create a team"}),n.createElement(v.A,{className:"X_bf"},[{src:X+"f3-keyframe-animation-examples/gelato-blog.svg",alt:"Icecream animation",size:[220,225]},{src:X+"f3-keyframe-animation-examples/steamboat-plane.svg",alt:"Airplane animation",size:[465,254]},{src:X+"f3-keyframe-animation-examples/chinese-year-snake.svg",alt:"Game Boy animation",size:[461,469]},{src:X+"f3-keyframe-animation-examples/cat-box.svg",alt:"Animation of a cat in a box",size:[220,254]},{src:X+"f3-keyframe-animation-examples/girl-with-ermina.svg",alt:"Animated painting",size:[220,224]},{src:X+"f3-keyframe-animation-examples/plants-screen.svg",alt:"Shapes animation",size:[222,224]},{src:X+"f3-keyframe-animation-examples/ramen-raccoon.svg",alt:"Raccoon eating ramen animation",size:[222,224]},{src:X+"f3-keyframe-animation-examples/packaman-burger.svg",alt:"Animation of a burger eating dots",size:[220,224]}].map((e,t)=>n.createElement(w.A,Object.assign({className:"X_bg",key:t},e)))),n.createElement(b.A,{list:V,styling:b.A.styling.BLACK}))),n.createElement(c.A,{styling:c.A.styling.BLACK,section:"Create CSS keyframe animations"},n.createElement(g.A,{reverse:!1,exceed:!0,className:o()(G,R)},n.createElement("div",null,n.createElement("h3",null,"Create CSS keyframe animations"),n.createElement("p",null,"Design, animate, and generate clean CSS code, all within SVGator."),n.createElement("p",null,"No coding required. Just set your keyframes, tweak the motion, and export a ready-to-use CSS file.")),n.createElement(m.A,{alt:"3D loader animation",size:[600,493],src:X+"f4-create-css-keyframe/create-css-animation.svg"}))),n.createElement(c.A,{section:"Keyframe animations in multiple formats"},n.createElement(g.A,{reverse:!0,className:o()(G,R,"X_cj"),exceed:!0},n.createElement("div",null,n.createElement("h3",null,"Keyframe animations in multiple formats"),n.createElement("p",null,"SVGator supports exports in SVG, Lottie JSON, JavaScript, Dart with mobile export for Flutter, and various video formats. Choose the best format for your keyframe animation."),n.createElement(N.A,null),n.createElement("ul",null,["Share folders or projects with team members","Grant view or edit access to folders or projects","See which folders are shared or private"].map(e=>n.createElement("li",{key:e},n.createElement(E.A,{size:E.A.size.SMALL,color:E.A.color.AZURE}),e)))),n.createElement(m.A,{alt:"Export options animation",size:[600,492],src:X+"f5-keyframe-animations-in-multiple-formats/keyframe-animations-in-multiple-formats.svg"}))),n.createElement(c.A,{styling:c.A.styling.BLACK,section:"Full-featured keyframe animation tool",className:"X_b7"},n.createElement(g.A,{reverse:!1,className:o()(G,R),exceed:!0},n.createElement("div",null,n.createElement("h3",null,"Full-featured keyframe animation tool"),n.createElement("p",null,"From path animations and morphing effects to 3D faux rotation and filters, SVGator gives you complete creative control."),n.createElement("p",null,"Our full-featured toolkit empowers designers, developers, and creative teams to push the boundaries of visual storytelling."),n.createElement(y.A,{text:"Create a project",className:C})),n.createElement(m.A,{alt:"Characters skating animation",size:[600,492],src:X+"f6-full-featured-keyframe-animation/full-featured-keyframe-animation-tool.svg"}))),n.createElement(c.A,{section:"How to animate with keyframes using SVGator?",className:"X_bl",styling:c.A.styling.BLACK},n.createElement(f.A,{className:o()(D,R),title:n.createElement("h2",{className:I},"How to animate with",n.createElement("br",null)," keyframes using SVGator?"),subtitle:n.createElement("p",{className:z},"Work together in a shared workspace, exchange feedback, and create stunning animations,",n.createElement("br",null)," enjoying an intuitive and efficie

1nt experience."),cols:[{alt:"Pen tool drawing vectors animation",image:"web-animation/create-web-animation-graphics.svg",title:n.createElement(n.Fragment,null,"Draw your",n.createElement("br",null)," design"),text:"Draw from scratch with the design tools or import your ready-made illustration."},{alt:"Easing functions and keyframes animation",image:"web-animation/how-to-make-a-web-animation.svg",title:"Create a motion graphic",text:"Add animation effects by setting up keyframes on a timeline, then adjust the speed and easing."},{alt:"Exporting animation",image:"vector-animation/vector-animation-rocket.svg",title:"Export your keyframe animation",text:"Export your keyframe animation file by choosing from a list of various formats."}].map((e,t)=>n.createElement(k,Object.assign({key:t,className:"X_W"},e)))})),n.createElement(c.A,{styling:c.A.styling.GRAYISH,section:"Testimonials",className:"X_cm"},n.createElement(S.A,{className:"X_t",testimonialList:j.map(e=>Object.assign({},e,{width:153,height:153}))})),n.createElement(c.A,{styling:c.A.styling.DARKBLUE,section:"FAQ"},n.createElement(p.A,{className:"X_fz",questions:[{title:"What is a keyframe in animation?",p:"A keyframe marks the start or end of a transition in an animation. It defines the state of an object at a specific point in time, allowing smooth interpolation between keyframes."},{title:"How do you animate a keyframe?",p:"To animate a keyframe, set the initial and final properties of an element (such as position, opacity, or scale) and the animation software generates the in-between frames. SVGator simplifies this with a visual timeline and easing options."},{title:"What is the difference between keyframe animation and motion capture?",p:"Keyframe animation is manually created by setting values at specific points on a timeline, while motion capture records the movements of real-world actors to apply them to digital models. Keyframe animation allows for more control and creativity."},{title:"How to use keyframes?",p:"In SVGator, simply select an element, add keyframes at different points in the timeline, and adjust the element's properties. The tool automatically animates the transitions between those keyframes."}]})),n.createElement(c.A,{halfTop:!0,section:"Easily create your keyframe animation projects now",className:"X_fm"},n.createElement(d.A,{className:o()(T,R)},n.createElement("h2",null,"Easily create your keyframe animation projects now"),n.createElement("p",null,"Draw and animate in one place, and use advanced animators with an intuitive interface."),n.createElement(y.A,{text:"Get started for free",className:C}))))}var H=a(4086),U=a(1121),q=a(1649);var B=function(e){return{hasPart:[(0,q.A)("How to animate with keyframes using SVGator","3 easy steps to animate with keyframes using SVGator.",[{name:"Draw your design",text:"Draw from scratch with the design tools or import your ready-made illustration."},{name:"Create a motion graphic",text:"Add animation effects by setting up keyframes on a timeline, then adjust the speed and easing."},{name:"Export your keyframe animation",text:"Export your keyframe animation file by choosing from a list of various formats."}]),(0,U.A)([{question:"What is a keyframe in animation?",answer:"A keyframe marks the start or end of a transition in an animation. It defines the state of an object at a specific point in time, allowing smooth interpolation between keyframes."},{question:"How do you animate a keyframe?",answer:"To animate a keyframe, set the initial and final properties of an element (such as position, opacity, or scale) and the animation software generates the in-between frames. SVGator simplifies this with a visual timeline and easing options."},{question:"What is the difference between keyframe animation and motion capture?",answer:"Keyframe animation is manually created by setting values at specific points on a timeline, while motion capture records the movements of real-world actors to apply them to digital models. Keyframe animation allows for more control and creativity."},{question:"How to use keyframes?",answer:"In SVGator, simply select an element, add keyframes at different points in the timeline, and adjust the element's properties. The tool automatically animates the transitions between those keyframes."}],e+"#FAQPage")]}};const F=e=>{let t=e.location;const a="Animate With Keyframes Easily – Keyframe Animation Software",i="Create keyframe animations effortlessly: draw and animate in one place, and use advanced animators with an intuitive interface!";return n.createElement(r.A,{title:a,description:i,canonical:t.pathname,image:L().cdnLink+"/assets/landing-pages/keyframe-animation-made-simple/thumbn

1ail-image-keyframe-animation.png"},n.createElement(H.A,{name:a,description:i,published:"2025-07-03",modified:"2025-09-08",location:t,pageSpecificLD:B}))};var P=function(){return n.createElement(i.A,null,n.createElement(O,null))}},6561:function(e,t,a){a.d(t,{A:function(){return l}});var n=a(6540),i=a(3033),r=a(2806);const s=[".mp4",".mov",".webm",".gif",".webp",".apng"],o={textColor:i.A.textColor.TEXT_DARK,color:i.A.color.LIGHT};var l=e=>{let t=e.formats,a=e.size;return n.createElement("div",{className:"cy_lJ"},(t||s).map(e=>n.createElement(r.A,{key:e,breakpoint:1469,mobile:n.createElement(i.A,Object.assign({},o,{size:a||i.A.size.SMALL}),e),desktop:n.createElement(i.A,Object.assign({},o,{size:a||i.A.size.MEDIUM}),e)})))}},6623:function(e,t,a){a.d(t,{A:function(){return d}});var n=a(7387),i=a(6540),r=a(6942),s=a.n(r),o=a(1664),l=a(2933);function c(e){let t=e.src,a=e.name,n=e.width,r=e.height,s=e.alt;if(s=s||"Picture of "+a,"string"!=typeof t){const e=n&&r?[n,r]:null;return i.createElement(o.A,{src:t,alt:s,size:e})}return i.createElement("img",{src:t,alt:s,width:n||null,height:r||null,loading:"lazy"})}function m(e){const t=e.d;return i.createElement(l.A,{className:"dD_lj"},i.createElement("div",{className:"dD_n0"},i.createElement(c,{src:t.personImage,name:t.name,width:t.width,height:t.height,alt:t.imageAlt})),i.createElement("div",{className:"dD_fg"},t.company?i.createElement("img",{className:"dD_pM",src:t.companyLogo,alt:t.company+" Logo",width:t.companyWidth||null,height:t.companyHeight||null,loading:"lazy"}):null,i.createElement("div",{className:s()("dD_dp",e.className)},t.text),i.createElement("div",{className:"dD_jC"},i.createElement("div",{className:s()("dD_n2",e.classNameAuthor)},t.name),i.createElement("div",{className:s()("dD_pN",e.classNamePosition)},t.position))))}var u=a(35);let d=function(e){function t(t){var a;return(a=e.call(this,t)||this).state={selectedIdx:0},a}return(0,n.A)(t,e),t.prototype.render=function(){const e=this.props.testimonialList.map((e,t)=>i.createElement(m,{key:"testimonial_"+t,className:this.props.classNameQuote,classNameAuthor:this.props.classNameAuthor,classNamePosition:this.props.classNamePosition,d:e}));return i.createElement(u.A,{className:this.props.className,classNameBar:this.props.classNameBar,classNameBtnActive:this.props.classNameBtnActive,childrenList:e})},t}(i.Component)},7998:function(e,t,a){a.d(t,{A:function(){return y}});var n={};a.r(n),a.d(n,{black:function(){return c},light:function(){return m},partners:function(){return u},partnersList:function(){return d},partnersText:function(){return f}});var i=a(6540),r=a(9849),s=a.n(r),o=a(6942),l=a.n(o),c="cx_lG",m="cx_lF",u="cx_bV",d="cx_lH",f="cx_lD";function h(e){return s().cdnLink+"/assets/homepage/f1-animate-any-design/f1-customer-logos/"+e+".svg"}const p=[{src:h("Toptal"),width:80,alt:"Toptal logo"},{src:h("GoTo"),width:52,alt:"GoTo logo"},{src:h("Globant"),width:118,alt:"Globant logo"},{src:h("Envato"),width:112,alt:"Envato logo"},{src:h("Wix"),width:52,alt:"WiX logo"},{src:h("Spotify"),width:84,alt:"Spotify logo"},{src:h("Canva"),width:79,alt:"Canva logo"},{src:h("Webflow"),width:128,alt:"Webflow logo"}],g=e=>{let t=e.list,a=void 0===t?p:t,r=e.styling,s=void 0===r?g.styling.DARK:r,o=e.title,c=void 0===o?"Trusted by teams at":o,m=e.fontWeight,h=void 0===m?500:m,y=e.className;return i.createElement("div",{className:l()(u,n[s],y)},i.createElement("p",{className:f,style:{fontWeight:h}},c),i.createElement("div",{className:d},a.map((e,t)=>i.createElement("img",{key:t,alt:e.alt,src:e.src,width:e.width,height:28,loading:"lazy"}))))};g.styling={DARK:"dark",LIGHT:"light",BLACK:"black"};var y=g},8097:function(e,t,a){a.d(t,{A:function(){return s}});var n=a(6540),i=a(6942),r=a.n(i);var s=e=>{let t=e.src,a=e.type,i=void 0===a?"video/webm":a,s=e.className,o=e.poster,l=e.width,c=e.height,m=e.preload,u=void 0===m?"none":m,d=e.alt,f=void 0===d?null:d;return n.createElement("video",Object.assign({className:r()("dl_bZ",{[s]:s}),autoPlay:!0,muted:!0,loop:!0,playsInline:!0},u&&"auto"!==u?{preload:u}:{},{controls:!1,poster:o||null,width:l,height:c,"aria-label":f}),n.createElement("source",{src:t,type:i}),f)}},9584:function(e,t,a){a.d(t,{A:function(){return o}});var n=a(6540),i=a(6942),r=a.n(i);const s=(0,n.forwardRef)((e,t)=>{let a=e.className,i=e.children,s=e.style;return n.createElement("div",{className:r()("bK_b2",a),style:s,ref:t},n.Children.toArray(i))});s.displayName="GridSquare";var o=s}}]);