Tobias Ahlin / Blog

@tobiasahlin

Meaningful Motion with Action-Driven Animation

Read more

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.

Read more

Data visualization with Chart.js: An introduction

Read more

You can tell powerful stories with data. If you want to visualize data in a blog post, on your site, or in a presentation, there are a few libraries out there that can help you achieve stunning results with relatively little work.

Chart.js is one of those libraries. When I’m teaching data at Hyper Island, this is one of the essential tools that’s included in the Data Strategist program. Although less flexible and capable than D3, it’s easier to wrap your head around and to get started with, yet powerful enough to cover more than just your basic needs. In this introductory tutorial we’ll build an interactive graph and get a brief overview of the framework’s cababilities.

Read more

10 Chart.js example charts to get you started

Read more

Chart.js is a powerful data visualization library, but I know from experience that it can be tricky to just get started and get a graph to show up. There are all sorts of things that can wrong, and I often just want to have something working so I can start tweaking it.

This is a list of 10 working graphs (bar chart, pie chart, line chart, etc.) with colors and data set up to render decent looking charts that you can copy and paste into your own projects, and quickly get going with customizing and fine-tuning to make them fit your style and purpose.

Read more

Moving along a curved path in CSS with layered animation

Read more

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.

Read more

How to animate "box-shadow" with silky smooth performance

Read more

How do you animate the box-shadow property in CSS without causing re-paints on every frame, and heavily impacting the performance of your page? Short answer: you don’t. Animating a change of box-shadow will hurt performance.

There’s an easy way of mimicking the same effect, however, with minimal re-paints, that should let your animations run at a solid 60 FPS: animate the opacity of a pseudo-element.

Read more

Animating Link Underlines

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).

Read more

Infinite Scroll With Jekyll

Read more

If you want to use Jekyll but don’t want to settle with a list of links to your blog posts, I just open sourced the parts that drives this blog’s infinite scroll. As I mentioned in Moving from WordPress to Jekyll, the implementation is built around collecting the links to all blog posts in a JSON file, and using that to load more posts as you scroll.

If you’d like to add this juicy feature to your Jekyll site, head over to GitHub and grab the source, and let’s get started.

Read more

Chaining in jQuery

Read more

Chaining in jQuery let’s you write code that is faster to execute, easier to read, and easier to maintain. Even if you haven’t heard of chaining, if you’ve worked with jQuery it’s likely that you’ve already seen jQuery code utilizing chaining.

So what does it look like? Let’s compare two snippets of code—they accomplish the exact same thing, but one uses chaining, and the other one doesn’t:

Read more