User Guide Cancel

Animations in Adobe Captivate

Search
Captivate

Captivate

Open app
  1. Captivate User Guide
  2. Introduction to Captivate
    1. What's New in Adobe Captivate
    2. Adobe Captivate System Requirements
    3. Adobe Captivate Updates
      1. Adobe Captivate (12.3 update) release notes
      2. Adobe Captivate (12.2 update) release notes
      3. Adobe Captivate (12.1 update) release notes
    4. Download Adobe Captivate
    5. Frequently Asked Questions
  3. Add a slide
    1. Slide navigator in Adobe Captivate
    2. Add a conversation slide
    3. Add characters to your Adobe Captivate project
    4. Edit the background image on a slide
    5. Create a long scroll project
  4. Add text blocks
    1. Add text to a project
  5. Add media blocks
    1. Add images to a project
    2. Add videos to a project
    3. Add quotes
    4. Add SVGs to a project
  6. Interactive components
    1. Add a button
    2. Add an input field
    3. Add a radio button group
    4. Add a dropdown
    5. Add a checkbox
  7. Widgets
    1. Add a Card
    2. Add Tabs
    3. Add a Certificate
    4. Add a Carousel
    5. Add a Hotspot
    6. Add Drag-and-Drop
    7. Add a Timeline
    8. Add Click to Reveal
  8. Create quizzes
    1. Add a Multiple-choice question
    2. Add a True or false question
    3. Add a Match the column question
    4. Add a Short answer question
    5. Add a Sequence question
    6. Import questions as CSV
  9. Add audio to a project
    1. Add audio
  10. Interactions
    1. Add interactions to a project
    2. Create interactive video with overlay
    3. Create a slide-level interaction
    4. Create an object-level interaction
  11. Animations
    1. Add animations to a project
  12. Accessibility
    1. Make a project accessible
  13. Customize the timeline
    1. Timeline panel in Adobe Captivate
  14. Customize TOC and Playbar
    1. Table of Contents in Adobe Captivate
  15. Edit project properties
    1. Variables in Adobe Captivate
    2. Preferences
    3. Themes
  16. Preview a project
    1. Preview
  17. Share a project for review
    1. Share for review   
  18. Publish a project
    1. Publish your project
  19. Create a simulation project
    1. Simulation

Add animations to your projects and make them come to life. Engage your learners and maximize their productivity.

Overview

In the all-new Adobe Captivate, animations refer to the visual effects and movements you can add to your eLearning projects to enhance interactivity and engagement. Animations in Adobe Captivate allow you to create dynamic and appealing content.

Types of animations

Animations in Adobe Captivate are categorized into Timing-based and Trigger-based ones. In Timing-based animations, you can apply animation to an object synchronized with a specific timeline or duration.

In Trigger-based animations, you can add animation on an object based on any trigger, for example, at the click of a button, display or hide, or an animation to an object's state.

In this article, 

Timing-based animation

Trigger-based animation

For all Timing and Trigger-based animations, Adobe Captivate supports the following:

  • Entrance: Entrance animations enable you to animate an object's entrance on the slide. One usage of such type of animation is when objects appear smaller at the beginning of a slide and gradually increase in size. 
  • Emphasis: Emphasis animations allow you to draw a learner's attention to an object. You can create animations to highlight or emphasize the content.
  • Exit: Exit animations allow you to animate an object while it disappears.

List of animations

  • Fade in
  • Scale in
  • Stretch in
  • Swirl in
  • Hinge in
  • Slit in
  • Slide in
  • Roll in

 

 

 

  • Bounce in
  • Flicker in
  • Rotate in
  • Slide in elliptical
  • Puff in
  • Tilt in
  • Swing in
  • Blink
  • Jello
  • Shake
  • Bounce
  • Wobble
  • Flicker
  • Pulsate
  • Vibrate
  • Rotate
  • Flip
  • Fade out
  • Scale out
  • Stretch out
  • Swirl out
  • Hinge out
  • Slit out
  • Slide out
  • Roll out
  • Flicker out
  • Bounce out
  • Rotate out
  • Slide out elliptical
  • Swing out
  • Puff out

Add your first animation 

In this example, you’ll apply an entrance animation using Swirl in on an image. 

  1. Select Add media blocks > Image in the left toolbar.

  2. In the Components section of the Visual Properties panel, remove the caption and subtitle. For more information, view Images in Adobe Captivate.

  3. Replace the image from Assets or a location on your computer. For more information, view Images in Adobe Captivate. After replacing the image, the slide looks like this:

    create animation
    Replace the image

  4. Select the image. Select Animation in the right toolbar.

    animation panel
    List of entrance animations

    Let’s deconstruct the items in the Animation panel.

    • The first section in the panel consists of three tabs: Entrance, Emphasis, and Exit. These tabs contain different animations, which you can apply to objects. View the section List of animations to know the animation you can apply.
    • The second section in the panel is the settings for a selected animation. The Settings section allows you to select the following:
      • Duration: Set the length of the animation (in seconds).
      • Delay: Set the amount of time to wait before the animation starts.
      • Acceleration: Set a transition animation on an object to change speed over its duration.
      • Repeat: Set the number of times the object animates. This option is only applicable to Emphasis animations.

  5. Hover on any animation in the Entrance tab. For example, select Swirl in. This adds a twisting or convoluting animation to the image. You can view the animation on the slide after you select it.

  6. After you select an animation, in the Options section, select the direction. The directions are different for each animation. Select the Blur checkbox to apply the blur on the image.

    option section
    Set the direction of an animation.

  7. In the Settings section, specify the Duration, Delay, and Acceleration of the animation. Select the Dim after animation checkbox to dim the image after the animation ends.

  8. Click the Test button to preview the animation.

