Quick + Dirty Design Tips: Animation in After Effects
June 28, 2017

Quick + Dirty Design Tips: Animation in After Effects

Words By Pedro Andrade
Read Time

Adobe After Effects is one of my favorite tools for prototyping user interfaces, creating video scenarios to communicate a context of use, or simply crafting stories through animation. It's a tool that allows you to explore and visualize ideas, and there's no right or wrong way to use it. Here are a few tips for using After Effects to animate vector lines imported from Adobe Illustrator.

For this method of animation, make sure to use only lines in your Illustrator file. The idea is to animate the lines across their own path, so the way you design them will play a big part on how elaborate your animation will be.

Watch this video for a quick step-by-step guide to animating lines in After Effects:

  1. When your Illustrator file is ready, import it to After Effects. You can simply drag your Illustrator file to the Project area or go to File > Import > File.
  2. Drag the imported file to the Timeline. It will automatically create a Composition.
  3. Now you must turn your Illustrator file into Outlines that After Effects can control. On the timeline, right click on the layer and select "Create Shapes from Vector Layer.
  4. The next step is to animate your outlines. For that, you will need to add a Trim Paths feature to your new layer.
  5. On Trim Paths, use keyframes for Start/End to change when and where you want your paths to animate. If your file has multiple lines, you can choose to animate them simultaneously or individually.

This technique is a simple and effective way to create powerful motion graphics for storytelling, user interface behaviors, or even a simple animated gif. Hope you enjoyed it!

No items found.
Twee iceland helvetica, yes plz kale chips etsy chillwave craft beer trust fund fixie thundercats pop-up brooklyn. Dreamcatcher cloud bread squid fingerstache bicycle rights, chicharrones cred. YOLO stumptown heirloom intelligentsia hot chicken before they sold out kinfolk twee artisan hammock copper mug retro.
Twee iceland helvetica, yes plz kale chips etsy chillwave craft beer trust fund fixie thundercats pop-up brooklyn. Dreamcatcher cloud bread squid fingerstache bicycle rights, chicharrones cred.
Previous
Next
No items found.
Twee iceland helvetica, yes plz kale chips etsy chillwave craft beer trust fund fixie thundercats pop-up brooklyn. Dreamcatcher cloud bread squid fingerstache bicycle rights, chicharrones cred. YOLO stumptown heirloom intelligentsia hot chicken before they sold out kinfolk twee artisan hammock copper mug retro.
Twee iceland helvetica, yes plz kale chips etsy chillwave craft beer trust fund fixie thundercats pop-up brooklyn. Dreamcatcher cloud bread squid fingerstache bicycle rights, chicharrones cred.
Previous
Next
Pedro Andrade
IDEO Alum

Pedro Andrade is an interaction designer who likes to make ideas tangible. At IDEO, he explores ways to make project concepts visible—helping clients to better understand where their organization can be by creating and bringing to life enhanced experiences for users.

No items found.

Get updates
from IDEO

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Related Articles

No items found.