https://cdn-useast1.kapwing.com/static-pages/prod/_next/static/chu…/add-effects/keyframing-dbda4598803a24e7.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4305],{70870:function(e,t,o){(window.__NEXT_P=window.__NEXT_P||[]).push(["/tools/add-effects/keyframing",function(){return o(41477)}])},29263:function(e,t,o){"use strict";var i=o(20503),n=o(73732),a=o(11662),r=o(79027),s=o(77353),d=o.n(s);t.Z=e=>{let{infoArr:t}=e,[o,s]=(0,n.useState)(0),[c,l]=(0,n.useState)(!1);return(0,a.Z)(()=>{c||s(e=>{let o=e+1;return o>=t.length?0:o})},3e3),(0,i.jsx)("div",{className:d().wrapper,onMouseEnter:()=>l(!0),onMouseLeave:()=>l(!1),children:(0,i.jsxs)("div",{className:d().container,children:[(0,i.jsx)("div",{className:d().left,children:t.map((e,t)=>{let{header:n,description:a,link:r}=e,c=d().section;return t===o&&(c+=" "+d().selectedSection),(0,i.jsxs)("div",{className:c,onClick:()=>{s(t)},children:[(0,i.jsx)("div",{className:d().header,children:n}),(0,i.jsx)("div",{className:d().description,children:a}),r&&r.text&&(0,i.jsx)("a",{href:r.href,className:d().link,children:r.text})]},n)})}),(0,i.jsx)("div",{className:d().right,children:(()=>{let e=t[o],{media:n}=e;return n.poster?(0,i.jsx)("a",{href:"/studio/editor",className:d().video,children:(0,i.jsx)("video",{className:d().video,controls:!0,src:n.src,playsInline:!0,preload:"auto",poster:n.poster,autoPlay:!0,muted:!0})}):(0,i.jsx)("a",{href:"/studio/editor",className:d().image,children:(0,i.jsx)(r.Z,{layout:"fill",objectFit:"contain",src:n.src,alt:n.alt})})})()})]})})}},5050:function(e,t,o){"use strict";o.d(t,{E:function(){return n}});let i=()=>[{text:"Add Effects to Video",url:"/tools/add-effects"},{text:"Add Freeze Frame to Video",url:"/tools/add-effects/freeze-frame"},{text:"Add Glitch Effect to Video",url:"/tools/add-effects/glitch"},{text:"Add Transition to Video",url:"/tools/add-effects/video-transitions"},{text:"Add Progress Bar to Video",url:"/tools/add-effects/progress-bar"},{text:"Add Audio Waveform to Video",url:"/tools/add-effects/waveform"},{text:"Add Ken Burns Effect",url:"/tools/add-effects/ken-burns-effect"},{text:"Add TV Static Effect",url:"/tools/add-effects/tv-static"},{text:"Add VHS Effect",url:"/tools/add-effects/vhs"},{text:"Split Screen Video Editor",url:"/tools/make/split-screen"}],n=e=>i().filter(t=>t.url!==e)},41477:function(e,t,o){"use strict";o.r(t),o.d(t,{data:function(){return m},default:function(){return p}});var i=o(20503);o(73732);var n=o(63227),a=o(35656),r=o(82299),s=o.n(r),d=o(27575),c=o(29263),l=o(5050);let m={meta:{title:"Online Keyframe Editor — Keyframe Animation Made Easy — Kapwing",canonicalLink:"https://kapwing.com/tools/add-effects/keyframing",description:"Use Kapwing’s online keyframing tool to create keyframe animations from one point to another in any video. With only a few clicks, you can animate elements by making them move between keyframes.",keywords:"keyframe animation, keyframe, keyframing, keyframing animation, keyframes, keyframe animation software, frame by frame animation, keyframe editor",ogImage:"https://cdn-useast1.kapwing.com/static/VTf-Keyframing.webp"},origin:"add-effects/keyframing",url:"/tools/add-effects/keyframing",splash:{header:"Keyframe Animation Editor",description:"Keyframing made easy for anyone to animate",screenshot:"https://cdn-useast1.kapwing.com/static/bXc-keyframes-(1).webp",tooltip:n.p.Keyframing},customCTAText:"Get started",topContext:{header:"Never spend hours keyframing again",screenshot:"https://cdn-useast1.kapwing.com/static/4ke-conversions_63fe813bbf62dc54fb8f761b_conversion.webp",description:(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("p",{children:"Go with your creative flow and create smooth motion paths with keyframes in seconds, not hours. Start bringing your ideas to life when you don’t have to learn how to add keyframes and draw a motion path frame-by-frame, only for the animation to be choppy."}),(0,i.jsx)("p",{children:"Keep people watching when you use keyframe animation for intros, outros, scene transitions, object tracking, motion tracking, moving text, and more. These motion paths are automatically drawn out for you as you place keyframes throughout your video, so you don’t have to make sure your motion graph is simple. This is keyframing made simple."})]})},context:{header:"The keyframing tool you don’t need to learn",description:(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("p",{children:"Whether you have experience keyframing or not, this keyframe editor equips you with the right technology to make smooth transitions, scene changes, and animation without having to spend hours learning how to use the softw

