Welcome to my Web Animation showcase site! The purpose of this page is to showcase the various potentials of utilizing complex animation within a webpage to increase a pages usability. These animations are being rendered real-time within HTML with the help of Lottie, an open source library developed by AirBnB.
Normally, the limitations inherent in HTML and CSS make creating complex animations an arduous task, and implementation is cumbersome, not to manetion bloated in terms of file size. With Lottie, animations can be developed in After-Effects and rendered to JSON, resulting in a sleek and easy-to-call workflow.
Implementing interavtive elements into a webpage is a key facet of good web-design, and luckily Lottie provides simple scripts and tags to target specific animations and make them interactable by the user. Tags such as "click", "hover", "morph", etc. allow an animator to bring a page to life and enhance it's overall usability. Try "hovering" over the elements here to see how they respond.
The interactivity utilized in this page was actually built by the team at SVGenius, as an extension of the base Lottie script. Dev Samuel Osborne goes in detail in this video concerning all of the different functions that can be utilized, check it out if you'd like to learn more.