Apply an emphasis animation on an object 

In this example, you’ll apply an emphasis animation on the image and then apply a Bounce animation.

  1. Select the image. 

  2. Select Animation in the right toolbar.

  3. Select the Emphasis tab. This tab contains animations you can apply to the image. View the section List of animations to know the animation you want to apply.

  4. Select Bounce.

  5. In the Options section, select the direction, Top, Bottom, Left, or Right, you want to apply to the animation.

  6. In the Settings section, specify the Duration and Delay of the animation.

  7. In the Repeat dropdown, select the number of times the image animates. If you select the option Until state exists, the image animates indefinitely.

  8. If you want to add another animation to the image, select Add New Animation. Repeat the steps. The animations execute in the order you've applied the animations to the image.

  9. Click the Test button to preview the animation.

Apply animation to text

Applying an animation to a text component follows the same procedure as an image.

  1. Select Add media blocks > Image in the left toolbar.

  2. Add image and text blocks. 

    For more information,

    apply effect
    Add text and image on the slide.

  3. Select the text and select Animations in the right toolbar.

    animation right toolbar
    Animations panel in the right toolbar.

    Note:

    The animations for text aren't the same as for images. For example, the Typewriter animation in the Entrance animation is only available for text.

  4. Select the Typewriter animation.

    typewriter effect
    Select the typewriter animation.

    In the Options section, the following options are available for the text Direction:

    1. Forward: The text animates from left to right.
    2. Center: The text animates from its center.
    3. Edges: The text animates from its edge.
    4. Random: The text animates randomly.

  5. In the Text delivery dropdown, select from the following options:

    1. All together: All the text animates in the selected direction.
    2. By word: The animation occurs word by word in the selected direction.
    3. By line: The animation occurs line by line in the selected direction.
    text delivery dropdown
    Select the text delivery option.

  6. In the Settings section, specify the values. For more information, view Animation settings.

  7. Click the Test button to preview the animation.

Apply animation to states

Adobe Captivate lets you apply animation to different states of an object. In this example, you’ll set different states of an image and set the animation to every state.

  1. Select Add media blocks > Image in the left toolbar.

  2. Replace the image. For more information, view Images in Adobe Captivate.

    replace the image
    Replace an image on the slide.

  3. Select the image. In the Visual Properties panel, click Show to launch the States flyout.

  4. In the States section, select Add. Add different states to the image. For more information, view States in Adobe Captivate.

    states section
    Launch the States flyout.

  5. Select the first state in the States flyout. 

    states flyout
    Select a state of the image.

  6. Select Animation in the right toolbar. 

  7. Apply any Entrance animation to the state.

  8. Repeat the steps for the remaining states of the image.

Apply a triggered animation

Adobe Captivate enables you to trigger an animation, for example, when you click a button.

  1. Select Add media blocks > Image in the left toolbar.

  2. In the Components section of the Visual Properties panel, select the Button checkbox to add a button in the content block. For more information, view Add a button in Adobe Captivate.

  3. Replace the image and add text. 

    For more information,

    replace image and add text
    Replace text.

  4. Select the button.

    select button
    Select the button.

  5. Select Interactions in the right toolbar.

  6. In the Action panel, select Apply animation.

    apply animation
    Apply animation to the button

    For more information on creating interactions, view Interactions in Adobe Captivate.

  7. Select the object to which you want to apply the animation. In this case, select the image.

    select image
    Select the button object.

  8. Click Next.

  9. Select an animation and its direction.

    effect and direction
    Select an animation and its direction.

  10. In the Settings section, specify the values as required.

  11. Click Done.

Your project is ready. After clicking the button at runtime, the image animates accordingly.

State animation panel

After you've applied animations to multiple states of an object, the animations of all the states are available at a single place on the timeline.

  1. Insert a slide. On the slide, add a few objects, for example, text blocks.

  2. Add states to the text objects.

    Select the states
    Select the states

  3. Select any state. In the right toolbar, select Animation. Apply an Entrance, Emphasis, or Exit animation on the text block. You can also add animations to multiple states.

    Select the effects for a state
    Select the animation of a state.

  4. Launch the timeline.

  5. Double-click the object bar on the timeline. 

    Double-click the object bar
    Double-click the object bar

    This opens the state animation panel.

    State animation panel
    State animation panel

  6. In the state animation panel, the left portion displays the selected object's states.

    Select the state in which you want to view your applied animations. Preview one or all animations in a state. Select the Preview animation or Preview all animations buttons. 

    Preview a single animation

    Preview a single animation
    Preview a single animation

    Preview all animations

    Preview all animations
    Preview all animations

Copy and paste an animation

After applying an animation to an object, you can apply the same animation to another object.

  1. In the Animation panel, select the ellipsis icon, and select Copy animation.

    copy animations
    Copy an animation

  2. Right-click the object to which you want to apply the animation. Select Paste Animations.

    paste animation
    Paste the animation to the object.

Delete an animation

  1. In the Animation panel, select the ellipsis icon.

  2. Select Delete.

    delete animation
    Delete an animation

Watch a video

 Adobe

Get help faster and easier

New user?

Quick links

View all your plans Manage your plans
View quick links
Hide quick links
Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now
Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now

Legal Notices    |    Online Privacy Policy