User Guide Cancel

Apply motion to artwork

Search
Fresco

Fresco

Open app
  1. Adobe Fresco User Guide
  2. Introduction
    1. What's New in Adobe Fresco
    2. What is Adobe Fresco
    3. System Requirements for Adobe Fresco
    4. Release Notes for Adobe Fresco
    5. Adobe Fresco on the iPhone
    6. Keyboard shortcuts
    7. Accessibility in Fresco
    8. Adobe Fresco | Common questions
    9. Get started with the user interface
    10. Upgrade to a paid plan of Adobe Fresco
    11. Upgrade storage for Adobe Fresco
    12. Supported features on iPad and Windows devices
  3. Draw, paint, animate, and share
    1. Layers
    2. Shapes in Adobe Fresco
    3. Pixel brushes
    4. Live brushes
    5. Vector brushes
    6. Mixer brushes
    7. Ribbon brushes
    8. Adjust pressure curve on stylus 
    9. Colors
    10. Paint inside boundaries
    11. Apply motion to artwork
    12. Free Transform tool
    13. Magic Wand tool
    14. Smudge tool
    15. Liquify tool
    16. Add and modify text
    17. Publish, export, and share
    18. Layer masks
    19. Access Creative Cloud libraries in Fresco
    20. Ruler
    21. Erasers
    22. Add your own font
    23. Grids alignment 
    24. Symmetry
  4. Adobe Fresco and Creative Cloud apps
    1. Adobe Fresco and Photoshop
    2. Adobe Fresco and Illustrator
    3. Easily migrate from Draw and Sketch
  5. Cloud documents
    1. Cloud documents in Adobe Fresco
  6. Troubleshooting
    1. Unable to access imported pixel brushes on Windows
    2. Adobe Fresco support for Windows ARM devices
  7. Examples, ideas, and inspiration
    1. Create a logo
    2. Create tie-dye wash effects
    3. Creative illustration | Digital concept art

Learn how to add motion to your artwork using the frame-by-frame or motion path techniques in Fresco.

You can apply motion to elements in your artwork to create compelling visual narratives. You can then export the final artwork in MP4, GIF, or PNG files.

Apply motion to artwork

Animate your artwork or its elements

You can use the frame-by-frame or motion path techniques or a mix of both to animate your artwork or its elements.

Frame-by-frame 

The artwork in each frame differs slightly from the previous frame and creates an illusion of motion when played in succession. It's used when object properties or movement change with each frame.

Motion path

Traces objects and follows a defined path. It's used to move elements or artwork across the stage in a looping motion without changing their appearance.

Before you begin

Before you begin your animation journey, get familiar with these concepts and limitations: 

  • We suggest creating objects on separate layers when using motion on complex artwork that requires changes to several objects or their properties. This ensures you have finer control over editing each object in your artwork.
  • The layer timeline is displayed when you select an object or artwork containing frames. The timeline, by default, includes all objects in the selected layer and displays the total number of frames created and the frame on which you're currently working. For example, a reading of 2/13 indicates that you're working on the second frame out of 13 frames.
Layer timeline
Layer timeline

Animate using frame-by-frame or motion path techniques

Based on the complexity of the changes in each frame, use the frame-by-frame or motion path techniques to apply motion to artwork.

Browse through the tab below and learn how to apply these techniques and configure their settings for your design outcome.

Add frame-by-frame motion to an artwork using the timeline. The incremental changes you make to your artwork in each frame provide an illusion of movement or change in your design.

  1. Select the layer you want to animate and then select Motion   . The timeline, by default, includes all the objects of the selected layer.

  2. To add a new frame, tap the selected frame. Use the options displayed to duplicate, copy, or delete frames.

  3. Select the frame you want to shuffle, drag along the timeline, and drop to reorder frames. Before you edit your artwork in a new layer, enable Onion skin.

  4. Select Play All to preview the motion you applied to your artwork. Choose the Playback option from Motion settings    to play the preview on loop, boomerang, or just once. 

  5. Configure Motion settings    to adjust the speed, change playback options, adjust opacity and frames of Onion skin, and view the document timeline.

  6. Select your preferred motion layer > More options   icon > Set as reference and apply Fill to individual frames of the targeted fill layer to speed up the coloring of your animation.

