Copy
The age old question + inspiration, resources & links | View in your browser
The UI Animation Newsletter

CSS or JS? - How I choose

One of the most common questions in web animation is which technology to use to built it. This most often comes up in the form of "Should I use CSS or JavaScript to animate this project?" A whole slew of factors ranging from performance, to ease of use, and even personal preference play a role in the answer.

In true “it depends” fashion, there are also many right answers to that question. (It would’t be any fun otherwise, right?) I have three rules of thumb that I use to help me decide if whether CSS or JavaScript is the best fit for a particular project:

1 - Are there a lot of chained animations? 
If I'm working on a group of independent animations, or short chains of animation CSS has got me covered. But, as a general rule, if I find myself chaining more than 3 animations together in a sequence I’ll opt for JavaScript over of CSS. You can do a lot with CSS keyframes by staggering delays and durations, but a JS solution will be more flexible and easier to edit in the long run. 

2 - Is the logic is complex?
When animations are going to be triggered by something more complex than a click or hover, I know I’ll have an easier time getting it done with a JavaScript solution. The same goes for animations that need to behave dynamically, or have a large number of potential states. In these cases a JavaScript solution makes handling the logic easier and the resulting interaction more reliable. 

3 - Is it SVG?
CSS can animate SVG which is super rad, but it’s currently limited to a short list of SVG properties and browser support isn’t consistent. (Boo!) So that really narrows down where you can use it in production. Thankfully this is changing, but for now if I’m animating SVG I use Greensock for more animation power and more consistency across browsers.

Of course, the question of which web animation technology to use can get even more nuanced than just CSS vs JavaScript. There are libraries and helpful third party tools out there for nearly every web animation situation. For a more in-depth look at all the web animation options out there, check out Sarah Drasner’s A Comparison of Web Animation Technologies article on CSS Tricks.

Happy animating!

- Val Head
(@vlh)


 

 

UI Animation of the week:

Oak Studio site

Anypixel.js Interactive Header

Both the build-in animation and the interactive animation of this header fit the Anypixel.js project perfectly. It’s a fun canvas animation that responds to your mouse position and animates the small shapes as you move around. It adds a bit of fun to a project that is definitely fun, and hints at the functionality of the project too. (It does some lose points in my book for not working in Safari though. Not sure what’s going on there.)

 


Inspiration

Material Boarding Pass
Boarding passes are a popular thing for desingers to try their hand at redesigning, but you don’t often see animated versions. Wouldn’t it be nice if online boarding passes looked this nice.

Slack Promo by Giant Ant
This short animated promo video for Slack has little bits of interface animating through real life tasks to show how much Slack can help make your work life easier. The way they show time passing throughout the video is really well done. And they do a great job showing a drastic contrast between the before and after states with both motion and colour.

Digital Ocean’s team animations
The Digital Ocean team have been posting animations they’re working on on Codepen as they go. It’s so nice to see teams sharing their work like this. And they’ve got some nice bits of animation in their collection too!


Learning

Improving the user flow through page transitions
This article walks you through how to create transitions between pages of a site to avoid the hard cut to load each new page as you’re navigating. This isn’t something every site out there should use, but if you’ve been looking for a good way to do it, this article breaks it down nicely. The examples all use barba.js which was created by the author for exactly this purpose. (It’s also conveniently jQuery free, so if you’ve been looking for a non-jQuery solution for creating page transitions you’ll want to take a look at this one.)

Web Animation API tutorials series updated
Dan Wilson wrote up a great series of tutorials on the Web Animation API last year and he’s recently updated them for changes in the spec and browser support that have happened since. If you didn’t get a chance to check them out last year, here’s your excuse to check out the updated tutorials.


Accessible SVG
This article doesn’t talk about animation specifically, but since animation can often involve SVG, knowing how to make them accessible will be very helpful. Heather Migliorisi digs into all the questions you ever might have had about accessibility and SVG.

Tools

Using Framer and SVG to create a lock-screen animation
This tutorial gets into a whole lot of detail on how to work with SVGs and manipulate SVG paths in Framer. It covers a couple of helpful modules to make the job easier too.

Sketch plug in for Atomic
Atomic (a browser-based animation prototyping tool) has made it easier to export Sketch files for use in Atomic prototypes. The ability to import files is a big plus for any prototyping too in my book!

Tweet this issue
Share this issue with a friend
CSS Animation course with Val Head

Upcoming web animation workshops: 

Animating The User Experience
July 20th - Design and Content Conference, Vancouver

Motion Design & Prototyping Essentials
Aug 10th and Aug 11th - UX Week, San Francisco

 

 
Follow me on Twitter for more web animation news and resources.
Copyright © 2016 UI Animation Newsletter, All rights reserved.


Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list

Email Marketing Powered by Mailchimp