Layouts done in Illustrator: 

     •   Nature layout paired with brush type
     •   Sports layout paired with freestyle type
     •   Terminal layout paired with freestyle type
     •   Classic layout paired with vintage/retro type
Process:

 I was inspired by the Badass quote I stumbled upon Pinterest (https://goo.gl/eH8miS) and wanted to do a SVG  exercise on web animation. These are sketches for layout and I experimented with typefaces to communicate the design style.

Animating: 

I explored switching layouts with (1) media queries (2) animating text effects using pure CSS (3) web development frameworks like snap.js (4) animating with After Effects (Bodymovin script)
1) Switching media query layouts
(2) Animating text effects using pure CSS3
(3) Use snap.js to draw and animate the canvas 
(4) Animating with After Effects and export with Bodymovin script
 

     Workflow in After Effects and
     the challenges encountered
     when I tried to extend the
     initial animation concept
     with Bodymovin script


Credits: Type by Jeremy Vessey, Atipus, Mirela Belova, and Ray Larabie. Hand lettering inspiration from Thy Doan Graves.
Behind the Scenes:

Side Project

Roles:           Illustrator and Web Animator

Duration:     2017 - 2018

I learned I still got basic animation skills in After Effects after 8 years and one AE course. All the keyframe shortcuts were forgotten but I made it work.

Related Collection Projects

Back to Top