Cavalry
  • Welcome
  • Getting Started
    • Requirements
    • Installation
    • Sign In
      • Proxy Server
    • Quick Start
    • Example Files
    • Key Concepts
      • Nodes
      • Connections
      • Context
  • User Interface
    • Menus
      • File menu
      • Edit menu
      • View menu
      • Composition menu
      • Create menu
      • Animation menu
      • Shape menu
      • Tool menu
        • Select tool
        • Edit Shape tool
        • Pen tool
        • Pencil tool
        • Line tool
        • Text tool
        • Rectangle tool
        • Ellipse tool
        • Polygon tool
        • Star tool
        • Arc tool
        • Super Ellipse tool
        • Cog tool
        • Arrow tool
        • Capsule tool
      • Window menu
        • Align Window
        • Animation Utilities
        • Assets Window
          • Google Sheets Asset
          • Image Sequences
          • Project Settings
        • Attribute Editor
          • Control Rows
            • Controls Rows - Types
            • Control Rows - Interaction
        • Color window
          • Palettes
        • Control Center
        • Quick Add window
        • Flow Graph
        • Glyph Browser
        • Playback Controls
        • Preferences
        • Render Manager
          • Lottie Export
          • Dynamic Rendering
          • Render Tokens
        • Scene Window
          • Scene Tree
            • Composition Settings
          • Time Editor
          • Graph Editor
          • Keyframe Layers
        • Shelf
        • Tags
        • Toolbar
        • Viewport
          • Rulers
      • Help menu
    • Widgets
      • Gradient
      • Graph Attribute
    • General
      • Aliasing
      • Blend Modes
      • Distribution Types
        • Array Distribution
        • Circle Distribution
        • Fibonacci Distribution
        • Grid Distribution
        • Linear Distribution
        • Mask Distribution
        • Math Distribution
        • Path Distribution
        • Point Distribution
        • Random Distribution
        • Rose Distribution
        • Shape Edges Distribution
        • Shape Points Distribution
        • Shuffle Distribution
        • Sub-Mesh Distribution
        • Voxelize Distribution
      • Color Management
      • Motion Blur
      • Vector artwork support
  • Nodes
    • Shapes
      • Common Attributes (Shapes)
      • Background Shape
      • Basic Line
        • Bézier
        • Line
        • Spiral
      • Basic Shape
        • Arc
        • Arrow
        • Capsule
        • Cogwheel
        • Ellipse
        • Polygon
        • Rectangle
        • Ring
        • Star
        • Super Ellipse
      • Cel Animation Shape
      • Composition
      • Connect Shape
      • Convex Hull
      • Custom Shape
      • Duplicator
      • Editable Shape
      • Footage Shape
      • Group
      • Image to Shapes
      • Layout Shape
        • Grid Layout
        • Horizontal Layout
        • Vertical Layout
      • Outline
      • Points to Curve
      • Quad Tree Shape
      • Rectangle Pattern
      • SVG
      • Spacer
      • Sub-Mesh Bounding Box
      • Text Shape
      • Trails
    • Behaviours
      • Common Attributes (Behaviours)
      • 3D Matrix
      • Add Divisions
      • Align
      • Alpha Material Override
      • Apply Distribution
      • Apply Layout
      • Behaviour Mixer
      • Bevel
      • Blend Shape
      • Blend Sub-Mesh Positions
      • Boolean
      • Clean Up
      • Color Blend
      • Color Material Override
      • Curve to Lines
      • Distance
      • Fill Rule
      • Flare
      • Flatten Shape Layers
      • Frame
      • Get Vector
      • HSV Material Overide
      • Is Within
      • Look At
      • Manipulator
      • Material Sampler
      • Modulate
      • Morph
      • Noise
      • Number Range
      • Number Range to Color
      • Oscillator
      • Path Offset
      • Pathfinder
      • Pinch
      • Position Blend
      • Push Along Vector
      • Random
      • Resample Path
      • Round
      • Rubber Hose Limb
      • Simple Value Solver
      • Simple Value2 Solver
      • Skew
      • Sound
      • Split Path
      • Spring
      • Squetch
      • Stagger
      • Sub-Mesh
      • Subdivide
      • Swap Color Override
      • Value
      • Value 2
      • Value Blend
      • Value2 Blend
      • Visibility Sequence
      • Voxelize
    • Utilities
      • Animation Control
      • Apply Font Size
      • Array Manipulator
      • Asset Array
      • Bounding Box
      • Bounding Box Constraint
      • Color Array
      • Color Info
      • Composition Constraint
      • Component Constraint
      • Context Index
      • Falloff
      • Get Name
      • HSV Color
      • If Else
      • Index to Color
      • JS Math
      • Length Context
      • Local Time
      • Math
      • Math2
      • Math 3
      • Measure
      • Mesh Array
      • Null
      • Path Length
      • Regex
      • Rig Control
      • Sequence
      • Shader Array
      • Spreadsheet
      • Spreadsheet Lookup
      • String
      • String Array
      • String Generator
        • Formatted String Generator
        • Hash Generator
        • Hexadecimal Generator
        • Random Date Generator
        • Random Number Generator
        • Timecode Generator
        • Value Generator
      • String Length
      • String Manipulator
        • Change String Case Manipulator
        • Join String Manipulator
        • Replace String Manipulator
        • Regex String Manipulator
        • Resize String Manipulator
        • Shuffle String Manipulator
        • Sub-String Manipulator
        • Transition String Maniplulator
      • Transform Constraint
      • Typeface
      • Typeface Array
      • Value Array
      • Value 2 Array
      • Value 2 Array
      • Velocity Context
      • Velocity Magnitude Context
    • Effects
      • Blur
      • Color Shader
      • Drop Shadow
      • Fill
      • Gradient Shader
      • Image Shader
      • Invert
      • Levels
      • Linear Wipe
      • Mask Blur
      • Noise Shader
      • Radial Wipe
      • SkSL Shader
      • Shape to Shader
      • Tri Tone
      • Venetian Blinds
  • Tips
    • Shortcuts
  • Applications
    • Cavalry Player
    • Cavalry CLI
  • Technical Information
    • Licencing
    • Logs
    • Mathematical Expressions
    • Release Notes
      • 1.1.1 Release Notes
      • 1.1 Release Notes
      • 1.0.3 Release Notes
      • 1.0.2 Release Notes
      • 1.0.1 Release Notes
    • User Preferences
