🔷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.

Auto Key-framing

Auto keyframing automatically creates keyframes in the animation timeline whenever you modify a property value. This means you don't need to manually insert keyframes at each point you want the animation to change.

You can click on auto key-framing to switch it on and off using the shortcut key combination Shift+K.

Timeline Zoom

The timeline offers multiple ways to zoom in and out, allowing you to see individual frames for detailed adjustments. Zooming Methods: Zoom Slider: Drag the slider within the timeline to control the zoom level. At maximum zoom, every frame becomes visible. Pinch Gesture (Touchpad/Trackpad): Pinch in and out with your fingers to zoom for intuitive control on touch-enabled devices. Mouse Wheel Zoom (with Ctrl/Command): Hold Ctrl (Windows) or Command (Mac) while scrolling your mouse wheel to zoom in or out efficiently. Additional Keyboard Shortcuts: Zoom In: Use the "+" key for a magnified view. Zoom Out: Use the "-" key to see a broader section of the timeline. With these navigation features, you can precisely control the flow and timing of your animation, ensuring professional-looking results.

Timeline Snap

Timeline Snapping provides three functionalities to simplify keyframe placement: Cursor Snap to Fixed Points (Default): This makes the cursor automatically snap to each individual frame in the timeline. No more meticulously clicking on tiny frames! Keyframe to Cursor (SHIFT + Drag Keyframe): Hold down the SHIFT key while dragging a keyframe. When you release the keyframe near the cursor, it will snap to the exact cursor position. This is ideal for quickly placing keyframes at specific points in your animation. Keyframe to Keyframe (Drag Keyframe): Hold down the SHIFT key while dragging a keyframe while dragging an existing keyframe on another keyframe, the existing keyframe will snap to the position of the target keyframe, effectively replacing it. This allows for efficient swapping and rearranging of keyframes.

Note- Now you can drag and move the layers to reposition them.

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.