The role of enhancements + tutorials & resources | View in your browser
The UI Animation Newsletter

Web Animation = Enhance!

I just returned from An Event Apart Orlando, which was a stellar conference all-around, but there is one particular moment that has stuck in my head. In Jeremy Keith’s talk he showed this slide outlining a 3-step approach to progressive enhancement:

The three steps to progressive enhancement
  1. Identify core functionality
  2. Make that functionality available using the simplest technology
  3. Enhance!

This simple approach is refreshing in contrast to the arguments that sometimes surround progressive enhancement. The thing I appreciate the most about this list though, is how it treats all three steps as equally important to create a whole experience. All three. Even the enhancements.

Web animation sits squarely in the “Enhance” step of progressive enhancement which means it’s sometimes referred to as just an enhancement. When it’s framed as just an enhancement it becomes easy to say that animations are just extra. They’re just fluff or just decoration. (Sounds like something you’ve maybe heard in meetings before?) And that train of thought leads to progressive enhancement being used an excuse to not to bother with animation at all.

But that’s not what progressive enhancement intends (at least not in my mind, or in the approach Jeremy outlines). All three steps are equally important. The enhancements, like animation, add real value to the experience. The project would not be complete without well crafted enhancements.

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. (There’s a whole chapter in Designing Interface Animation on animating responsibly if you want to be extra sure you’ve got that covered.)

For more on this 3-step approach, check out this video of Jeremy’s talk from earlier this year. It’s a great way to end the week.

Now on to this week's links and resources! 

- Val Head
Editor In Chief


UI Animation of the week:

lava lamp webGL scroll effect

Shtick’s scroll transition

This lava-lamp like effect is definitely a surprise when you start to scroll this site and it’s pulled of with great skill too. It uses WebGL and a displacement map to create the effect. Very cleve!


WebGL particle world #3d
3D and particles are like a match made in heaven. I really could never get sick of particle demos. This one has two different views you can toggle with the space bar while you soak in all the particle goodness.

I Am Here trailer #motiongraphics 
A beautiful and foreboding trailer for Eoin Duffy’s upcoming animated film. I’m a big fan of Eoin’s animation and illustration style.

From “Voice and Tone” Guidelines to UI Animations #design
Inspired by the recent UI Animation Newsletter issue on voice and tone, Markus walks you through how he got from his company’s voice and tone to specific animation styles. It’s a great read on connecting the dots between voice and tone and animation.

Animography letters on codePen #SVG #typography
Type away and see the SVG letters animate in as you go! Each was exported from After Effects using the bodymovin’ plugin and there’s even a panel to adjust the colours and such. Very nice!


SVG Path Syntax Guide on CSS-Tricks #SVG #browsers
Path data hover animations with CSS! How crazy is that? It’s Blink-based browsers only at the moment (Chris explains more in the article) but manipulating SVG paths in CSS is a very very interesting prospect. Check out the helpful notes from Amelia AB in the comments too.

CSS Mask Transitions effect #CSS
A CSS Mask effect demo from Codrop that fades one image into the other in a blobby way that's reminiscent of the Shtick site’s effect. 

Reactive Animations with CSS Variables talk #video 
This JSConf Iceland talk from David Khourshid explores the power of CSS variables for creating dynamic animations that react to user input.


New mo.js released #library #JS
Mo.js continues to impressive with their lovely demos and examples. An updated version was just released which includes some performance improvements, changes to the stagger method and more.

Choreography JS library #JS
A simple library to help take care of complex CSS animation from Christine Cha. It seems to mostly focus on helping with CSS animations that are based off of the mouse or scroll position in CSS, but those are two useful things.

Upcoming Web Animation Workshops

Web Animation 0 to 60
Nov 14 & 15, Austin, TX
Dec 8 & 9, NYC, NY
Everything web animation with myself and Sarah Drasner!
Two cities for a brand new workshop with Sarah Drasner and Val Head covering everything web animation from CSS, to JS to SVG.

CSS Animation Workshop with Eric Meyer!
Nov 17 & 18 2016, Boston, MA
The most in-depth CSS Animation workshop out there! 
A very special O’Reilly workshop taught by me and Eric Meyer. Eric will cover everything there is to know about the code bits of transitions, transforms and keyframe animations on day one, and day two I’ll cover design and UX considerations.

Tweet this issue
Share this issue with a friend

Follow me on Twitter for more web animation news and resources.
Copyright © 2016 UI Animation Newsletter, All rights reserved.

Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list

Email Marketing Powered by Mailchimp