Skip to main content

Timeline

Timeline

The timeline provides a visual interface for organising and controlling how elements appear, move, and interact in an animation. It has three main sections: the Header, which includes tools like the timer, zoom, and playback toggles; the Timeline Elements panel on the left, for managing screens, events, layers, and quick animations; and the Timeline Panel on the right, offering detailed controls for keyframes, spans, easing, and events.

Together, these sections let users sequence, edit, and fine-tune animations efficiently and intuitively, making complex interactions easier to create and manage.


timeline top.png

timeline image.png



Header

The header provides essential controls for managing the timeline. It includes a Timer to display the current playback time and total duration, a Zoom slider for adjusting the timeline view and focusing on specific sections, and Toggle buttons to play, pause, or navigate forward/backward in small increments. Together, these tools allow users to monitor, control, and navigate the animation efficiently.header top .png


header.png


  1. Timer 2. Zoom
header text.png

Displays the current playback time alongside the Adjusts the timeline view, allowing users to focus
total the total duration of the animation, helping users on specific sections or see the animation in


track full progress within the timeline. full for better navigation.




3. Toggle

Allows users to play or pause the animation and jump
100 ms backward or forward, enabling precise
navigation within the timeline.



Elements

Displays the structure of the animation, including screens, events, layers, and quick animations. It helps users organise, manage, and navigate different components of the timeline. Users can perform actions like renaming, configuring, or deleting elements, making it easier to keep the animation well-structured and accessible.elements top.png


elements.png


  1. Screens 2. Events

Lists all design screens, letting users switch between Defines timeline triggers that control playback 
them to view and edit each screen’s timeline. such as play, pause, restart, or jump or activate
actions in other elements.


3. Animations 4. Layers

Shows quick animations applied to elements, Lists all elements on the screen, allowing users to
displayed as sublayers under their respective layers arrange their order and manage visibility with the
for easy management. eye icon.pngor lock them with the lock icon.pngelement text .png



Panelpanel top.png



Displays the timing and duration of elements within the animation. It helps users manage keyframes, spans, animations, easing, and events to fine-tune playback. This section focuses on controlling motion, transitions, and sequencing for smooth, precise animations.

panel .png


panel .pngpanel content.png

  1. Events 2. Keyframes

Marks points in the timeline that trigger actions. Right- Marks the start and end values of properties to
click an event to delete it, configure it, or set a label. create motion or change. Right-click the timeline
to add a keyframe, or right-click a keyframe to
delete it.


3. Easing 4. Animations

Adjusts the acceleration and deceleration between Displays quick animations as sublayers under
keyframes for smoother transitions. Right click on element layers, allowing users to adjust their
the easing option icon to access the easing options. position on the timeline


5. Span

Shows the duration between keyframes, controlling
how long a change takes.

Back to top