🔷Animation Timeline

How does the ‘Animation Timeline’ help the users improve the project?

The Animation Timeline Panel in the Creator empowers users to bring their 3D scenes and objects to life by animating various properties. Through the use of keyframes in a user-friendly interface, you can effortlessly create captivating animations that enhance the overall user experience. Before exporting a video render, you need to use this option which provides a comprehensive animation solution.

The Animation Timeline Panel is a horizontally-arranged control interface located at the bottom of the screen in Video and 3D Webpage Projects.

This timeline is divided into properties and frames, with each keyframe representing a specific property value at a particular frame number. You can control the properties by adding, adjusting, and removing keyframes, allowing them to create smooth animations for their 3D scenes and objects. The animation can be created for the object, image, text, audio and camera.

How to adjust ‘Work Area’?

The work area will be highlighted in the animation timeline with 2 sliders at both the ends. You can move any of the sliders to a particular keyframe to adjust the work area as per your preference.

Also, you can click in between the work area and move the entire space to the left or right.

How to create the Keyframes to add animation in a project?

You can animate the position, rotation, scale, and opacity of objects, as well as text elements. To create keyframes for a specific property:

• Move the keyframe slider to the desired frame, e.g., frame 100 (it will be located at frame 0 by default)

• Click on the diamond-stroked icon corresponding to the property (e.g, position, rotation, scale, or opacity). This sets the initial keyframe for the property, which is represented as a black diamond marker on the timeline

• After creating the keyframe, click on the black diamond icon for the relevant property. A small panel with text fields for x, y and z coordinates appears, you can enter the desired value for the property

• After completing the initial keyframe, you can move the keyframe slider to another frame (e.g., frame 200), and then repeat the same process for that frame and subsequent frames. This allows you to set different property values for each keyframe and create a smooth animation that transitions between the defined keyframes. By adjusting the properties at different frames, you can control how the 3D scene and objects change over time, resulting in dynamic and engaging animations

• This action sets up another keyframe at the specified frame, also represented as a black diamond marker on the timeline\

• Also, you can move the keyframe slider and work area automatically by putting the keyframe value in the boxes at the right side

• Current : Moves the keyframe slider to the input frame.

• Start : Starts the Work Area from the particular keyframe

• End : Ends the work area to the particular keyframe

Deleting Keyframes

• Click on the key marker (black diamond) representing the keyframe on the timeline.

• Click on the "bin" icon from the small panel to delete the selected keyframe.

To remove a keyframe, you can follow these steps:

Selecting and Moving Keyframes

There are two ways to select multiple keyframes in the animation timeline:

Using Keyboard Shortcut: Hold Ctrl (on Windows) or Cmd (on Mac) while clicking on individual keyframes. You can select any number of keyframes this way.

Using Mouse Selection: Click and hold your mouse button while dragging across the timeline to create a selection box. Any keyframes within the box will be selected.

Once you've selected multiple keyframes, you can easily move them together to adjust your animation. This is helpful for creating smooth transitions between poses or movements.

Copying and Pasting Keyframes

Copy the Keyframes:

Select the keyframes you want to reuse. You can click individual keyframes or drag a box around them.

Right-click on the selected keyframes.

Alternatively, use the keyboard shortcut:

Windows/Linux: Press Ctrl + C

Mac: Press Command + C

Paste the Keyframes:

Move the timeline cursor (the playhead) to the spot where you want the animation to start.

Select the element you want to animate (if it's different from where you copied the keyframes).

Right-click on the element where you want to paste.

Alternatively, use the keyboard shortcut:

Windows/Linux: Press Ctrl + V

Mac: Press Command + V

Note: If you’re pasting keyframes from one element to another, select the new element where you want to paste the keyframes. If you’re copying keyframes from multiple elements it can be pasted in the same elements.

Break Point for 3D Webpage

This feature is available for the 3D Webpage Projects and it empowers you to create engaging, interactive web animations by defining multiple scroll breakpoints within your animation timeline. These breakpoints control the scrolling behavior of your webpage, resulting in a seamless blend of smooth scrolling and precise snapping effects.