Websites used to be very plain with minimal intention to focus on user experience. Websites were more for the purpose of displaying information since, at the time, we didn’t have the capability to create attractive visual experiences. Things have changed, and now with HTML5, CSS3, and Javascript, website design has been revolutionized and we can reproduce high-quality designs for websites as well as integrating cool and mind-blowing animations.
Web developers always have a tough time creating animations on their websites. Even creating the smallest animation takes a hell amount of time😣😣. Well, don’t worry, I am here to make your life simpler... In this blog, I am listing out the top 5 free resources you will need to create impressive and stunning animations on your website.
1. Catto-CSS
Catto-CSS uses a simple syntax for four types of animations:
- ✔ Hover animations (h-)
- ✔ Automatic animations (a-)
- ✔ Infinity animations (i-)
- ✔ Scroll animations (s-o-)
How to use it?
- Download Catto-CSS
- Include catto.css at the head of your file
- Make a class in the element that you want to animate
- Select and copy the class in the animation section
- Paste the name of the animation in the element class
As you can see, it is very simple to create animations using Catto-CSS. You just need to add a class name to the element you want to animate and Catto-CSS will take care of the remaining process.
2. Animista
Animista is also quite similar to how Catto-CSS works. We merely need to add a class name to the element we want to animate. Animista can be used for 5 types of animations :
- Entrances
- Exits
- Attention
- Text
- Background
All the CSS properties such as duration, iteration-count, timing-function, direction can be changed in Animista itself and thus reducing the workload of changing the code according to our needs. Unlike Catto-CSS, we need not add any stylesheet separately to our code. Instead, Animista generates the HTML and CSS code which can be copied and pasted directly. Animista can also be used to learn CSS animations. You can try messing with the different properties available and can see how the code gets changed.
3. Animate.css
Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints. It has similar animations to that of Animista, but unlike Animista, you need to install the library either using npm or cdn(whichever suits you). You can refer to the documentation on their website for more details on how to install the library and get started with it.
Animate.css makes use of custom properties (also known as CSS variables) to define the animations duration, delay, and interactions. This makes Animate.css very flexible and customizable.
4. ScrollReveal
ScrollReveal is a JavaScript library for easily animating elements as they enter/leave the viewport. It was designed to be robust and flexible. ScrollReveal can also be installed either using npm or cdn(whichever suits you). Basically, ScrollReveal can be used to bring elements into the viewport of your website as you scroll.
5. Imagehover.css
Imagehover.css is a CSS library allowing you to easily implement scaleable image hover effects. Choose from over 40 hover effect classes from a CSS library weighing in at a minified size of only 19KB. Imagehover.css is very simple to use:
Just download the CSS file from their website
Link the CSS file in the tag
Edit the URL to your image and add your hover content. Then simply set the imagehover.css class of your choice to the containing figure element.
I hope you found the resources listed in this blog helpful. If you enjoyed this article, share it with your friends and colleagues! Have I missed any other resources for creating animations? Let me know in the comments section!