How to use the timeline in Animate

  1. Adobe Animate User Guide
  2. Introduction to Animate
    1. What's New in Animate
    2. Visual Glossary
    3. Animate system requirements
    4. Animate keyboard shortcuts
    5. Work with Multiple File Types in Animate
  3. Animation
    1. Animation basics in Animate
    2. How to use frames and keyframes in Animate
    3. Frame-by-frame animation in Animate
    4. How to work with classic tween animation in Animate
    5. Brush Tool
    6. Motion Guide
    7. Motion tween and ActionScript 3.0
    8. About Motion Tween Animation
    9. Motion tween animations
    10. Creating a Motion tween animation
    11. Using property keyframes
    12. Animate position with a tween
    13. How to edit motion tweens using Motion Editor
    14. Editing the motion path of a tween animation
    15. Manipulating motion tweens
    16. Adding custom eases
    17. Creating and applying Motion presets
    18. Setting up animation tween spans
    19. Working with Motion tweens saved as XML files
    20. Motion tweens vs Classic tweens
    21. Shape tweening
    22. Using Bone tool animation in Animate
    23. Work with character rigging in Animate
    24. How to use mask layers in Adobe Animate
    25. How to work with scenes in Animate
  4. Interactivity
    1. How to create buttons with Animate
    2. Convert Animate projects to other document type formats
    3. Create and publish HTML5 Canvas documents in Animate
    4. Add interactivity with code snippets in Animate
    5. Creating custom HTML5 Components
    6. Using Components in HTML5 Canvas
    7. Creating custom Components: Examples
    8. Code Snippets for custom Components
    9. Best practices - Advertising with Animate
    10. Virtual Reality authoring and publishing
  5. Workspace and workflow
    1. Creating and managing Paint brushes
    2. Using Google fonts in HTML5 Canvas documents
    3. Using Creative Cloud Libraries and Adobe Animate
    4. Use the Stage and Tools panel for Animate
    5. Animate workflow and workspace
    6. Using web fonts in HTML5 Canvas documents
    7. Timelines and ActionScript
    8. Working with multiple timelines
    9. Set preferences
    10. Using Animate authoring panels
    11. Create timeline layers with Animate
    12. Export animations for mobile apps and game engines
    13. Moving and copying objects
    14. Templates
    15. Find and Replace in Animate
    16. Undo, redo, and the History panel
    17. Keyboard shortcuts
    18. How to use the timeline in Animate
    19. Creating HTML extensions
    20. Optimization options for Images and Animated GIFs
    21. Export settings for Images and GIFs
    22. Assets Panel in Animate
  6. Multimedia and Video
    1. Transforming and combining graphic objects in Animate
    2. Creating and working with symbol instances in Animate
    3. Image Trace
    4. How to use sound in Adobe Animate
    5. Exporting SVG files
    6. Create video files for use in Animate
    7. How to add a video in Animate
    8. Working with video cue points
    9. Draw and create objects with Animate
    10. Reshape lines and shapes
    11. Strokes, fills, and gradients with Animate CC
    12. Working with Adobe Premiere Pro and After Effects
    13. Color Panels in Animate CC
    14. Opening Flash CS6 files with Animate
    15. Work with classic text in Animate
    16. Placing artwork into Animate
    17. Imported bitmaps in Animate
    18. 3D graphics
    19. Working with symbols in Animate
    20. Draw lines & shapes with Adobe Animate
    21. Work with the libraries in Animate
    22. Exporting Sounds
    23. Selecting objects in Animate CC
    24. Working with Illustrator AI files in Animate
    25. Apply patterns with the Spray Brushtool
    26. Applying blend modes
    27. Arranging objects
    28. Automating tasks with the Commands menu
    29. Multilanguage text
    30. Using camera in Animate
    31. Using Animate with Adobe Scout
    32. Working with Fireworks files
    33. Graphic filters
    34. Sound and ActionScript
    35. Drawing preferences
    36. Drawing with the Pen tool
  7. Platforms
    1. Convert Animate projects to other document type formats
    2. Custom Platform Support
    3. Create and publish HTML5 Canvas documents in Animate
    4. Creating and publishing a WebGL document
    5. How to package applications for AIR for iOS
    6. Publishing AIR for Android applications
    7. Publishing for Adobe AIR for desktop
    8. ActionScript publish settings
    9. Best practices - Organizing ActionScript in an application
    10. How to use ActionScript with Animate
    11. Best practices - Accessibility guidelines
    12. Accessibility in the Animate workspace
    13. Writing and managing scripts
    14. Enabling Support for Custom Platforms
    15. Custom Platform Support Overview
    16. Creating accessible content
    17. Working with Custom Platform Support Plug-in
    18. Debugging ActionScript 3.0
    19. Enabling Support for Custom Platforms
  8. Exporting and Publishing
    1. How to export files from Animate CC
    2. OAM publishing
    3. Exporting SVG files
    4. Export graphics and videos with Animate
    5. Publishing AS3 documents
    6. Export animations for mobile apps and game engines
    7. Exporting Sounds
    8. Export QuickTime video files
    9. Controlling external video playback with ActionScript
    10. Best practices - Tips for creating content for mobile devices
    11. Best practices - Video conventions
    12. Best practices - SWF application authoring guidelines
    13. Best practices - Structuring FLA files
    14. Best Practices to optimize FLA files for Animate
    15. ActionScript publish settings
    16. Specify publish settings for Animate
    17. Exporting projector files
    18. Export Images and Animated GIFs
    19. HTML publishing templates
    20. Working with Adobe Premiere Pro and After Effects
    21. Quick share and publish your animations

