Articles by
Dan Wilson

Additive Animation with the Web Animations API

These features have not landed in any stable browsers at the time of writing. However, everything discussed is already in Firefox Nightly by default and key parts are in Chrome Canary (with the Experimental Web Platform Features flag enabled), so I recommend using one of those browsers (when reading this article) to see as many of the features in action as possible.

Regardless your preferred method of animation on the web, there will be times that you need to animate the same property in separate animations. Maybe you have a hover effect that scales an image and a click event that triggers a translate — both affecting the transform. By default, those animations do not know anything about the other, and only one will visually be applied (since they are affecting the same CSS property and the other value will be overridden).

(more…)

Animating Single Div Art

One thing that single div pieces rarely do is animate. If you can transform your div or one of its pseudo elements, that's fair (as Lynn Fisher does with her fantastic BB-8). But you cannot directly change the opacity or transform of the individual "elements" you create inside your div, since they are not actual DOM elements.

I am a big believer of trying something a little different and interesting to learn tools you otherwise might never learn. Working with the constraints of a single div might not be great for production work, but it can be a great exercise (and challenge) to stretch your skills in a fun way. In that spirit, we'll use this technique to explore how Custom Properties (CSS Variables) work and even provide us a path to animation inside our div.

Making Custom Properties (CSS Variables) More Dynamic

CSS Custom Properties (perhaps more easily understood as CSS variables) provide us ways to make code more concise, as well as introduce new ways to work with CSS that were not possible before. They can do what preprocessor variables can… but also a lot more. Whether you have been a fan of the declarative nature of CSS or prefer to handle most of your style logic in JavaScript, Custom Properties bring something to the table for everyone.

Most of the power comes from two unique abilities of Custom Properties:

  • The cascade
  • The ability to modify values with JavaScript

Even more power is exposed as you combine Custom Properties with other preexisting CSS concepts, like calc() .

(more…)

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag