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.
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
- 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.
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.