Powered by GitBook
On this page
  • Playback Range
  • Visibility Bars
  • Keyframes
  • Keybars
  • Tools
  • Magic Easing

Was this helpful?

  1. User Interface
  2. Menus
  3. Window menu
  4. Scene Window

Time Editor

Arrange your timeline.

PreviousComposition SettingsNextGraph Editor

Last updated 4 years ago

Was this helpful?

The Time Editor is the place to adjust your clip ranges and animation curves.

Playback Range

Drag the green playhead to scrub through the timeline.

click + drag the green handles to set the start and end frames for the Playback Range. click and drag the bar between the start and end points to move the entire Playback Range.

Visibility Bars

As your cursor hovers over the end of a visibility bar it will highlight. click + drag either end of a Shape's bar to adjust the frames it will appear in the viewport. A will be visible when the playhead is over part of the bar. For , the bar represents when it will be enabled.

The bar has no effect for , or . These Elements will appear as a chevron bar. that draw in the like and are the exception to this rule. They behave in the same way Shapes do.

Setting start/end points

It's possible to adjust the start/end points of multiple Elements at the same time by holding down option/alt as you hover over an end point. Any Elements that share a common in/out point will also highlight and move when you click + drag they will all move. This is also true where one Element's in point is on the same frame as another's out point.

click and drag the bar between the in and out points to move the entire visibility range.

You can also use the contextual menu to set the start/end points based on the Composition or Playback Range or the Current Frame. To access these options simply:

  1. Select a Visibility Bar(s).

  2. Right click.

  3. Choose one of the options under the Set Selected Clip Ranges/ Starts /Ends options.

Show Names

Right click anywhere in the Time Editor and check Show Names to display the name of an Element on its Visibility Bar.

Keyframes

