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
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.
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
Credits: Type by Jeremy Vessey, Atipus, Mirela Belova, and Ray Larabie. Hand lettering inspiration from Thy Doan Graves.
Behind the Scenes:
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.