Animated icon transition in After Effects

Margarita Ivanchikova

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
6 Lessons (21m)
    • 1. Preview

      1:57
    • 2. Preparing Icons in Adobe Illustrator

      5:37
    • 3. Animating in After Effects

      5:16
    • 4. Easy Ease, Mask Layer, and Export

      6:09
    • 5. Saving a GIF

      1:31
    • 6. Final words

      0:34
13 students are watching this class

Project Description

Animating icons transition.

Create your own animation of an icon, that can be applied in user interfaces, in just a few minutes.

Supplies:

  • Two icons (see in attachment or choose more at icons8.com)
  • Adobe Illustrator (30 day free trial here)
  • Adobe After Effects (30 day free trial here)
  • Adobe Photoshop (30 day free trial here)

Resource of examples:

18 animated icons

STEP 1:

  1. Choose icons:
    1. Initial
    2. The final one
  2. Prepare it for animation in Illustrator:
    1. Recreate parts that are invisible, but should be visible in some state,
    2. Make future mask layers,
    3. Create background layer,
    4. Choose the right size (see the article),
    5. Create multiple layers,
  3. Save .svg file as .ai.
  4. Imagine what the transition will look like.
  5. Upload the prepared .ai icon file and description in the project section.

STEP 2:

  1. Make the animation in After Effects:
    1. Open project,
    2. Import .ai icon file: retain layers size,
    3. Open the right composition,
    4. Set the time for quick but visible animation (usually 14 frames),
    5. Choose rest time (usually 3 frames in the beginning, and 3 frames in the end),
    6. Create vector shapes from layers,
    7. Animate the moving part,
    8. Easy ease
    9. Apply mask layers
  2. Save the files as .gif in After Effects and Photoshop:
    1. Export to .avi in After Effects
    2. Save as .gif in Photoshop
  3. Upload it here.

Student Projects

project card
Petie .
4 comments