Animated SVGs
Using Lottie JS Libraries
I created this animations using Adobe After Effects and exported then as json SVG data using the After Effects Bodymovin extension. AirBnB's Lottie libraries are then used to trigger and control the animations.
These respect Prefers Reduced Motion — they will not play if you have "Reduce Motion" selected in your machine's settings.
Project Tools
- Adobe After Effects
- Bodymovin
- Lottie
Personal Brand
These were created for a previous incarnation of this website.
Nature
Abstract
Anatomical
Character Sprites
Sprite animations of Oce from Mostro Xolotl. Original characters created by Angel Barba.
Learn More About the Oce Character
Original Mostro Cartoons
La Casa del Mostro is a series of full-length cartoons featuring characters from Aztec mythology. You can see the original films on Youtube.
About Lottie
The Lottie JS libraries were developed by AirBnB to facilitate SVG animation for the web. Bodymovin is the After Effects extension for Lottie. Learn more about Lottie and Bodymovin by visiting the following links.
This technology can be used to create interactive animation! Interactive graphics are excellent learning tools that encourage engagement and inspire curiosity.
See an example of an interactive educational component here.
Lottie Web Player
Makes it easy to add animations to a website. Enables autoplay and hover.
lottie web player @ lottiefiles.com Lottie-web @ github
Lottie Interactivity
A small library to enable additional interactivity with Lottie animations. Enables animation on click, scroll, and with cursor.
lottie-interactivy @github Lottiefiles.com/interactivity
Bodymovin
A plugin for After Effects which exports animations as SVGs embedded in json files.
