What a great way to play around with CSS animations!
Friday, November 17th, 2017
Thursday, October 19th, 2017
The end result is really impressive but there’s still the drawback that the browser history will be updated every time you click on an image thumbnail (because the functionality relies on
ID attributes referenced via
:target). Depending on your use-case, that may or may not be desirable.
Monday, October 2nd, 2017
Monday, September 25th, 2017
I honestly think if browsers implemented this, 80% of client-rendered Single Page Apps could be done as regular good ol’-fashioned websites.
Having to reimplement navigation for a simple transition is a bit much, often leading developers to use large frameworks where they could otherwise be avoided. This proposal provides a low-level way to create transitions while maintaining regular browser navigation.
Well, this is simply delightful.
Wednesday, August 23rd, 2017
Alla looks at ways of documenting animations into a pattern library. I tell ya, her book is going to be unmissable!
Sunday, August 13th, 2017
119 slides from Sarah on a wide range of SVG magic (with code).
Sunday, June 4th, 2017
When I was in Düsseldorf for this year’s excellent Beyond Tellerrand conference, I had the pleasure of meeting Nadieh Bremer, data visualisation designer extraordinaire. I asked her a question which is probably the equivalent of asking a chef what their favourite food is: “what’s your favourite piece of data visualisation?”
There are plenty of popular answers to this question—the Minard map, Jon Snow’s cholera map—but we had just been chatting about Nadieh’s previous life in astronomy, so one answer popped immediately to mind: the Hertzsprung-Russell diagram.
Wednesday, May 31st, 2017
A really great overview of using
prefers-reduced-motion to tone down CSS animations.
This post was written by James Craig, and I’m going to take this opportunity to say a big “thank you!” to James for all the amazing accessibility work he has been doing at Apple through the years. The guy’s a goddamn hero!
Monday, May 1st, 2017
I love the way Guillaume Kurkdjian uses animation here to demonstrate how these gadgets from the ’90s would work.
Friday, March 24th, 2017
A ludicrously deep dive by Nolan into how scrolling works in web browsers. No, wait, come back! It’s more interesting than it sounds …and it certainly isn’t as simple as you might think.
For instance, do you know the difference between the following scenarios?
- User scrolls with two fingers on a touch pad
- User scrolls with one finger on a touch screen
- User scrolls with a mouse wheel on a physical mouse
- User clicks the sidebar and drags it up and down
- User presses up, down, PageUp, PageDown, or spacebar keys on a keyboard
If you ask the average web user (or even the average web developer!) they might tell you that these interactions are all equivalent. The truth is far more interesting.
This comes complete with lovely animated illustrations by Rachel.
Tuesday, February 21st, 2017
According to this, the forthcoming Clearleft redesign will be totally on fleek.
Wednesday, February 15th, 2017
A sweet CSS tutorial that Cassie put together for the Valentine’s Day Codebar.
Sunday, February 12th, 2017
A new media query that will help prevent you making your users hurl.
Friday, December 16th, 2016
Beautiful animation work.
Monday, December 5th, 2016
Monday, November 14th, 2016
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.
Friday, October 21st, 2016
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.
Saturday, October 8th, 2016
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.
Friday, September 30th, 2016
will-changeproperty 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.