Animations Menu

The Template Builder allows you to add animations to text, image or shape layers. This article explains how to set animations, that are available in video and banner templates. 

IN THIS ARTICLE

1. Introduction
2. Easing
3. Fade (in or out)
4. Scale
5. Rotate
6. Slide

Introduction 

When you select a text, image or shape layer on the canvas or timeline, you can add animations to it by navigating to the Animations tab in the menu to the right of your screen.

This will provide you with two options. You can add (1) Intro animations, and/or (2) Outro animations to the selected layer. You can add multiple intro and outro animation to one layer. These will then appear as a list. You can always adjust or delete them by clicking on the animation in the list. 

The Template Builder provides 4 types of animations for you to use:

  1. Fade (in or out) 
  2. Scale
  3. Rotate
  4. Slide

Before deep-diving into the possibilities of these four animation types, it’s wise to explain something about easings, as this is one of the things you always need to set when picking one of the four animations above. 



Easing

Our platform allows you to choose between (1) Linear, (2) Ease out cubic, or (3) Ease in cubic.

Easing refers to the acceleration or deceleration of the animation. When you choose Linear the speed is constant during the duration of your animation. When you choose Ease out, it accelerates in the middle, but then eases out to the ending for a smooth stop. When you choose Ease in, the animation slowly starts to pick up speed to the end. If you would draw these animations as a line, it would look like this: 



Fade (in or out)

You can use a fade-in as an intro animation and a fade-out as an outro animation. When adding a fade animation you need to set a couple of things. You need to determine the:

  • Duration of your fade animation (in seconds) 
  • From/To opacity (in percentages)
    This determines either the starting opacity of your layer when it’s an intro animation (From opacity) or the finishing opacity of your layer when it’s an outro animation (To opacity)
  • Easing of your animation
    By picking from (1) Linear, (2) Ease out cubic, or (3) Ease in cubic ( click here for more information)


Scale

When adding a scale animation you need to set a couple of things. You need to determine the: 

  • Duration of your scale animation (in seconds)
  • From/To scale (in percentages)
    This determines either the starting size of your layer when it’s an intro animation (From scale) or the finishing size of your layer when it’s an outro animation (To scale)
  • Easing of your animation
    By picking from (1) Linear, (2) Ease out cubic, or (3) Ease in cubic (click here for more information


Rotate

When adding a rotate animation you need to set a couple of things. You need to determine the:

  • Duration of your rotate animation (in seconds)
  • From/To rotation (in degrees)
    This determines either the starting degrees of your layer when it’s an intro animation (From rotation) or the finishing degrees of your layer when it’s an outro animation (To rotation)
  • Easing of your animation 
    By picking from (1) Linear, (2) Ease out cubic, or (3) Ease in cubic (click here for more information


Slide

When adding a slide animation you need to set a couple of things. You need to determine the:

  • Duration of your slide animation (in seconds)
  • From/To direction
    By picking from (1) Left, (2) Right, (3) Top, or (4) Bottom 
    This determines either the direction from where a layer slides in when it’s an intro animation (From direction) or the direction to where a layer slides out when it’s an outro animation (To direction)
  • From/To distance (in pixels)
    This determines either the distance from where the layer starts sliding in when it’s an intro animation (From distance) or the distance to where the layer slides out to when it’s an outro animation (To distance)
  • Easing of your animation
    By picking from (1) Linear, (2) Ease out cubic, or (3) Ease in cubic (click here for more information
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us