According to this, the forthcoming Clearleft redesign will be totally on fleek.
Tuesday, February 21st, 2017
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.
Sunday, September 25th, 2016
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!
Monday, July 25th, 2016
I’ve noticed a few nice examples of motion design on the web lately.
If you want to see some swishy animations triggered by navigation, the waaark websites has them a-plenty. Personally I find the scroll-triggered animations on internal pages too much to take (I have yet to find an example of scrolljacking that doesn’t infuriate me). But the homepage illustrations have some lovely subtle movement.
When it comes to subtlety in animation, my favourite example comes from Charlotte. She recently refactored the homepage of the website for the Leading Design conference. It originally featured one big background image. Switching over to SVG saved a lot of bandwidth. But what I really love is that the shapes in the background are now moving …ever so gently.
It’s like gazing at a slow-motion lava lamp of geometry.
Sunday, June 26th, 2016
Saturday, April 30th, 2016
Friday, April 1st, 2016
Here’s an interesting proposal from ppk: use
requestAnimationFrame to gauge how performant a browser in behaving and then enhance accordingly.
Sunday, February 21st, 2016
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.
Wednesday, February 3rd, 2016
You can do anything with CSS these days.
Sunday, January 24th, 2016
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!
Wednesday, January 6th, 2016
A nice self-contained script for animating items into view as the document scrolls.
(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”.)
Tuesday, August 25th, 2015
Building the dConstruct 2015 site
I remember when I first saw Paddy’s illustration for this year’s dConstruct site, I thought “Well, that’s a design direction, but there’s no way that Graham will be able to implement all of it.” There was a tight deadline for getting the site out, and let’s face it, there was so much going on in the design that we’d just have to prioritise.
I underestimated Graham’s sheer bloody-mindedness.
I love that. Even with the focus on the gorgeous illustration and futuristic atmosphere of the design, Graham took the time to think about the absolute basics: marking up the content in a logical structured way. Everything after that—the imagery, the fonts, the skewed style—all of it was built on a solid foundation.
There’s plenty of CSS trickery going on:
opacity. But for the icing on the cake, Graham reached for
canvas and programmed space elevator traffic with randomly seeded velocity and size.
Oh, and of course it’s all responsive.
So, putting that all together…
The dConstruct 2015 site is gorgeous, semantic, responsive, and performant. Conventional wisdom dictates that you have to choose, but this little site—built on a really tight schedule—shows otherwise.
Thursday, July 30th, 2015
A detailed and humorous deep dive into motion design and spatial depth in digital interfaces.