Web Page Animation Options
Posted on Feb 4, 2019
If you want to add animation to a website, you can many options. Here are a few I recommend.
For simple animations, you can just use CSS transitions.
svgator (free trial)
For even fancier animations that allow you to design the animations using a timeline, svgator is a online tool that can do that.
Adobe After Effects (free trial), BodyMovin and Lottie
For super fancy animation, design your animation in Adobe After Effects. Then, download and install the BodyMovin plugin for After Effects. Then, export the animation from After Effects using the BodyMovin plugin. The exported files will contain the animation data as JSON object. It may also include image files as a PNG which, if possible, you should manually export each one as a SVG and replace the PNGs with the SVGs. Then, load the lottie library in your page, e.g. with
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.3/lottie_svg.min.js" integrity="sha256-CVhGZIHAj+TzP6acM0j2ko94CaIqfcnqo/y79O+KOcg=" crossorigin="anonymous"></script>
and specify a class on the element where the animation should appear, e.g.
Place any exported images in their appropriate folders and update their paths in the animation data JSON object.