Tags: animation

68

sparkline

Functional Minimalism for Web Design

According to this, the forthcoming Clearleft redesign will be totally on fleek.

CSS Beating Heart Tutorial. – Cassie Codes

A sweet CSS tutorial that Cassie put together for the Valentine’s Day Codebar.

An Introduction to the Reduced Motion Media Query | CSS-Tricks

A new media query that will help prevent you making your users hurl.

Xaviera López

Beautiful animation work.

KUTE.js | Javascript Animation Engine

This looks like an interesting little JavaScript library for scripting animations.

kdzwinel/progress-bar-animation: Making a Doughnut Progress Bar - research notes

This is a thorough write-up of an interesting case where SVG looks like the right tool for the job, but further research leads to some sad-making conclusions.

I love SVG. It’s elegant, scalable and works everywhere. It’s perfect for mobile… as long as it doesn’t move. There is no way to animate it smoothly on Android.

Building Social: A Case Study On Progressive Enhancement – Smashing Magazine

A step-by-step walkthrough of layering on enhancements to a site. The article shows the code used, but it isn’t really the code that matters—it’s the thought and planning that went into it.

Is animation “just” an enhancement? + WebGL effects & SVG paths explained - The UI Animation Newsletter  #16.30

Yes! Yes! Yes! Val nails the essence of progressive enhancement:

Never feel like it’s a waste to dedicate time to the enhancements; to put real thought and effort into your animations and what they’ll contribute to the experience. Progressive enhancement is all about freeing up your time to make the enhancements great once you’ve got that basic core functionality covered. That’s the path to making new and wonderful things on the web while also being responsible. It’s quite literally a way to get the best of both worlds.

GreenSock | “will-change” must change? Animators beware.

This will-change property that was intended to SOLVE problems for animators may end up doing the opposite.

It seems wise for the browsers to step back and let the spec authors fill in the implementation details and gain consensus before moving forward.

Web Animation Workshops

Val Head and Sarah Drasner have teamed up to offer a two-day workshop on web animation. If you have a chance to attend, do it!

Revisionist History Podcast

Malcolm Gladwell’s new podcast is very good: perfect for huffduffing. And I really, really like the website—lovely typography, illustrations, and subtle animations.

Sign O’ The Times - original video in pure CSS

This is quite wonderful: a recreation of the video for Prince’s Sign O’ The Times made entirely with HTML and CSS.

RAFP: a proposal for performance measurements through requestAnimationFrame - QuirksBlog

Here’s an interesting proposal from ppk: use requestAnimationFrame to gauge how performant a browser in behaving and then enhance accordingly.

hunt

This looks like it could be quite a handy (and relatively lightweight) script for attaching events—like animations—to an item’s visibility, so the events only trigger when the item is scrolled into view.

Jeremy Kard

You can do anything with CSS these days.

Revisiting the Float Label pattern with CSS — That Emil is Emil Björklund

A clever technique by Emil to implement the “float label” pattern using CSS. It all hinges on browsers supporting the :placeholder-shown pseudo-class which, alas, is not universal.

I was hoping that maybe @supports could come to the rescue (so that a better fallback could be crafted), but that tests for properties and values, not selectors. Damn!

ScrollReveal

A nice self-contained script for animating items into view as the document scrolls.

I’d like be interested to hear what Graham thinks of this code—he’s my go-to person for smooth scroll-based animations.

(I’m very confused by the tagline for ScrollReveal—”Easy scroll animations for web and mobile browsers”—eh? Mobile browsers are web browsers …”web” is not a synonym for “desktop”.)

Spatial Interfaces — Elepath Exports — Medium

A detailed and humorous deep dive into motion design and spatial depth in digital interfaces.

In Pieces - 30 Endangered Species, 30 Pieces.

Beautiful use of CSS transitions and transforms.

Also: CSS is officially the new Flash—”skip intro” is back.

Flying Toasters | After Dark in CSS

For people of a certain age, this will bring back memories of a classic screensaver.

If you had told me back then that the screensaver could one day be recreated in CSS, I’m not sure I would’ve believed it.