Motion Design – 04

Frame by frame Animation – Animate

Animating Frame by Frame means you draw a new image every frame (or every second, third,..) and then play those images after each other.

Frame by Frame or sometimes also called cel aimation (from celluloid) can be done analogue or with different software. Photoshop, Procreate, Krita, Blender, Animate,.. to name a few.

Creating frame by frame in Adobe Animate is a easy and because Animate uses Vector it’s also scaleable. You can also quickly transfer your animation to After Effects to combine it with other animations or to give it some special effects.

Adobe Animate Basics

Devon Kong has provided a lovely series of tutorials that give you an overview of the basics in Adobe Animate.

While the technical details might differ in every program, the overall workflow is most often similar to this:

  1. Define a frame rate
  2. Decide on animating on 1s, 2s, or 3s
  3. Draw motion path and timing guides
  4. Create rough animation with only a few lines or dots
  5. fine-tune timing if necessary
  6. Sketch Animation
  7. Clean up animation frames

Let’s go through this with an example in Animate:

Know How before we start

Swoosh animation in Animate

  • Keyboard Shortcuts – Animate

    For all shortcuts the following rules apply:

    • On Windows → Command = Strg
    • On older Keyboards and on Windows → option = Alt




    SpacebarMove canvas
    Shift + SpacebarRotate canvas


    F5Extend frame
    F6Add keyframe
    F7Add blank keyframe
    Shift + F5Delete frame
    Shift + F6Delete keyframe
    option + drag keyframesProlong selected keyframes evenly


    Enter Play
    , Previous frame
    . Next frame

Want more?

Here are a few great tutorials to get you going: