[{"data":1,"prerenderedAt":413},["ShallowReactive",2],{"help-article-\u002Fhelp\u002Fdesign-elements-and-tools\u002Fvideo-and-animation":3},{"id":4,"title":5,"body":6,"category":389,"description":390,"extension":391,"keywords":392,"meta":403,"navigation":404,"order":405,"path":406,"published":407,"rawbody":408,"seo":409,"stem":410,"updated":411,"__hash__":412},"help\u002Fhelp\u002Fdesign-elements-and-tools\u002Fvideo-and-animation.md","Animate a template: make a video with moving elements",{"type":7,"value":8,"toc":382},"minimark",[9,22,25,44,49,121,125,128,255,261,286,290,296,344,354],[10,11,12,13,17,18,21],"p",{},"In the ",[14,15,16],"place",{},"template editor",", you animate properties of your elements, for example position, size or opacity. This turns the template into a short video of up to 15 seconds that users export as MP4 or MOV in the ",[14,19,20],{},"design generator",". What moves are your own elements: texts, images and shapes.",[10,23,24],{},"This takes three steps:",[26,27,28,36,39],"ol",{},[29,30,31,32,35],"li",{},"Switch the template to video in the ",[14,33,34],{},"properties panel",".",[29,37,38],{},"Animate a property with the timeline.",[29,40,41,42,35],{},"Test the video in the ",[14,43,20],{},[45,46,48],"h2",{"id":47},"switch-the-template-to-video","Switch the template to video",[26,50,51,65,95,105],{},[29,52,53,57,58,61,62,64],{},[54,55,56],"click",{},"Click"," an empty spot on the ",[14,59,60],{},"canvas",". Now no element is selected, and the ",[14,63,34],{}," shows the template's settings.",[29,66,67,70,71,75,76,79,80,83,84,87,88,91,92,94],{},[54,68,69],{},"Choose"," ",[72,73,74],"strong",{},"MP4"," or ",[72,77,78],{},"MOV"," under ",[72,81,82],{},"Format",". The template is now a video. ",[72,85,86],{},"Duration (s)"," and ",[72,89,90],{},"FPS"," appear under ",[72,93,82],{},", and the timeline appears at the bottom of the editor.",[29,96,97,101,102,104],{},[98,99,100],"type",{},"Type"," the length of the video in seconds under ",[72,103,86],{},". More than 15 seconds is not possible: a larger value is cut down to 15.",[29,106,107,79,109,111,112,115],{},[54,108,69],{},[72,110,90],{}," how many frames per second the video has: 12, 24, 25, 30, 50 or 60. More frames per second make movements smoother.",[113,114],"br",{},[116,117],"img",{"alt":118,"src":119,"width":120},"Format section with MP4, Duration (s) and FPS.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-video-and-animation-01\u002Fpublic",343,[45,122,124],{"id":123},"animate-a-property","Animate a property",[10,126,127],{},"A keyframe sets which value a property has at a certain point in time. Between two keyframes, the value changes step by step. That is what makes things move.",[26,129,130,153,186,198,210,223,245],{},[29,131,132,134,135,137,138,141,142,145,146,148],{},[54,133,56],{}," the ",[72,136,124],{}," tool in the ",[14,139,140],{},"toolbar",", to the right of ",[72,143,144],{},"Create Input Field",". The tool is now active.",[113,147],{},[116,149],{"alt":150,"src":151,"width":152},"Toolbar with the Animate a property tool highlighted.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-video-and-animation-03\u002Fpublic",673,[29,154,155,157,158,160,161,164,165,167,168,171,172,75,175,178,179,181],{},[54,156,56],{}," the element that should move, on the ",[14,159,60],{}," or in the ",[14,162,163],{},"layers panel",". In the ",[14,166,34],{},", you can animate every property with a number, for example ",[72,169,170],{},"X",", ",[72,173,174],{},"Y",[72,176,177],{},"Opacity",". When you hover over one, it gets a dashed outline.",[113,180],{},[116,182],{"alt":183,"src":184,"width":185},"Position & Size of a selected text while the Animate a property tool is active: the X field shows the dashed outline of an animatable property and is highlighted.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-video-and-animation-04\u002Fpublic",894,[29,187,188,190,191,193,194,35],{},[54,189,56],{}," the property you want to animate in the ",[14,192,34],{},". The property is now animated and has a first keyframe at 0 seconds with its current value. The timeline shows it, for example as ",[195,196,197],"code",{},"text2 · x",[29,199,200,202,203],{},[54,201,56],{}," the timeline to the right of the last keyframe, at the spot where the next keyframe should be. A new keyframe appears there and is selected.",[204,205,207],"trouble",{"symptom":206},"No keyframe appears when you click the timeline?",[10,208,209],{},"A new keyframe is only added to the right of the last keyframe. A click further left only clears the selection. To add a keyframe between two others, click the line between them.",[29,211,212,214,215,218,219,222],{},[98,213,100],{}," the point in time in seconds under ",[72,216,217],{},"Time"," and the property's value under ",[72,220,221],{},"Value",", at the top of the timeline. The element now has exactly this value at this point in time.",[29,224,225,227,228,231,232,235,236,35,238,240],{},[54,226,69],{}," at the top right of the timeline how the value changes up to this keyframe: ",[72,229,230],{},"Linear"," for an even change, ",[72,233,234],{},"Bezier"," for a curved change. The first keyframe only offers ",[72,237,230],{},[113,239],{},[116,241],{"alt":242,"src":243,"width":244},"Timeline at the bottom of the editor with the animated property text2 · x and its keyframes.","https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-video-and-animation-02\u002Fpublic",900,[29,246,247,251,252,254],{},[248,249,250],"drag",{},"Drag"," the vertical time line in the timeline from left to right. Check on the ",[14,253,60],{}," that the element moves the way you want at the start, in the middle and at the end.",[10,256,257,258,260],{},"To move a keyframe, drag it in the timeline. To delete it, select it and ",[54,259,54],{}," the trash icon at the top right. For each further property, start again at step 1. The dropdown menu at the top left chooses which animated property the timeline shows.",[262,263,264],"tip",{},[10,265,266,267,171,270,87,273,276,277,280,281,35],{},"With expressions, you can also animate yourself: with ",[195,268,269],{},"ANIMATE",[195,271,272],{},"LINEAR",[195,274,275],{},"CUBIC"," and the value ",[195,278,279],{},"TIME"," for the current time. See ",[282,283,285],"a",{"href":284},"\u002Fhelp\u002Fexpressions-and-logic\u002Ffunctions","Overview of expression functions",[45,287,289],{"id":288},"test-the-video-in-the-design-generator","Test the video in the design generator",[10,291,292,293,295],{},"The ",[14,294,20],{}," is the page where users fill in your template and export it. Here you see the video the way users get it.",[26,297,298,310,321,326,337],{},[29,299,300,70,302,305,306,309],{},[54,301,56],{},[72,303,304],{},"Share"," at the top right, then ",[72,307,308],{},"Publish Template Link",". Your template can now be reached through a link.",[29,311,312,70,314,317,318,320],{},[54,313,56],{},[72,315,316],{},"Copy URL"," and open the link in a new browser tab. The ",[14,319,20],{}," opens. Below the design, you see a play button, the time and a slider.",[29,322,323,325],{},[54,324,56],{}," the play button. Also check the movement with other values in the input fields, for example with a longer text.",[29,327,328,70,330,333,334,35],{},[54,329,56],{},[72,331,332],{},"Export"," at the top right. Bluepic creates the video, and the button shows its progress. The export costs 1 credit, like every video export from the design generator. Then the download starts, or a popup opens where you choose ",[72,335,336],{},"Download",[29,338,339,343],{},[340,341,342],"look",{},"Look"," at the downloaded video. Check that it is complete and smooth.",[10,345,346,347,349,350,35],{},"Every video costs the same number of credits when it is exported, whatever its length: 1 credit in the ",[14,348,20],{}," and in the Batch Editor, 0.1 credits through the API. See ",[282,351,353],{"href":352},"\u002Fhelp\u002Faccount-management\u002Fcredits","Credits: what exports cost",[355,356,357],"related",{},[358,359,360,366,372,376],"ul",{},[29,361,362],{},[282,363,365],{"href":364},"\u002Fhelp\u002Ftemplate-management\u002Ftemplate-setup-and-settings","Create a template: set its size and export format",[29,367,368],{},[282,369,371],{"href":370},"\u002Fhelp\u002Fdesign-elements-and-tools\u002Feffects-and-transforms","Appearance, effects and transforms",[29,373,374],{},[282,375,285],{"href":284},[29,377,378],{},[282,379,381],{"href":380},"\u002Fhelp\u002Ftemplate-management\u002Fshare-template-link","Publish a template link: share your design generator",{"title":383,"searchDepth":384,"depth":384,"links":385},"",2,[386,387,388],{"id":47,"depth":384,"text":48},{"id":123,"depth":384,"text":124},{"id":288,"depth":384,"text":289},"design-elements-and-tools","Switch your template to MP4 or MOV, animate properties with keyframes on the timeline and test the video in the design generator.","md",[393,394,74,78,395,396,397,398,399,400,401,402,124,86,90,230,234,217,221],"video","animation","timeline","keyframes","15 seconds","Animation","Keyframes","Video","Timeline","animate",{},true,150,"\u002Fhelp\u002Fdesign-elements-and-tools\u002Fvideo-and-animation","2026-09-17","---\ntitle: \"Animate a template: make a video with moving elements\"\ndescription: \"Switch your template to MP4 or MOV, animate properties with keyframes on the timeline and test the video in the design generator.\"\ncategory: design-elements-and-tools\norder: 150\nkeywords: [\"video\", \"animation\", \"MP4\", \"MOV\", \"timeline\", \"keyframes\", \"15 seconds\", \"Animation\", \"Keyframes\", \"Video\", \"Timeline\", \"animate\", \"Animate a property\", \"Duration (s)\", \"FPS\", \"Linear\", \"Bezier\", \"Time\", \"Value\"]\n---\nIn the :place[template editor], you animate properties of your elements, for example position, size or opacity. This turns the template into a short video of up to 15 seconds that users export as MP4 or MOV in the :place[design generator]. What moves are your own elements: texts, images and shapes.\n\nThis takes three steps:\n\n1. Switch the template to video in the :place[properties panel].\n2. Animate a property with the timeline.\n3. Test the video in the :place[design generator].\n\n\n## Switch the template to video\n\n1. :click[Click] an empty spot on the :place[canvas]. Now no element is selected, and the :place[properties panel] shows the template's settings.\n2. :click[Choose] **MP4** or **MOV** under **Format**. The template is now a video. **Duration (s)** and **FPS** appear under **Format**, and the timeline appears at the bottom of the editor.\n\n3. :type[Type] the length of the video in seconds under **Duration (s)**. More than 15 seconds is not possible: a larger value is cut down to 15.\n4. :click[Choose] under **FPS** how many frames per second the video has: 12, 24, 25, 30, 50 or 60. More frames per second make movements smoother.\n\n   ![Format section with MP4, Duration (s) and FPS.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-video-and-animation-01\u002Fpublic){width=\"343\"}\n\n## Animate a property\n\nA keyframe sets which value a property has at a certain point in time. Between two keyframes, the value changes step by step. That is what makes things move.\n\n1. :click[Click] the **Animate a property** tool in the :place[toolbar], to the right of **Create Input Field**. The tool is now active.\n\n   ![Toolbar with the Animate a property tool highlighted.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-video-and-animation-03\u002Fpublic){width=\"673\"}\n\n2. :click[Click] the element that should move, on the :place[canvas] or in the :place[layers panel]. In the :place[properties panel], you can animate every property with a number, for example **X**, **Y** or **Opacity**. When you hover over one, it gets a dashed outline.\n\n   ![Position & Size of a selected text while the Animate a property tool is active: the X field shows the dashed outline of an animatable property and is highlighted.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-video-and-animation-04\u002Fpublic){width=\"894\"}\n\n3. :click[Click] the property you want to animate in the :place[properties panel]. The property is now animated and has a first keyframe at 0 seconds with its current value. The timeline shows it, for example as `text2 · x`.\n4. :click[Click] the timeline to the right of the last keyframe, at the spot where the next keyframe should be. A new keyframe appears there and is selected.\n\n   ::trouble{symptom=\"No keyframe appears when you click the timeline?\"}\n   A new keyframe is only added to the right of the last keyframe. A click further left only clears the selection. To add a keyframe between two others, click the line between them.\n   ::\n\n5. :type[Type] the point in time in seconds under **Time** and the property's value under **Value**, at the top of the timeline. The element now has exactly this value at this point in time.\n6. :click[Choose] at the top right of the timeline how the value changes up to this keyframe: **Linear** for an even change, **Bezier** for a curved change. The first keyframe only offers **Linear**.\n\n   ![Timeline at the bottom of the editor with the animated property text2 · x and its keyframes.](https:\u002F\u002Fimagedelivery.net\u002FmudX-CmAqIANL8bxoNCToA\u002Fhelp\u002FKB-video-and-animation-02\u002Fpublic){width=\"900\"}\n\n7. :drag[Drag] the vertical time line in the timeline from left to right. Check on the :place[canvas] that the element moves the way you want at the start, in the middle and at the end.\n\nTo move a keyframe, drag it in the timeline. To delete it, select it and :click[click] the trash icon at the top right. For each further property, start again at step 1. The dropdown menu at the top left chooses which animated property the timeline shows.\n\n::tip\nWith expressions, you can also animate yourself: with `ANIMATE`, `LINEAR` and `CUBIC` and the value `TIME` for the current time. See [Overview of expression functions](\u002Fhelp\u002Fexpressions-and-logic\u002Ffunctions).\n::\n\n## Test the video in the design generator\n\nThe :place[design generator] is the page where users fill in your template and export it. Here you see the video the way users get it.\n\n1. :click[Click] **Share** at the top right, then **Publish Template Link**. Your template can now be reached through a link.\n2. :click[Click] **Copy URL** and open the link in a new browser tab. The :place[design generator] opens. Below the design, you see a play button, the time and a slider.\n\n   \u003C!-- SCREENSHOT NEEDED: KB-video-and-animation-05. Design generator with an animated MP4 template: the player bar below the design with play button, time readout (current \u002F total) and slider; highlight the player bar. See docs\u002Fknowledge-base-screenshots.md. -->\n\n3. :click[Click] the play button. Also check the movement with other values in the input fields, for example with a longer text.\n4. :click[Click] **Export** at the top right. Bluepic creates the video, and the button shows its progress. The export costs 1 credit, like every video export from the design generator. Then the download starts, or a popup opens where you choose **Download**.\n5. :look[Look] at the downloaded video. Check that it is complete and smooth.\n\nEvery video costs the same number of credits when it is exported, whatever its length: 1 credit in the :place[design generator] and in the Batch Editor, 0.1 credits through the API. See [Credits: what exports cost](\u002Fhelp\u002Faccount-management\u002Fcredits).\n\n::related\n- [Create a template: set its size and export format](\u002Fhelp\u002Ftemplate-management\u002Ftemplate-setup-and-settings)\n- [Appearance, effects and transforms](\u002Fhelp\u002Fdesign-elements-and-tools\u002Feffects-and-transforms)\n- [Overview of expression functions](\u002Fhelp\u002Fexpressions-and-logic\u002Ffunctions)\n- [Publish a template link: share your design generator](\u002Fhelp\u002Ftemplate-management\u002Fshare-template-link)\n::\n",{"title":5,"description":390},"help\u002Fdesign-elements-and-tools\u002Fvideo-and-animation","2026-10-22","sZ-26AW6rDsYtmKmj78Ydf2-XJrBpyaXGZ_GZF8VPdc",1792680561594]