Animation for Web, Mobile and Apps

Welcome. This page represents my journal and journey through creation of animation, particularly for websites. Animations are a beautiful way to engage visitors, and add a flourish to a web page or app. Illustrations are hot in web design right now – and being able to animate them elevates their effectiveness.

I am researching tools and techniques, and trying to improve my illustration and tech skills along the way. I love illustration and clean vector style art though I am an only intermediate user of the pen tool in Adobe Illustrator and Photoshop. I also rely on creative use of shape tools – I created the clouds in the illustration below with the pen tool and by combining ellipses.

 

Up

SVG Vector animation with Lottie file

Art created in Photoshop and Figma, exported to SVG, animated in Jaiku Animator. File size is only 13 k.

Animation with Lottie Files

Art uses vector format which can be resized infinitely with no loss in quality and no increase in file size.

Art and illustration tools

  • Photoshop, Illustrator
  • Figma, Sketch

Animation tool

  • After Effects + Bodymovin’ plugin
  • Haiku Animator

 

SVG vector animation via Lottie file

The animation is made with a series of rotation adjustments via keyframes. File size is only 11k which is tiny and helps keep page load fast. 

 

 

Animated GIFs in Photoshop

Illustrations and Photography come to life

Art uses bitmap format which cannot be resized infinitely with no loss in quality and no increase in file size. A small simple animation with minimal detail and minimal animation can still be small.

Beaver boy by Tdot.com

Animated GIF character

Art created wth pen tool in Photoshop. Animated via timeline tool in Photoshop. File size is 21k.

Animated background movie

Cherry blossom tree branch moves gently and two blossoms fall away.

Art created in Photoshop from stock illustration.  Animated in Haiku Animator. File size is 356 k.