This panel consists in a timeline–style interface that represents both the elements capable of being transitioned or animated, and the transitions themselves, grouped by type.
The transition type refers to the event that triggers the animation of the elements: an Overlay switching IN and OUT, or a pagination of a Dynamic Content List, be it manually or auto-cycling.
Transitions Panel Interface
(1) Transition Type tabs: Select which transition to edit for the currently focused element.
(2) Transition Phase and controls: Switch between editing the different moments of the transition, and trigger previews for the current transition. These controls will change according to the transition type.
(3) Transition Tree: Is very similar to the main Elements Tree. Here you will see every element that can be animated in the scope of the current transition type. We'll cover more about scopes below.
(4) Timeline: It is the visual representation of all the Animations of the elements in the current transition. The length of an animation block represents the animation duration, and the position relative to the time ruler represents the delay.
(5) Animation inspector: Just like in the main Elements Inspector, here you will see every configurable parameter of the selected Animation, which will be highlighted in the Timeline.
(6) Timeline options: Change the zoom level, toggle between different time scales (milliseconds, 30 fps, 60 fps), or enable/disable snapping when dragging Animations.
Transition Scopes
We call scopes to the different subsets of elements of your Scene that can be animated for each Transition Type.
Both Overlay IN/OUT and List Pagination transitions are basically an orchestration of animations of several elements after a specific event (e.g. setting the Overlay IN or going to the next page).
On Overlay IN/OUT transitions, all of the elements that belong to the same Overlay can be animated together. So, when you select an Overlay or any of it descendant elements, you will see all of them listed in the Transition Tree, up to the Overlay itself, but not other Overlays.
Overlay IN/OUT Transition Scope
For List Pagination transitions instead, the elements capable of being orchestrated together after a page change are all the elements that are descendants of the List that fires that pagination event. So, you will only see the List Item and its descendants on the Transition Tree.
List Pagination Transition scope
Transition Phases
Overlay IN/OUT transitions, as well as List pagination transitions, consists of two chained animations each: the moment when things are leaving and the one when things are entering. We call those moments the phases of a transition.
On Overlay transitions we have the OUT to IN and IN to OUT phases.
Overlay IN/OUT transition phases and preview control
During pagination transitions, we have the current elements Leaving the scene and the new ones Entering.
List Pagination transition phases and next/prev page controls
Those controls allow you toggle between these phases of each Transition to set up different Animations for the elements on each of those "moments". The elements displayed in the Transition Tree won't change between phases, but you'll see different Animation blocks in the Timeline.
Tree and Timeline
You'll find each element in the current transition scope represented as a track on the Timeline. The focused element's name will be slightly highlighted as a visual reference.
Those coloured blocks you see on the tracks represent the Animation applied to each element. There can only be one Animation per Element per Transition Phase.
The label on each Animation block is the name of the Animation preset, which are a set of pre-made animations we offer. The blocks length correlates to the animation duration, and their distance from the left border represents the Animation delay (matching the time ruler above).
You can edit all these values by directly moving Animation blocks around and dragging them by their edges to change their size. These parameters will also be displayed and editable over the Animation Inspector, plus other settings such as easing curves.
Heads up, animators
If you come from After Effects or similar tools, you may find this interface very familiar, but it has a slight conceptual difference. In After Effects, each track represents a Composition, the block on each track represents the visibility of that composition over time, and the entering and leaving animations (or effects) are represented as segments at the start and end of each composition block. We instead chose to represent the animation itself as a block, since our model is not about a linear start-to-end animation, but an event-triggered one, and every element on your Overlay will be kept in view after transitioning IN, and will completely disappear after transitioning OUT.
Timeline Options
Below the Timeline Inspector you will find some general view-related controls:
Snap toggle, Time Format menu and Zoom slider
"Snap to ruler" toggle: When turned on, dragging and resizing animations in the timeline will snap to the time ruler marks.
Time format: Choose the scale and format used in the time ruler and timecode.
Keep in mind that this scale is just a visual reference for everyone used to work in "frames per second" tools.
Changing it will not affect the animations frame rate, which will always try to reach 60fps. Since our Graphics are rendered using HTML, this frame rate will always depend on the browser and device where the live Graphics is displayed.
Zoom slider: Work at the microsecond level or view your entire transition at a glance. You can also use ctrl + mouse scroll or trackpad's pinch gesture when hovering the timeline to zoom in and out.