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. Or, just use this CSS animation library.
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 an 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.