Animation on web

Lecture & workshop demo



Year: 2016



While assisting Professor James Walker at the Interaction2 Class , I held a workshop about different kinds of animation on web and it's use. I focused mostly on SVG animation using GreenSock Animation Platform (GSAP) plus simple CSS transition used to create motions on web.

These are some codepen demos that I made for the workshop as well as a real project done for the Texas Collaborative Healthy Mothers & Babies. Feel free to play around and fork the code on the other tabs.

SVG ANIMATION USING GSAP

See the Pen Pizza GSAP animation! by Em Karimifar (@EmAustin) on CodePen.

See the Pen TCHMB logo by Em Karimifar (@EmAustin) on CodePen.


CSS TRANSITION AS ANIMATION

See the Pen CSS animation demo by Em Karimifar (@EmAustin) on CodePen.

  • Marfa | Perso-Arabic/Latin multi-script typeface

  • Facsimile of Sol LeWitt's wall drawings | Interactive installation

  • Typoimage I | Anamorphic 3D-printed type

  • Möbios table leg | Parametric 3d modeling

  • Animation on web | Lecture & workshop demo

  • Living chandelier | Indoor hydroponic garden

  • Print design | A collection of various printed matter, books and brochures

  • UT RESISTS | Site-specific art

  • Eye tracking in physical space | Video editing

  • Mehraz | Perso-Arabic Typeface

  • 50 iterations of Michael Bierut's poster | Custom type design

  • Posters | A collection of posters designed for various events & clients

  • Six memos for the next millennium | Book jacket & memorial design

  • Norooz postcards | 3 dimensional origami postcards

  • Branding | Visual identity design

  • Sirang arcade center | Interior design/3D modeling/Branding and Layout