Just like the difference between CSS Transitions and Animations is about control, so is the difference between CSS and JavaScript. Although more demanding to write, using JavaScript allows you to create more complicated animations. It can do things that CSS simply isn’t capable of.
Creating animations with JavaScript is, by comparison, more complex than writing CSS transitions or animations, but it typically provides developers significantly more power.- Paul Lewis and Sam Thurgood, Google
JavaScript also allows you to trigger animations with user actions, like clicking. This kind of interaction can be very useful for giving users feedback to show success on a certain task.
It also lets you build beautiful, complex animations that are more like works of art than pieces of code. These may be fun to look at and intriguing to dream up, but remember to keep your animation focused on a purpose. This is animation with destination, not MOMA.
Need to brush up on your JavaScript? There are plenty of resources available from websites like W3 Schools and the UGA New Media Institute.
And here’s a (not-so) secret: there are tons of JavaScript animation libraries out there to help you incorporate some of that complexity without getting too down and dirty in the code.
Animating On Click
One helpful thing JavaScript can do is have an animation that triggers with a click. You can still build the animation in a simpler format like a CSS Transition or Animation, but a few lines of code can help take it up a notch.
To take a peek at how little code is involved, check out this Codepen from TheTallWeeks.
See the Pen Trigger CSS3 animation on click by thetallweeks (@thetallweeks) on CodePen.
This is the caption.
Animating on click is nifty, sure, but how can it be useful? One great example is user feedback. Here's an example we made to demonstrate how an interaction from a user can elicit feedback:
See the Pen on click by Kendall (@kalake96) on CodePen.
This is the caption.
Again, if you take a look at the code here, you can see how JavaScript isn't too scary at all. The core of these two animations is still the same CSS that we have been working on so far.
Other Animation Libraries
To keep things simple, you will want to stick to libraries you can add through a CDN in your code document rather than other methods like “yarn” or “bower” which require you to get messy in your computer terminal.Jquery
According to UGA New Media Institute, the easiest way to animate with JavaScript is to start with the library jquery. We aren’t trying to reinvent the wheel, here, >so take a look at their lesson to learn more.
Animate On Scroll
Animate on Scroll This library is easy to set up and creates a simple but stunning effect. You can see we used this to make elements enter on scroll on our homepage.
Anime.js
One of the most popular and powerful animation libraries available is Anime.js. This library provides tons of getting-started materials including elaborate documentation and a range of examples. Check back soon on flUX for a deeper dive into the wonders of Anime.js.
Here’s one example that shows the intricate and beautiful animations you can create.
See the Pen Modern retro - IBM THINK by Mikael Ainalem (@ainalem) on CodePen.
This is the caption.
Of course, this just barely skims the surface of only three libraries. There are a practically endless number of options out there, so get out there and explore! In flUX's next update, we will cast a wider net to learn more about the world of animation libraries.
Application Activity
Time to put things into action. Here are a couple of ideas for how you can use your new skills to get them to stick:
- Consider what other situations it may be useful to have an animation/transition triggered by a button. Think about it, then create one of your own!