Creating keyframes

  • Move the playhead and scrub the attribute's value.

  • Move the playhead and click the keyframe icon in the attribute control.

  • Select a keyframe or keybar and then right click > Add Keyframe.

Editing keyframes

To edit a keyframe you can either:

  • Move the playhead to the same frame as an existing keyframe and scrub or edit the attribute's value.

  • Double click a keyframe and scrub or edit the attribute's value via the pop up control.

Moving keyframes

To move a keyframe simply click and drag.

To move a selection of keyframes either cmd/ctrl + click or marquee select some keyframes and drag to move. You can also select and move keyframes from multiple attributes and/or Elements.

Deleting keyframes

To remove a keyframe or keyframes either:

  • Select a keyframe or keyframes and hit the Delete key on your keyboard.

  • Select a keyframe or keyframes and right click > Delete Keyframe(s).

Copying keyframes

To copy a keyframe, select one and choose Edit > Copy Keyframe (cmd/ctrl + C) then move the playhead and chose Edit > Paste (cmd/ctrl + V). You can do the same with multiple keyframes on the same attribute. It's also possible to copy keyframe data from one channel to another.

You can also copy keyframe data from one Element to another. If the keyframe data you are copying is from an attribute that already exists on the Element you are pasting to, then those keys will be added to that attribute. If the attribute does not exist, it will be added along with the keyframe data.

Coloring keyframes

To change the color of a keyframe select a keyframe or keyframes and right click > Set Color > choose your color. This can be useful for highlighting key moments in your animation.

Copying easing

Copying the easing of keyframes to other keyframes can be achieved via the right click menu.

  • Select a keyframe or keyframes on the same attribute.

  • Right click and choose > Copy Easing.

  • Select some different keyframes.

  • Paste (cmd/ctrl + v)

Where your selections do not match – for example, copying 3 keyframes and pasting them onto 2 keyframes – Cavalry will copy keyframe 1 to keyframe 1, keyframe 2 to keyframe 2 and ignore keyframe 3.

Keybars

Keybars are lines that connect keyframe pairs and can be used to move entire animation curves without the need to select a range of keyframes.

A keybar appears as a solid line when between two keyframes of different values. If a keybar connects two keys of the same value it will appear as dashed line. This is designed to help identify areas where Elements remain static or unchanged.

Moving keybars

To move an entire keybar simply click and drag one. By holding alt as you click and drag you can move individual sections of the keybar. This will only move the two keys connected by that section.

When marquee selecting in the Time Editor the following selection logic applies.

  • If a keyframe exists within a selection, only select keyframes.

  • If no keyframes exist within a selection, select the keybars.

Tools

  • Left - align keys to the key nearest to the beginning (left) of your timeline.

  • Center - centrally align keys.

  • Right - align keys to the key nearest to the end (right) of your timeline.

Transform tool - this tool can be used to move and scale selections of keys. Click + drag between the blue bars to move or click + drag either blue bar to scale. By alt + dragging a blue bar you can also perform a 'ripple edit'. This will push unselected keys along the timeline as you scale the selected keys.

Zoom - drag the slider to zoom in/out of the window.

You can also alt + scroll with a mouse/trackpad or alt + double click + drag with a tablet to zoom the Time Editor.

Magic Easing

Apply mathematical interpolation between keyframes.

  1. Select one or more keyframes.

  2. Right click > Magic Easing.

  3. Choose an option.

Once you have set a via the you are able to set further keyframes in the Time Editor. To do so, either:

Align - align selected keys to each other. This works in the same way does. Imagine a rectangle bordering each 'group' of selected keys on each attribute and then aligning those rectangles to each other.

You can bake the animation using the command in the menu.

Note - we are following the forthcoming Web Animation standard for easing which may be less familiar to After Effects users. This is not an official page but see for some nice examples. The W3C Candidate Recommendations can be seen .

aligning shapes
Bake Keyframe Animation
Animation
here
here
Shape
Behaviours
Atoms
Filters
Shaders
Atoms
Viewport
Falloffs
Nulls
Attribute Editor
keyframe
Editing visibility bars.
Editing a keyframe's value inline.
Select and move keyframes.
Moving whole and/or part keybars.
Aligning key selection to the left.