Illustrator graphics to After Effects animation


When it came time to create a new animation for our homepage, we decided to go with bold, fun and eye-catching. Our talented designer Beth came up with the graphic treatments for each section. I was then given these as layered Illustrator files and animated them in After Effects. After exporting them to .mov files, they were converted to FLV video.

I feel that the beginning segment of an animation is often the most important, as it sets the tone for the rest and gives visitors a reason to keep watching. My process for creating the animations was to first look at the Illustrator files and come up with ways they could be animated in an interesting way.

As you can see, it has quite a bit of visual movement already. The first part I worked on was the “vortex letter cloud”. I saw this as a swirling mass of characters that spin outward, yet are held in place by gravity. I tried different letter/number combination before deciding on using code snippets for the elements. I used code that we commonly use for AS3, such as “}else{“,”[1,2,3]” and “!=”.
Here are a couple of stills from two of the animations:

After exporting several of these animations, I layered them in After Effects and transformed them to give a sense of randomness to the animation. I then animated the birds and had the tagline “IF YOU CAN DREAM IT, WE CAN BUILD IT” animate into place as if it was generated by the vector cloud as well. A little bit of camera movement and the animation was complete.

So that’s the process of how our video got started. You can check out the entire video here: curiousm1nds.wpengine.com.

About Curious Minds
We are a web development firm in New York and Chicago, providing development resources and consulting for websites and mobile apps since 2004.