Timeline Integration

Demo

TimelineIntegration

To demonstrate integration with Timeline, we will create a Compositor Graph asset that will pan an image horizontally using a Transform node.
The steps are as follows:

  1. Make sure that there are a Render node, a Transform node, and a Layer node in the graph.

  2. Set the size of the Render node to 3840x1080.
    Then, right click the Transform node, and choose "Expose as Component".
    This allows Timeline to use this node.

    TimelineExpose

  3. When a compositor node is exposed, the UI of the node changes.
    First, two new fields and a greyed out record button are added at the top.

    1. Name: the name of the internal object.
    2. Object: the internal object for dragging and dropping into a timeline track.

    Second, the background colors of some fields are changed to indicate that they are driven by Timeline.

    TimelineTransformNode

  4. Create a new timeline track. In this case, we choose the Transform Node Track.

    TimelineTransformTrack

  5. Drag the internal object from the Transform node (see step 3) into the slot on the timeline track.

    TimelineSlot

  6. Right click in the timeline track and choose "Add Transform Node Playable Asset".

    TimelineAddPlayableAsset

  7. Click the curves button in the timeline track to open the curves view.
    Notice that the curves have been initialized with the values of the TransformNode bound to the track.

    TimelineCurve

  8. Move the Timeline playhead to a position between the start and end of the TransformNodePlayableAsset, and notice that the previously greyed out record button turns to red.

  9. Click the record button, and modify the X offset value to 512.
    Notice that a new key is automatically added in the curve.

    To frame all animation curves or keys of a Playable Asset, press A after selecting it.

  10. Move the Timeline playhead to another position and create more keys if necessary.
    Then, click the record button again to stop recording.

  11. Enter Play mode or scrub the Timeline to see the image pan horizontally.

Timeline Nodes

Nodes that support Timeline integration are as follows:

  1. Blend
  2. Drawn Edges
  3. Layer
  4. Level Adjustment
  5. Linear Gradient
  6. Multipass Gaussian Blur
  7. Spherical Gradient
  8. Transform

Playable Asset Inspector

The Reset Curve button shown in the inspector of the Playable Assets of VisualCompositor is used to reset the curve data to the default values.
Please note that this operation is not undoable.