6 Animation Tools to Step Up Your Front-End Game
Who is this article for?
- Someone who needs animation in a project, but isn’t sure where to start.
- Developers currently relying on janky CSS animations too often.
- Front-End developers interested in hearing another guy’s opinion on the best way to do it.
- Someone looking for a little more sauce for their web project.
What are web animations used for?
Web animations can be used for a whole lot of things. You can use web animations to enhance a user’s experience on the web. They are used on everything from small HTML Banners to full fledged applications and websites. Here are some really cool sites that have used web animations to make their site stand out from the rest.
The Many Options of Animation
There are plenty of ways to create awesome looking animations. You can either do it in Javascript or CSS and whichever you choose there are a bunch of libraries out there than can simplify the process. In the next section I will be going over my favorite animation library (Greensock) but until then here is a small sampling of the other available libraries.
- Velocity.js — A robust Javascript library that has high performance.
- Snap.svg — Great for creating SVGs directly within your code and makes animating pre-existing SVGs easy.
- AniJs — Allows you to add animations to your project without coding.
- Anime.js — A lightweight alternative to your standard Javascript animation library.
- Animate.css — An easy to implement collection of css animations that can be used out-of-the-box.
- GreenSock (GSAP) — My favorite animation tool. More details on this one below:
GreenSock (GSAP) — My Favorite Animation Tool
Greensock is a Javascript library that handles HTML animations. Before using Greensock or GSAP for short you should have at least a basic knowledge of HTML and Javascript. There are plenty of animation libraries out there but I prefer using GSAP for the following reasons.
- It’s super fast — GSAP just handles animations smoother than most of its competitors. You can check out the speed test here.
- Support — The GSAP forum is a great place to ask questions as well as a great resource to find out cool tips and tricks.
- Cross-Browser Compatibility — GSAP runs great on just about all of the modern browsers right out of the box.
- Community — GSAP has been along for a while now and it also has plenty of users within the development community.
- It’s easy to learn — As long as you know some basic Javascript you should be able to learn the basics of GSAP in an afternoon.
If you need anymore convincing here are some awesome things that are built using GSAP.
Best features of GSAP
Tweens
GSAP’s main job is to handle the “Tweens” which is basically short for “in-between”. This means that if you want to move a red box 300px GSAP will handle how the box looks until it gets there.
Its really simple how GSAP handles this:
TweenMax.to(box, 1, {left: ‘+=300px’})Timelines
So what happens when you have to control multiple Tweens? Well I am glad you asked. You use timelines! GSAP has this great built in functionality called Timelines that help you handle multiple Tweens in order. Here is how GSAP handles Timelines:
var tl = new TimelineMax();
tl.to(box, 1, {left: ‘+=300px’})
.to(box, 1, {top: ‘+=300px’})
.to(box, 1, {left: ‘-=300px’})
.to(box, 1, {top: ‘-=300px’})Plugins
Along with handling Tweens and Timelines GSAP also has a bunch of plugins that allow you to do some really cool stuff right out of the box. Below are just a few examples of the many plugins that the makers of GSAP created.
Learning Resources
So you may be asking. Where do I go from here? Where can I learn the awesome powers of web animations?! Well you’re in luck, here are a couple of places to start.
This article was contributed by Joseph Go Chua, a Front-end Developer at Wildebeest.
