Set keyframes on the timeline
Each element and property gets its own track: position, rotation, skew, opacity, fill and stroke color, stroke width and dash offset, font size, weight, letter and word spacing, visibility, blend mode, and path data for morphing. Drag keyframes to retime them, pick one of thirty easings or draw a custom cubic-bezier, and scrub the playhead to watch the result on the canvas.
Play, pause and scrub, step from keyframe to keyframe, or toggle interactive preview (Ctrl+Enter) to exercise event-triggered tracks the way a viewer will. Timing that feels abrupt, loops that snap back and morphs whose path topology does not line up all show up here, before the file leaves the editor.
What the export writes
Export writes the native SVG animation elements: animate, animateTransform, animateMotion with an mpath reference when the motion follows another shape, set for discrete states, and discard. Your easing is lowered into what SMIL can express: Bezier easings become keySplines, an overshooting curve is sampled into keyTimes, and steps becomes calcMode="discrete". The cards above are that output, running.
SMIL is the native animation language of SVG. The file runs on its own in a browser, inside an img tag and as an inline fragment, with no stylesheet and no script, and it stays in the DOM where it can be inspected and styled.
Edit the curves of a motion path
The curve an element travels along is not a special object with a reduced set of controls. Select the motion path and you are editing a path: the same anchors, Bezier handles, segment drags and Path Editor panel as any other. Use "Pick shape" to bind the track to a shape the document already contains, and the animation follows that shape as you edit it; "Push" writes divergent edits back into the linked shape.
Morph a symbol into its own variant
The timeline can also animate an instance of a symbol from one variant to another. The export diffs the two variant trees and writes real animations for what differs - position, size, rotation, fill and stroke, path data, gradient stops - and cross-fades what it cannot interpolate. The SVG symbols page shows one running.
Open an animated SVG to check it
Drop any SVG on the canvas. Its SMIL animations become tracks on the timeline, and an animation written as CSS @keyframes plays on the same timeline and is exported as CSS again rather than converted. Scrub it, step between keyframes, read each track in the properties panel, and fix the timing or easing that looks wrong before the file ships. The SVG viewer page covers previewing any file and reading its markup.
Sound and video on the same timeline
Audio and video clips get their own lanes, with trim handles, split at the playhead, volume, mute, loop, fades and a playback rate. That is what makes the video and animated-image exports of a timeline possible, and it is why a motion graphic and its soundtrack can be edited in one place.