Animation is a powerful tool that can help you grab the attention of your audience and keep them engaged with your content. Whether you are creating an ad, a promotional video, or a marketing campaign, animation can help you communicate your brand's message in an entertaining and memorable way. With animation, you can bring your brand to life, showcase your products and services in a unique way, and tell a story that will resonate with your target audience.
Creatopy's Animator allows you to apply animation templates, presets, or customized animations to your layers within the creative.
You can apply three types of animations to each layer from your design.
- Build In
- Middle
- Build Out
Animation Templates
- Open your Design/Design Set.
- Click the
Animator icon.
- Select one of the animation templates.
- On the Animator preview stage, you can:
- Cycle through other animation templates.
- Set the delay and duration of the animation.
- Once done, click Apply and use¹.
Animation Presets
- Open your Design/Design Set.
- Open the
Timeline.
- Identify the layer where you want to apply the animation.
- Select where you want to apply the animation:
Build In
Middle
Build Out
- Select the type of prebuilt animation you'd like to use².
- You can increase or decrease the duration by dragging the slides according to your needs.
- You can drag & hold to move the whole layer on the duration axis.
Custom Animations
You can use the Build Yours³ preset to create custom animations from scratch using five actions (Move, Rotate, Scale, Opacity & Blur).
How to Apply a Custom Animation
- Open your Design.
- Open the
Timeline.
- Identify the layer where you want to apply the animation.
- Select where you want to apply the animation (
Build-in,
Middle, or
Build-out).
- Click
Build Yours.
- Select the type of action you want to use⁴:
- Move
- Rotate
- Scale
- Opacity
- Blur
- Every action will have its row, and if you add more of the same action (e.g., Move), they will be placed to the right of the last action added.
- You can click & drag on an animation to increase or decrease its duration of it.
- Changing the duration of the whole Build Yours preset will also change the duration of all actions associated with it. The duration of the preset can be changed at increments of 0.1 seconds.
- Adjusting the duration of an individual action will not alter the duration of other actions associated with the Build Yours preset. The duration of an action can be adjusted at increments of 0.01 seconds.
- You can click and drag on the animation to change its position in the timeline.
- Adjusting the position of the whole Build Yours preset will also move all the actions linked with it.
- Moving an action can alter the positioning of other actions, depending on where they're located.
Build Yours Preset Technical Specifications
Every action added will have its card from where you can change the values and set the ease types. Below, you'll be able to find a table with the technical specifications for every action.
Action |
Description |
Min / Max values |
Move |
Set the movement path of the layer. | -10.000 / 10.000px |
Rotate |
Adjust the angle of the rotation⁵. | -9.999 / 9.999° |
Scale |
Change the scale percentage. | 0 / 10.000% |
Opacity |
Edit the transparency of a layer. | 0 / 100% |
Blur |
Customize the obscurity of a layer. | 0 / 100px |
Note¹: Any animation template you choose will be applied only to the Build In animation for every layer.
Note²: You can break animation presets into actions by selecting the preset > Go to Custom Settings > Click on Split to actions. You can use the Split option for every available preset, with the only exception being the 3D presets (Slit, Step, Fly, Tilt, Swing, Flip, and Reveal).
Note³: This feature is available for the Plus subscription plan. To learn more about the available subscription plans, visit this page.
Note⁴: You can add up to 20 of the same action to a layer. For example, if you create an animation with the Build Yours preset for the middle animation, you can have 20 individual move actions, which you can move, adjust and play with as you wish.
Note⁵: A negative value will rotate the layer counterclockwise, and a positive value will rotate clockwise.