1are."}),(0,i.jsx)("p",{children:"Stand out from other creators or marketers and stop people from scrolling on their feeds with your content. Use keyframes for social media ads on Instagram Reels, TikTok, and Facebook to add movement to any video or social ad you make. With keyframes, you have full control over making custom animations where text, images, and videos move around the screen."})]}),moreContext:{content:(0,i.jsxs)("span",{children:[(0,i.jsx)(c.Z,{infoArr:[{header:"Transition seamlessly between scenes",description:"Create captivating scene changes that hold viewers’ attention as you transition between clips or images.",media:{src:"https://cdn-useast1.kapwing.com/static/NLc-zooming_into_TV_modern.mp4",poster:"https://cdn-useast1.kapwing.com/static/aDx-tv_zoom_poster.webp",alt:"Transition seamlessly between scenes"},link:{text:"Use this template →",href:"https://www.kapwing.com/explore/tv-zoom-transition-template"}},{header:"Make topics more memorable",description:"Help your audience pay attention to the details by animating text in title cards, labels, and lower thirds.",media:{src:"https://cdn-useast1.kapwing.com/collections/final_6424e7081d17280011719a51_138646.mp4",alt:"Sample Video",poster:"https://cdn-useast1.kapwing.com/static/BRN-animation_poster2.webp"},link:{text:"Use this template →",href:"https://www.kapwing.com/explore/educational-video-template-academy-awards-example"}},{header:"Level up your videos",description:"Set your content apart from others’ by adding motion to the videos, text, and elements within the video.",media:{src:"https://cdn-useast1.kapwing.com/static/ji0-products_video-(1).mp4",alt:"Sample Video",poster:"https://cdn-useast1.kapwing.com/static/nnp-products_video_poster.webp"},link:{text:"Use this template →",href:"https://www.kapwing.com/explore/scrolling-graphics-animated-template"}}]}),(0,i.jsx)(e=>{let{text:t,href:o}=e;return(0,i.jsx)("div",{className:s().buttonContainer,children:(0,i.jsx)(a.Z,{href:o,className:s().button,children:t})})},{text:"Explore templates",href:"/templates/animation"})]}),aboveTheFold:!0}},resources:[{link:"/resources/how-to-use-motion-tracking-in-videos-online/",image:"https://cdn-useast1.kapwing.com/static/LoY-How-to-Use-Motion-Tracking.webp",title:"How to Elevate Your Videos with Motion Tracking Online"},{link:"/resources/moving-text-add-animated-text-to-video/",image:"https://cdn-useast1.kapwing.com/static/Wp_-moving-text-resource-library.webp",title:"Moving Text: Add Animated Text to Video"},{link:"/resources/how-to-add-photo-transitions-online/",image:"https://cdn-useast1.kapwing.com/static/JwD-how-to-add-photo-transitions-rimage.webp",title:"How to Add Photo Transitions Online — Slideshow Maker"}],steps:{header:"How to add keyframes in Kapwing",screenshot:{src:"https://cdn-useast1.kapwing.com/static/omJ-Screen_Recording_2023-02-28_at_3.21.51_PM.mov.mp4",poster:"https://cdn-useast1.kapwing.com/static/zJ3-keyframing-how-to-poster-image.webp"},step1:{header:"Upload asset",description:"Start a new project or upload the video or image you want to keyframe."},step2:{header:"Click the “◇” icon to use the keyframing tool",description:"Activate keyframing by clicking on the keyframe icon (◇) in the right-hand sidebar, while you have an asset layer selected. Move the asset to different points on your canvas at different timestamps to create a keyframe animation."},step3:{header:"Export and share",description:"Confirm your export settings, then export your project and download a file. Share your project with anyone online by using the unique video link generated for your project."},video:{name:"How to Use Keyframes in Kapwing to Create Custom Animations",description:"Keyframing allows video editors to animate videos, text, images, and more by customizing their position, opacity, size, and more. Keyframing can now be done completely online with Kapwing, adding much more customization to videos than ever more.",youtubeId:"2jDiZfUTy10"}},subfolderLinks:(0,l.E)("/tools/add-effects/tv-static")};function p(){return(0,i.jsx)(d.ZP,{...m})}},63227:function(e,t,o){"use strict";var i,n;o.d(t,{p:function(){return i}}),(n=i||(i={})).AddAudio="add-audio",n.AddImage="add-image",n.AddSoundEffects="add-sound-effects",n.Adjust="adjust",n.AnimatedText="animatedText",n.AddBorder="add-border",n.AiVoiceCloning="aiVoiceCloning",n.Blur="blur",n.BlurVideoBackgroun