About the timeline

The timeline in Adobe Animate organizes and controls a document's content over time in layers and frames. Like a movie film, Animate documents divide lengths of time into frames. Layers are like multiple filmstrips stacked on top of one another, each containing a different image that appears on the Stage. The major components of the Timeline are layers, frames, and the playhead.

The timeline shows where animation occurs in a document, including frame-by-frame animation, tweened animation, and motion paths. Controls in the layers section of the timeline let you hide, show, lock, or unlock layers, and display layer content as outlines. You can drag timeline frames to a new location on the same layer or to a different layer.

Modern Timeline

Timeline panel’s look and feel is enhanced including clear frame interval representation, better readability of frame and time marker, enhanced onion skinning, buttons for creating keyframes, blank frames and so on.

New timeline

Timeline controls

Timeline header has been made richer by surfacing extra functionality upfront.

Timeline header

Layer view

You can toggle from the default multi-layer view to a current layer view by clicking the Layer view icon on the upper left.

Multi-layer view
Multi-layer view

Single layer view
Single layer view

Camera

To enable or disable camera, click the camera button.

Layer parenting view

It displays the parenting hierarchy of layers.

Layer depth

It creates a layer depth panel and allows you to modify the depth of active layer provided in the list. 

Note:

When an animation is played, the actual frame rate is displayed. This frame rate can differ from the document’s frame rate setting if the computer cannot calculate and display the animation quickly.

Onion skinning

Onion skinning has been revamped and made simpler. You can enable onion skinning by clicking the onion skin button. Onion Skinning is further enhanced to selectively exclude (and include) frames by right click any onion skin frame within the onion skin range. 

Onion skinning main

Do one of the following:

  • Click the Onion Skin button  to enable and disable onion skinning. When enabled, All frames between the Start Onion Skin and End Onion Skin markers (in the timeline header) are superimposed as one frame in the Document window.
  • Click and hold the mouse on the Onion Skin button  to view and select the options like selected range, all frames, anchor markers and advance settings.
  • Select the Onion skin icon  (the icon to the left of the Loop icon) in the timeline. 

Some of the onion skin parameters in this panel are existing features like outline mode, onion skin previous/future frame color preference, anchor markers:.

  • Keyframe only mode: Render only keyframes in onion skin range, that is skip between frames of tween.
  • Starting Opacity: Opacity of first onion skin frame on either side of active frame.
  • Decrease by: Percentage delta decrease across every onion skin frame.
  • Constraints: Range of previous and next frames are same when constraints are enabled, unless, user edits the range from timeline.

For more information, see Using Onion skinning.

Some of the onion skin parameters in this panel are existing features like outline mode, onion skin previous/future frame color preference, anchor markers.

·       Keyframe only mode: Render only keyframes in onion skin range, that is,. skip between frames of tween.

·       Starting Opacity: Opacity of first onion skin frame on either side of active frame.

·       Decrease by: Percentage delta decrease across every onion skin frame.

Constraints: Range of previous and next frames are same when constraints are enabled, unless, user edits the range from timeline.
Onion skinning advanced
Advanced Settings

A. Opacity of first onion frame B. Decrease opacity across onion frames C. Show keyframes only D. Anchor markers 

Edit multiple frames

It allows you to view and edit contents in multiple frames within the selected range.

Click and hold the mouse on the Edit Multiple Frames button to view and select Edit selected range and edit all frames. Click to disable and enable the Edit Multiple Frames mode.

Edit multiple frames

Create tweens

Click and hold the mouse on the Create Tween icon to view and select the options. Select the frame span in the timeline and click Create Tween to create a tween as per the recent selection.

Create tween

Changing the appearance of the timeline

