What is the animation timeline?
Last update: March 6, 2024
- Topics:
- Graphic Design
CREATED FOR:
- Beginner
- User
Learn how to navigate and adjust the animation timeline. The timeline is an overall view of the entire animation, where you can preview and reduce/extend the animation length.

Transcript
So now that we have completed all of our animations, it’s time to review the timeline. As you can see, all of the animations happen at the same time and we will need to stagger them eventually. But we will look at this in a subsequent video. First off, let’s look at the timeline by pressing the Edit Timeline button on the bottom right corner. What the timeline is, is an overall overview of the entire animation. As you can see, it is 5 seconds long. I can grab the indicator and scrub across the entire timeline to rewind and go forward and across the entire animation. This is a really quick way for me to understand what’s happening at every frame. This is the base timeline of the overall animation. If I wanted to see where all the other elements sit, I can click Show Layered Timeline at the bottom left corner. If I wanted to extend the length of the overall animation, I just grab the right handle and drag it to the right. As you can see now, I’ve made the animation 8 seconds long. Drag in the opposite direction to shorten it. In the next video, we will cover animation staggering.
Previous pageTweaking the settings of your animations
Next pageHow to stagger your animations
Creative Cloud
- Overview
- Creative Cloud for enterprise
- Overview
- Tutorials
- Acrobat for Content Creators
- Improve CC workflows with CC Libraries
- Taming type anxiety
- Adobe Express: Content that stands out
- Collaboration: The future of creativity
- Creating Creative Cloud Libraries for teams
- Sharing branding assets with Creative Cloud Libraries for teams
- Create unique composites with Adobe Stock and Photoshop for iPad
- Creating cinemagraphs with Photoshop
- Decoding the alphabet soup of graphic formats
- Try your hand at Fresco on the iPad and iPhone
- Quick reference guides
- Adobe Express
- Overview
- How-to tutorials
- Overview
- What’s on the Home Page
- Introduction to Quick actions
- Introduction to templates
- Setting up a brand kit
- Starting a project
- UX of a project
- How to add text
- How to add an image
- How to add a Gen AI image
- How to use grids
- How to use elements
- Working with layers & artboards
- How to collaborate
- How to share & download
- How to use version history
- Undo and redo
- Get quick inspiration
- Intro to animations
- Different types of animation
- Tweaking the settings of your animations
- What is the animation timeline?
- How to stagger your animations
- Adding sections to your timeline
- Adding audio to your animations
- How to resize your animations
- Exporting your animations
- How to remove background from any image
- What are the new Gen AI features in Adobe Express?
- How to use the object eraser tool
- How to use Generative Fill
- Improving your text design with Gen AI
- How to use Text-to-template Gen AI
- How to bulk translate your content
- How to edit a PDF
- How to use the scheduler for posting
- Group objects
- Create multiple pages
- Use CC Libraries
- Google Drive integration
- Refine a cutout
- Create curved text
- How to start a video project
- How to add video clips
- What’s a video timeline?
- Working with multiple clips
- How to add audio
- How to export video
- How to and why lock layers
- Maximize efficiency: Create a reusable template
- Save & share templates
- How to use templates
- Use case tutorials
- Overview
- Create multi-channel HR content for events
- Creating a promo visual for an online learning course
- Creating an end-of-year video
- How to create a newsletter
- Create digital screen announcements for the office
- Creating backgrounds for presentations
- Update finance round-up image
- Create compelling merchandising content
- Empower marketing teams to create multi-channel content
- Empower distributed teams to localize content
- Jumpstart creative ideation
- Create flyer content for marketing campaign with Firefly
- Create recruiting and on-boarding content with Firefly
- Create social posters with Firefly
- Easily run social campaigns
- Create webinar posters with Firefly
- Adobe Firefly
- Overview
- Tutorials
- Overview of Adobe Firefly
- Discover Adobe Firefly
- Accelerate creative ideation
- Create reusable scenes for merchandise
- Create a Custom Model using a subject
- Create a Custom Model using styles
- Landing page
- Text to image
- Text effects
- Generative fill
- Generative recolor
- Examples of how to use Firefly
- Enable creative efficiency
- Banner ad variations in Photoshop
- Generative Fill in Photoshop
- Generative Recolor in Illustrator
- Webinars
- Adobe Stock
- Overview
- Tutorials
- Stunning digital assets
- Search Adobe Stock licensing history
- Add a hand-drawn aesthetic to Adobe Stock images
- Add flair to typography with masks and animation
- Animate an Adobe Stock vector illustration in Photoshop
- Begin Your Annual Report with a video created with Adobe Stock and Spark Video
- Bring creative to life with custom animations by Adobe Stock
- Change an Adobe Stock image’s colors to match your story
- Create a 3D collage for a poster using Adobe Stock images
- Create a bold label with Adobe Stock templates and Photoshop Smart Objects
- Create a company guidelines infographic with Adobe Stock
- Create a product feature comparison chart using Adobe Stock
- Create a semi-surreal composite with Adobe Stock
- Create a semi-surreal pattern with Adobe Stock
- Create an interactive product configurator with Adobe Stock
- Create an interactive tourism photo with Adobe Stock and XD
- Create animations for email with Adobe Stock and Photoshop
- Create cohesive brand imagery with beautiful gradients and Adobe Stock assets
- Create engaging web graphics by combining Adobe Stock images with CSS
- Create inspiring mood boards in no time with Adobe Stock
- Create realistic photo composites with Adobe Stock images
- Customize a loading screen animation with Adobe Stock and XD
- Customize an Adobe Stock presentation template to look professional
- Customize the colors in an Adobe Stock vector illustration
- Adobe 3D & VR
- Adobe Video
- Adobe XD
- Deploy & Manage
- Adobe MAX