1d="blurVideoBackground",n.BRollGenerator="bRollGenerator",n.Censor="censor",n.Collage="collage",n.ColorChanging="color-changing",n.CompressVideo="compressVideo",n.Convert="convert",n.Crop="crop",n.CustomEmoji="custom-emoji",n.Draw="draw",n.Dubbing="dubbing",n.Editor="editor",n.Extract="extract",n.Filter="filter",n.FreezeFrame="freeze-frame",n.GifMaker="gifMaker",n.Glitch="glitch",n.KenBurns="ken-burns",n.Keyframing="keyframing",n.Link="link",n.MemeMaker="memeMaker",n.MusicVideo="musicVideo",n.PersonasCreationFlow="personasCreationFlow",n.PersonasStockLibrary="personasStockLibrary",n.RemoveBackgroundNoiseWithElevenLabs="removeBackgroundNoiseWithElevenLabs",n.RemoveImageBackground="remove-image-background",n.RemoveVideoBackground="remove-video-background",n.SpeakerFocus="speakerFocus",n.Chromakey="chromakey",n.Podcast="podcast",n.ProgressBar="progressBar",n.RecordScreen="record-screen",n.Resize="resize",n.SafeZone="safe-zone",n.Speed="speed",n.SlowMotion="slowMotion",n.Subtitles="subtitles",n.Teleprompter="teleprompter",n.Text="text",n.Timeline="timeline",n.TextToSpeech="text-to-speech",n.Transitions="transitions",n.Translate="translate",n.TranslateSubtitles="translate-subtitles",n.TranslateImage="translate-image",n.TranslateAudio="translate-audio",n.TrimVideo="trim-video",n.TvStatic="tv-static",n.VideoStabilizer="video-stabilizer",n.YoutubeThumbnail="youtubeThumbnail",n.Rotate="rotate",n.AiScriptGenerator="aiScriptGenerator",n.AiVideoGenerator="aiVideoGenerator",n.AiImageGenerator="aiImageGenerator",n.AiDocumentToVideo="aiDocumentToVideo",n.AiArticleToVideo="aiArticleToVideo",n.AiScriptToVideoGenerator="aiScriptToVideoGenerator",n.Transcribe="transcribe",n.TrimWithTranscript="trimWithTranscript",n.VttFile="vttFile",n.SilenceRemover="silence-remover",n.SrtFile="srtFile",n.TrimAudio="trim-audio",n.Reverse="reverse",n.Pinning="pinning",n.Slideshow="slideshow",n.SrtEditor="srtEditor",n.Vhs="vhs",n.Volume="volume",n.Waveform="waveform",n.EnhanceImage="enhanceImage",n.EnhanceVoice="enhanceVoice",n.Generic="Generic",n.SplitVocals="splitVocals",n.SmartCut="smartCut",n.EyeContact="eyeContact",n.SplitVideo="splitVideo",n.SpeakerLabels="speakerLabels",n.KaiSoundEffects="kai-sound-effects",n.KaiFontGenerator="kai-font-generator",n.KaiCharacters="kai-characters"},82299:function(e){e.exports={"animate-gradient":"ActionButton_animate-gradient__YkbeL",gradient:"ActionButton_gradient__TT4J5",fadeIn:"ActionButton_fadeIn__SGlhg","animate-pink-gradient":"ActionButton_animate-pink-gradient__95mgy",pinkGradient:"ActionButton_pinkGradient__duBSH","prevent-highlight":"ActionButton_prevent-highlight__yR0QE","no-select":"ActionButton_no-select__eePQB",noselect:"ActionButton_noselect__L1Xox",buttonContainer:"ActionButton_buttonContainer__0BYAC",button:"ActionButton_button__I_qhD"}},77353:function(e){e.exports={"animate-gradient":"MoreContext_animate-gradient__3Fbej",gradient:"MoreContext_gradient__CqVXa",fadeIn:"MoreContext_fadeIn__WEnje","animate-pink-gradient":"MoreContext_animate-pink-gradient__Bgn7m",pinkGradient:"MoreContext_pinkGradient__goPNo","prevent-highlight":"MoreContext_prevent-highlight__ry2SF","no-select":"MoreContext_no-select__4_6iC",noselect:"MoreContext_noselect__P_6nL",wrapper:"MoreContext_wrapper__4Vmro",container:"MoreContext_container__xPfm7",left:"MoreContext_left__MaC1A",right:"MoreContext_right__mrIQ6",image:"MoreContext_image__Sc4Kz",video:"MoreContext_video__pSLLz",section:"MoreContext_section__zjBO_",selectedSection:"MoreContext_selectedSection__f9Crs",header:"MoreContext_header__eXKwz",description:"MoreContext_description__OrDEa",link:"MoreContext_link__9Mtc6"}},74795:function(e,t,o){"use strict";o.d(t,{Z:function(){return s}});var i=o(73732),n=e=>(0,i.isValidElement)(e)&&!!e.props.children;let a=e=>null==e||"boolean"==typeof e||"{}"===JSON.stringify(e)?"":e.toString(),r=e=>e instanceof Array||(0,i.isValidElement)(e)?i.Children.toArray(e).reduce((e,t)=>{let o="";return o=(0,i.isValidElement)(t)&&n(t)?r(t.props.children):(0,i.isValidElement)(t)&&!n(t)?"":a(t),e.concat(o)},""):a(e);var s=r}},function(e){e.O(0,[5842,8212,451,3442,872,9139,9914,3332,9228,7069,2611,6314,3317,4078,5736,122,9179,4915,7693,9774,2888,179],function(){return e(e.s=70870)}),_N_E=e.O()}]);