Animate a template: make a video with moving elements

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.
   

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.
   
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.
   
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.
   
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.

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.