By default, the timeline appears below the main document window. To change its position, detach the timeline from the document window and float it in its own window. You can dock it to any other panel of your choice. You can also hide the timeline.

To change the number of layers and frames that are visible, resize the timeline. To view extra layers when the timeline contains more layers than can be displayed, use the scroll bars on the right side of the timeline.

Dragging the Timeline

  • To move the timeline when it is docked to the document window, drag the title bar tab at the upper-left corner of the timeline.

  • To dock an undocked timeline to the application window, drag the title bar tab to the top or bottom of the document window.

  • To dock an undocked timeline to other panels, drag the timeline title bar tab to the location you choose. To prevent the timeline from docking to other panels, press control key while you drag. A blue bar appears to indicate where the timeline will dock.

  • To lengthen or shorten layer name fields in the timeline panel, drag the bar separating the layer names and the frames portions of the timeline.

Customizing the timeline view

  1. To display the Frame View pop‑up menu, click Frame View in the upper-right corner of the Timeline.

  2. Select from the following options:

    • To change the size of layers, select Large, Medium, or Short. (The Large frame-width setting is useful for viewing the details of sound waveforms.
    • To display thumbnails of the content of each frame scaled to fit the timeline frames, select Preview. This preview can cause the apparent content size to vary and requires extra screen space.
    • To move the Timeline Controls to the top or bottom, select Header Top or Header Bottom, respectively.
    • To zoom in and zoom out the Timeline, use the Timeline resize view slider bar.
    Timeline as header
    Timeline as header

    Timeline as footer
    Timeline as footer

Change layer height in the timeline

  1. Do one of the following:

    • Click the hamburger menu in the Timeline header. Select Short, Medium, or Tall.

      Double-click the layer’s icon (the icon to the left of the layer name) in the timeline.

    • Right-click (Windows) or Control-click (Macintosh) the layer name and select Properties from the context menu.

    • Select the layer in the timeline and select Modify > Timeline > Layer Properties.

    Short layer height
    Short layer height

    Tall layer height
    Tall layer height

  2. In the Layer Properties dialog box, select an option for layer height and click OK.

Layer Coloring and Pinning

You can pin or color a layer for easy identification by clicking on the dot that appears just after the layer name. When enabled, an underline with the layer outline color appears across the layer for a quick layer recognition. 

Layer coloring

Set layer opacity

Do one of the following:

  • To set the visibility to opacity, use shift+click the eye column in the timeline.
  • Double-click the layer’s icon (the icon to the left of the layer name) in the Timeline.
  • Right-click (Windows) or Control+click (Macintosh) the layer name and select Properties from the context menu. In the Layer Properties dialog box, select Visibility>Opacity.
  • Right-click (Windows) or Control+click (Macintosh) the layer name and select Show Others as Transparent.

Resize the timeline panel

  • If the timeline is docked to the main application window, drag the bar separating the timeline from the stage area.

  • If the timeline is not docked to the main application window, drag the lower-right corner (Windows) or the size box in the lower-right corner (Macintosh).

The blue playhead at the top of the timeline moves as a document plays to indicate the current frame displayed on the Stage. The timeline header shows the frame numbers of the animation. To display a frame on the stage, move the playhead to the frame in the timeline.

To display a specific frame when you are working with many frames, move the playhead along the timeline.

  • To go to a frame, click the frame’s location in the timeline header, or drag the playhead to the desired position.

  • To center the timeline on the current frame, click the Center Frame button at the bottom of the timeline.
  • Now, loop range can be created by just dragging over the loop section. It allows you to export the frames (as movie or video) in selected range.
  • With the loop option turned on in the timeline, you can also loop streaming audio within a range of frames along with other animations.
Loop option
Looping

Viewing time along with frames

The timeline displays the time in seconds along with the frame numbers. This feature allows faster conversion from frames to time and also keeps you aware of the frames per second (fps) value you have set throughout the animation process. 

In the following screenshot, the timeline displays 20 frames per second (fps): 

Viewing time along with frames

Managing animation speed

You can manage animation speed by scaling the frame spans, by animating based on time intervals, or you can extend and compress animations by using time controls. 

Scale the frame spans

You can change frames per second (fps) for your animation without having to change the animation speed. Use the Scale Frame Spans option as you change fps to keep the time intact. 

Option to scale frame spans

Animating based on time intervals

Turn your frame spans into 1s, 2s, 3s or to any desired interval. This feature works on classic tween span, shape tween span, motion tween span, keyframe span, or on a blank keyframe span.

Custom frame by frame animation based on specific time intervals.

Convert to Frame-by-Frame animation option is available in Modify menu. You can also assign your desired keys in keyboard shortcut dialog to perform these tasks. 

Extend or compress animations using timeline controls

Now, you can extend the frame duration of selected frames by entering desired number of frames in Expand frame span field. The duration of the selected frames are increased by the number entered in the Expand frame span.

You can extend or reduce time for the selected span on the timeline. Select the frame span and drag the right-side edge of the selected span on timeline, forward or backward. The frames within the timeline are adjusted automatically.

You can replicate your animations multiple times (x2, x3, and so on) by dragging the spans in timeline. You can also compress the frames to their normal position, after extending them. 

Select the frames in timeline, click, and drag the highlighted right-side edge of the selection.

Frame selection and border

While dragging, as shown in the following screenshot, you can view the animation in multiples such as x2, x3, and so on. 

Display of stretched frames while dragging.

In the following screenshot, you can view the extended span in multiple of x2. x2 is double the size of a selected span. x3 is three times the original size of a span. 

Extended spans after dragging.

The frame duration can now be extended by entering desired number in Expand frame Span field. The duration of the selected frame is increased by the number of frames entered in the Expand Time Span.

Navigating in timeline

Keyframe navigation

Now, you can click the Step back one frame or step forward one frame button to move to the previous or next frame. Also, click and hold the mouse on the Step back one frame or step forward one frame button to move to the first or last frame respectively.

Click the Play button to view the preview of your animation.

VCR controls

You can navigate between keyframes on the active layer using the Control menu. You can also use Alt+. or Alt+, to move forward and backward to next or previous keyframes respectively in the timeline. 

Keyframe navigation options with keyboard shortcuts
Keyframe navigation options with keyboard shortcuts

You can navigate between keyframes on the active layer using the left and right controls on the layer. Also, you can use the menu and keyboard shortcuts. 

Timeline displaying left and right controls on layer

Note:

You can use page navigation shortcuts such as Alt+Shift+, for backward and Alt+Shift+. for forward navigation. 

Insert frames and keyframes

Keyframes, blank keyframes, and frames can be added by just a click of the button on the timeline. Click and hold the mouse on the Keyframe icon to view and select the options. Select a frame in timeline and click Keyframe icon to insert frame, keyframe, or blank keyframe as per the recent selection.

Inserting keyframe or blank keyframe in Timeline panel now has a visual feedback. A subtle glow indicates that the operation has been carried out.

Create Keyframe

Inserting keyframe or blank keyframe in Timeline panel now has a visual feedback. A subtle glow effect indicates that the operation has been carried out.

Active layer only mode

The Timeline View icon is modified with a new mode called Active Layer Only. To view only the active layers in the timeline, click and hold the mouse on the Timeline View option and select Active Layer Only

Panning through timeline from stage

  • Now, you can also use hand tool to slide the Timeline horizontally.
  • You can scrub the timeline right from the stage using the new time scrub tool. This tool is grouped with the hand tool in tool panel. You can also use spacebar+T keyboard shortcut to temporarily enable this tool. Drag left or right to view the timeline in the direction of pan. 
Display of time scrub tool

Customizable Timeline Toolbar

With the customizable timeline, you can choose what action buttons to be displayed in the timeline toolbar. In the hamburger menu of the timeline, click Customize Timeline Tools.

A - Timeline Hamburger Menu B - Menu option to customize timeline toolbar
A - Timeline Hamburger Menu B - Menu option to customize timeline toolbar

A panel with toolbar buttons displays, which could be either added or removed from the timeline toolbar. Click anywhere outside the panel to close it. When the panel is open, buttons that are displayed on the timeline toolbar are selected in the panel. To toggle button selection, click the appropriate buttons. Changes are immediately shown in the timeline toolbar. 

Timeline Tools Panel
A - Tools Panel B - Frame Buttons Group C - Tween Buttons Group D - Reset

Timeline toolbar has a few options which are grouped in a single button. Long click the button to reveal all options grouped in the button.

For example, Insert Keyframe or frame group button has following four options grouped under it:

  • Keyframe
  • Blank Keyframe
  • Frame
  • Auto Keyframe

In the toolbar panel, the above options appear as a grouped button, and individual buttons. If a group button is selected, individual buttons in that group are automatically deselected. And if any individual button in the group is selected, the group button in deselected.

Two such groups exist in the tool panel. One for inserting keyframes or frames, and the other for inserting tweens. 

There are a few buttons in the tool panel that are selected and deselected in pairs. For example, buttons to step keyframes backward or forward, and buttons to step single frame back and forth. 

If you want to discard any changes in the configuration panel and revert timeline toolbar to the default state, click Reset Timeline Controls.

Watch the video to learn how to customize Timeline.

What's next?

We've got you covered on how to use and personalize your Timeline. You can now learn how to create animations using Assets Panel.

More like this

Adobe logo

Sign in to your account