Timelines
Timelines allow for the creation of more complex, custom transition animations that can be activated and transitioned to at any time through either user input, or an event within the experience.
An example of a Timeline could be simultaneously rotating and positioning a 3D model in the scene.
For more simple transition animations, you may want to use States.
The Timeline Clip editor
While a timeline is selected, the timeline clip editor is shown along the bottom of Mattercraft’s UI. Custom transition animations are displayed in this view.
Navigating the timeline
You can navigate a timeline with the following common features:
| Navigation | Description |
|---|---|
| (1) Seek bar time | The time at which the seek bar is positioned along the timeline. Update your Settings to alter time scale in milliseconds (ms), seconds (s) or Hertz (hz). |
| (2) Timeline controls | Timeline controls allow you to play or pause playback, jump to the start or end of the timeline, and jump to the previous or next keyframe. |
| (3) Timeline length | The total length of the timeline. Update your Settings to alter time scale in milliseconds (ms), seconds (s) or Hertz (hz). |
| (4) Playhead | Shows where you are focused at a point on a timeline. |
| (5) Zoom level | Sets the zoom level of the timeline. You can traverse through the timeline with the scroll bar to the right of the zoom level. |
Keyframes and eases
To create transition animations on a timeline, you must add keyframes and eases to it.
| Timeline clip features | Description |
|---|---|
| (1) Node properties | The nodes and properties that are being transformed. |
| (2) Keyframe | A keyframe holds node property values at a certain point of an animation. Keyframes can be transitioned to and from other keyframes. |
| (3) Easing | How an animation looks as it is transitioning to the next keyframe. |
Clip settings
The clip settings are a quality of life feature to help you manage your workflow.
The entries in this menu are as follows:
| Clip setting | Description |
|---|---|
| Default easing | Choose a default easing type for the Left side or Right side of the timeline. |
| Clip length | Describes how the timeline decides its length. Auto will automatically make it as big as the last keyframe, Expand will make the timeline longer. Manual will allow you to dictate the end of the timeline. |
| Track size | Changes how the track appears in the timeline. Default is Medium, but you can also make the track Small or Large depending on your preference. |
| Snap | Choose if playhead or keyframes should snap to each other. Options are: Playhead to keyframes, Keyframes to playhead and Keyframes to keyframes. |
Adding a Timeline
The best way to add a new timeline is by creating it inside a Layer, although you can also create independent states if you wish.
The sections below detail how you can create a new timeline to add interactivity and interest to your Mattercraft project.
Adding a new Timeline in a Layer
To add a new timeline in a layer:
You should create a new layer if one doesn’t exist.
- Click on the Animations panel to open it up
- Click on Layers if it is not already selected
- Hover over your Layer until you see the 3 interactive dots
- Go to + Add and then New Timeline
- Type in your new timeline’s name and then use the Timeline Clip editor to begin altering the value of node or behavior properties
Giving your timelines brief but descriptive names will make them easier to manage; particularly when activating them with Behavior Actions or script.
Adding a new Timeline as an independent Clip
To add a new timeline as an independent clip:
- Click on the Animations panel to open it up
- Click on Clips if it is not already selected
- Click on the + (plus) icon and then New Timeline
- Type in your new timeline’s name and then use the Timeline Clip editor to begin altering the value of node or behavior properties
You can add existing timeline clips to a layer at any time.
Adding keyframes and easing
When you have created a timeline, you will want to start adding keyframes to it which hold node property values. The combination of keyframes will allow you to create custom animation transitions.
To add keyframes and easing to a timeline, use the following steps:
- Find your Timeline in the relevant Layers or Clip tab
- When you find your Timeline, click on it and the Timeline Clip editor will open
- Click on a Node in the Hierarchy (or use the + (plus) icon to the right of the fade options to begin editing properties for that node
- Adjust the values of your node properties by using the Node Properties Panel or Behaviors Panel. You can also add multiple timeline clips to one separate timeline to create something new.
Keyframes will be automatically added to the timeline when you adjust a node's property, but you can also create your own keyframes by right clicking on the playhead and selecting Add keyframe at current time.
As well as modifying properties, you can right-click on a keyframe or easing for the following options:
| Track option | Description |
|---|---|
| Delete keyframes | Remove the keyframe from the timeline. |
| Add keyframe at current time | Adds a keyframe where the playhead is situated on the timeline. |
| Copy keyframe(s) | Copy one or more keyframe(s) with their current property set. You can copy keyframes from one timeline and paste them on a different timeline. |
| Paste keyframe(s) | Paste one or more keyframe(s) with their current property set. The keyframe(s) will be placed where the playhead is situated on the timeline. If there is more than one keyframe, the first keyframe will be placed at the playhead and the remaining keyframes will be situated relative to the playhead. |
| Paste keyframe(s) on active track | Paste one or more keyframe(s) with their current property set in the active timeline (this does not necessarily have to be the timeline the keyframe(s) initially exist(s) within). The keyframe(s) will be placed where the playhead is situated on the timeline. If there is more than one keyframe, the first keyframe will be placed at the playhead and the remaining keyframes will be situated relative to the playhead. |
| Paste easing only | Paste the easing between two keyframes but keep the keyframe values the same. |
| Modify keyframe | Update the set property values for a keyframe. |
| Modify easing | Update the easing transition with the curve editor. You may use the default ease options or create your own custom easing with the easing editor to create your own transition curves. |
Playing a Timeline
At some point in your project, you will want to activate certain states based on a specific interaction, such as user input, Raycaster events, or Trigger events.
To learn how to play a timeline in Mattercraft, continue reading our dedicated documentation:
Next article: Playing Timelines