# Animate a template: make a video with moving elements > Switch your template to MP4 or MOV, animate properties with keyframes on the timeline and test the video in the design generator. Source: https://bluepic.io/help/design-elements-and-tools/video-and-animation Language: en Category: design-elements-and-tools Last updated: 2026-10-22 In the 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 design generator. What moves are your own elements: texts, images and shapes. This takes three steps: 1. Switch the template to video in the properties panel. 2. Animate a property with the timeline. 3. Test the video in the design generator. ## Switch the template to video 1. Click an empty spot on the canvas. Now no element is selected, and the properties panel shows the template's settings. 2. 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. 3. 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. 4. 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. ![Format section with MP4, Duration (s) and FPS.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-video-and-animation-01/public){width="343"} ## Animate a property 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. 1. Click the **Animate a property** tool in the toolbar, to the right of **Create Input Field**. The tool is now active. ![Toolbar with the Animate a property tool highlighted.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-video-and-animation-03/public){width="673"} 2. Click the element that should move, on the canvas or in the layers panel. In the 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. ![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://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-video-and-animation-04/public){width="894"} 3. Click the property you want to animate in the 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`. 4. 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. > **No keyframe appears when you click the timeline?** 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. 5. 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. 6. 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**. ![Timeline at the bottom of the editor with the animated property text2 · x and its keyframes.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-video-and-animation-02/public){width="900"} 7. Drag the vertical time line in the timeline from left to right. Check on the canvas that the element moves the way you want at the start, in the middle and at the end. To move a keyframe, drag it in the timeline. To delete it, select it and 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. > **Tip:** With expressions, you can also animate yourself: with `ANIMATE`, `LINEAR` and `CUBIC` and the value `TIME` for the current time. See [Overview of expression functions](https://bluepic.io/help/expressions-and-logic/functions). ## Test the video in the design generator The design generator is the page where users fill in your template and export it. Here you see the video the way users get it. 1. Click **Share** at the top right, then **Publish Template Link**. Your template can now be reached through a link. 2. Click **Copy URL** and open the link in a new browser tab. The design generator opens. Below the design, you see a play button, the time and a slider. 3. Click the play button. Also check the movement with other values in the input fields, for example with a longer text. 4. 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**. 5. Look at the downloaded video. Check that it is complete and smooth. Every video costs the same number of credits when it is exported, whatever its length: 1 credit in the design generator and in the Batch Editor, 0.1 credits through the API. See [Credits: what exports cost](https://bluepic.io/help/account-management/credits). ## Related articles - [Create a template: set its size and export format](https://bluepic.io/help/template-management/template-setup-and-settings) - [Appearance, effects and transforms](https://bluepic.io/help/design-elements-and-tools/effects-and-transforms) - [Overview of expression functions](https://bluepic.io/help/expressions-and-logic/functions) - [Publish a template link: share your design generator](https://bluepic.io/help/template-management/share-template-link)