Do thing?

Cancel

Do it

How do we animate interfaces in ways that are not just beautiful, but meaningful? When we add motion to interfaces we want to in one way or another improve the user experience, be it through aiding the comprehension of a concept, setting the mood, improving the perception of speed, or directing the attention of a user. Regardless of the intent of the animation, when animations fail to be meaningful they often fail because of the same reason; failed animations simply visualize objects morphing between being hidden and visible, rather than visualizing the actions unfolding on screen. A window rarely just closes or opens; a message is sent, a draft is discarded, an item is used.

This is essentially state-driven animation vs. action-driven animation. By applying action-driven animation you can catch yourself in the act of creating something that’s not as meaningful as it could be. Are you simply morphing between states, or are you visualizing actions? Meaningful motion is about clear and engaging storytelling, and we can apply action-driven animation to remind ourselves when we’re straying from that path.

CSS animations and transitions are great for animating something from point A to B. That is, if you want to animate along a straight path. No matter how much you bend your bezier curves, you can’t make something move along a curved path by applying an animation or a transition to an object. You can overshoot with custom timing functions, and produce spring-like effects, but the relative movement along the X and Y-axis will always be identical.

Instead of turning to JavaScript for producing more natural-looking motion, there’s an easy way to work around this limitation: layered animation. By using two or more objects to drive an animation, we get fine-grained control over an object’s path, and can apply one timing function for the movement along the X-axis, and another one for the Y-axis.

If you’ve been looking through Google’s directory of Web Fonts in search for fonts to use in your next project, you might have felt your inspiration quickly drain. It can be difficult to imagine how a font would look in use when you’re left with a long list of black text on white.

I built Typesource to make it easier to find and match Google Web Fonts. I’ve carefully crafted each example, exploring different styles, combinations, and color schemes in every composition. In addition to the feed of inspiration, the HTML/CSS is available for all examples, so you can copy and paste the code into your project and quickly get started with your web type compositions.

Kalle Persson and I just built and released a small utility app for OS X. Loremify is a free mac app to quickly copy Lorem Ipsum to your clipboard. It lets you wrap the dummy text in html or markdown, specify the amount of text, and copy it to your clipboard—all in one click. It sits in your OS X menu bar, and it’s available on the App Store.

I recently added a simple visual effect to this blog that I quickly fell in love with: when you hover blog headers, the link’s underline is revealed by animating it out from the center. You can try it in the banner above.

Creating this effect is surprisingly easy, doesn’t require any additional DOM elements to be added through HTML, and falls back nicely for browsers that don’t support CSS animations (it will just show up as a regular underline).

While hacking away at Infinite Jekyll the other week, I needed to show a loading indicator while fetching new posts. It had to be open-sourced though, and available in retina resolution. I couldn’t find any decent spinners, so instead of sitting down in Photoshop and creating two GIFs, I turned to CSS animations and created a simple, repeatable, loading animation.

If you’re ever creating user interface mockups for desktop apps or web apps, you’ve likely been looking for mouse cursors to demonstrate different ways of interacting with your design. I have, at least, but have had a hard time finding pixel perfect PNGs.

I dug around in OS X’s System Library and managed to find the vectors used for rendering the most common cursors (including for pointing, drag and dropping, resizing, etc.), and exported them all as PNGs. If you can’t find the cursor you’re looking for in the table below, I’ve prepared a zip with all cursors.