Follow these steps to use the motion path technique to animate objects on a defined path:  

  1. Select the layer containing the object and select motion   above the ruler  .

  2. In the Motion bar at the bottom, select the Path   to open the Layer properties panel.

  3. Select any of the Motion presets to apply motion effects.

  4. Draw the path that you'd like the object to follow or move along. To recreate a path, delete   and redraw the path.

    Draw using free hand

    Draw using drawing aids

  5. In Advanced settings, you can:
    • Grow/Shrink: Toggle this to increase or decrease the object's size.
    • Rotate: Toggle to get the Sway or Spin motion control. 
      • Sway: Specify the Angle and the Number of times for the motion.
      • Spin: Toggle on/off counterclockwise and the Number of times for the motion.

    Add Spin or Sway effect

    • Fade in/out: Changes an object’s opacity to create smooth transitions at the beginning or end of its motion path.
    • Align to Path: Align objects to the specified path.

    Align to Path switched off

    Align to Path switched on

    • Add multiples: Add multiple objects on the same path and preview in real time.
    • Scatter: Apply effects to the corresponding objects added and preview them in real time.

    Add multiple and Scatter effects

    • Speed Options: Adjust the playing speed of the motion track.
    • Ease In/Out: Apply these effects to make the objects slowly appear or disappear from the screen.

  6. Select Play All to preview the motion you're working on. Select Path   to see the preview with the paths. You can choose a playback option from motion settings to play the preview on loop, boomerang, or just once.

  7. Check Motion settings    to adjust the speed, change playback options, adjust opacity and frames of Onion skin, and view the document timeline.

Draw multiple paths

You can draw a single or multiple paths on the selected layer. Drawing multiple paths also automatically duplicates the object or the object motion on the same layer, so you don't have to create multiple objects unless you want to apply different motions to every object. When working on single or multiple paths, select Settings > Document timeline > Show paths as frames, to enable the path timeline for converting paths as frames. 

Now that you have created your designs, apply these motion settings to your animations: 

Frames/second

Defines the speed of the animation in frames per second (FPS). Increasing or decreasing FPS correspondingly increases or decreases the speed.

Playback

Displays the playback and preview options. Types of playback are Loop, Boomerang, and Play once.

Document timeline

Displays all the paths as frames. You can enable another option Show paths as frames to convert a path to a frame timeline.

Onion skin

Provides a reference by displaying contents of the previous and the following frames on display.

The frame under the play-head appears in full color.

Enable and disable the onion skin feature within Motion bar settings:

  • Frames: Adjust the number of frames you want to see before and after the selected frame.
  • Opacity: Adjust the opacity of each onion skin frame to help see the frames better. You can also easily create simple fade-in and fade-out effects with controls for frame-level opacity. The frame before looks like a shadow, and if there is a frame above, it is shown in color to help you identify the position of the frames.

Onion skin helps you preview the drawing on the frame to help you trace or make those little changes precisely. You can also adjust the number of frames you want to keep visible. Watch the video below to learn more.

Apply motion settings to your animations

Transform and move motion paths and frames

To move or resize previously created motion paths along with your content, follow these steps:

  1. Select the motion layer you want to transform and double-tap the Transform icon in the toolbar.  

  2. Choose All frames & motion paths from the drown-down options.

  3. Select the Transform option to move or resize the motion path or frame.

Share animated artwork

  1. Select Export  , and then select Publish and Export > Motion.

  2. Choose any of the export formats:

    • GIF: Used for web graphic motion.
    • MP4: Used to store audio and video. Fresco offers three presets for MP4:
      1. Automatic: Used to export output in the highest resolution. This can also lead to an increase in the file size.
      2. Web-ready: Used to optimize the size and quality of the output for web displays.
      3. PNG set: Used for motions with transparent objects. You can export the PNG file for further editing in Adobe After Effects.
    Tip:

    You can move the Loop slider to set the loop count and duration of an MP4 motion file.

  3. Select Generate Frames to preview the output.

  4. Select Export to share or save your artwork.

    Specify the loop count of your MP4 motion files using the enhanced export options

Related resources

Now that you've started applying motion to your artwork in Adobe Fresco, take a step forward and learn how to work with layers and brushes.

Join our community to connect, learn, and engage

Ask the Community

For inspiration, expert tips, and solutions to common issues, visit the Adobe Fresco Community forum. Connect with our team and fellow users to exchange ideas, share your creations, stay updated with the latest features and announcements, and provide feedback.

 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