Animate design layers with keyframes

When you customize graphics in the Designer, you can create keyframes to animate various properties of a graphic, including a design layer's position, rotation, scale, opacity, effects, and transitions, as well as the lighting for the entire scene.

1. In Titler Live's playout interface, select a graphic layer from the Layers workspace, then click the Edit Graphic button in the Preview panel.
2. In the Designer's canvas or Timeline workspace.
3. Select a design layer or group of design layers that you want to animate with keyframes.
   

   Tip: You may want to keyframe a group of objects if, for example, you need to animate multiple objects while maintaining their position relative to each other.

4. Navigate to one of the following tabs in the Properties panel for the type of property that you want to animate with keyframes.
   • Properties > Layer > Motion & Data
   • Properties > Layer > Effects
   • Properties > Layer > Transitions
   • Properties > Global > Light & Cam
5. Mark the Turn on keyframing checkbox in the section for the property that you want to animate. For example, the following image shows the Turn on keyframing checkbox at the bottom of the Motion & Data's Transform settings.
   
   

   

   When you mark the Turn on keyframing checkbox, Titler Live automatically adds the first keyframe to the beginning of the design layer within the timeline, as shown in the following image.

   

   Each time you add a keyframe, all of the properties for the keyframed property are recorded in that keyframe.

6. If you want the first keyframed animation to start later, click the first keyframe in the timeline (shown in the previous image) and drag it to a new moment in time. 
7. Complete the following steps to add more keyframes.
   1. Click the playhead (red scrubbing cursor) in the timeline and drag it to the moment when you want to the next keyframe to appear.
      Tip: If you want the last keyframe to look the same as the first keyframe, which you just added, add the last keyframe now before you change an attribute's properties. To do so, move the playhead to the moment when the last keyframe should appear and click the Add keyframe  button. Then, move the playhead to an earlier moment when the second keyframe should appear and continue with the following steps to add more keyframes. 
      1. Change one or more properties to reflect how you want the animation to change between the previous keyframe and the current position in the timeline. Titler Live automatically adds a keyframe when you change a property if an existing keyframe isn't already selected.
      2. To add another keyframe, repeat the previous steps.
         
         

         Tips

         • To edit the settings for an existing keyframe, select a keyframe in the list and adjust the settings.
           
           

           

         • To delete a keyframe, select a keyframe in the list and click Remove keyframe  button.
         • If you clear the Turn on keyframing checkbox, all keyframes for an object are deleted.
8. If you want the keyframed design layer to animate as smoothly as possible at each keyframe, mark the Smooth Interpolation checkbox.
   
   

   Notes

   • Some keyframed animations may appear slower than animations between keyframes when the Smooth Interpolation option is on, depending on the design's properties. As always, we recommend you preview your design and ensure it appears as it should.
   • The graphic will take longer to render when the Smooth Interpolation option is on.
   • Keyframes can only be mapped to specific frames along the Timeline
9. Preview the keyframed animation to ensure your graphic animates as intended.
10. After you finish editing the design, click the Keep  button in the bottom-right corner of the Timeline panel to save and update the graphic of your project's current session.