Web Page Animation Options

If you want to add animation to a website, you can many options. Here are a few I recommend.

CSS transitions

For simple animations, you can just use CSS transitions.

Greensock JavaScript Animation Library

For fancy animations where you still write JavaScript to control the animation, the Greensock JS library is great.

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.

<div class="animation"></div>

Place any exported images in their appropriate folders and update their paths in the animation data JSON object.

Then, in your JavaScript, load the animation. Here’s example code.

See the Pen
JavaScript Animation Using Lottie
by Abdullah Yahya (@javanigus)
on CodePen.