Lesson learned, Disney thoughts expanded, plus inspiration, resources & links

To design great UI animation — the kind that has purpose and utility — animation has to be part of your design process from the start. That may sound like obvious advice, but it’s is a lesson I know I’ve learned the hard way more than once. 

An animation lesson learned the hard way: 
One that sticks in my mind is a web site project from a while back. We were a small team and we had animation ideas early on that we discussed from time to time, but we never storyboarded or prototyped any of it. We kept it as something we’d take care of later. 

As the project deadline came nearer we kept saying that we didn’t have time to dig into it right now, but we would definitely get to implementing those animation ideas later

I bet you can tell where this is going... 

None of our animation ideas made it into the final product. Budgets and timelines ran out, as they’re known to do, and we ran out of time. We had good intentions but we still treated animation like the icing on top, instead of an actual part of the design cake. 

Animation can’t be an important part of an interface if you don't treat is as an important part of the process. Lesson learned!

Getting more than “delight” from Disney's principles:
Speaking of learning things, I wrote an expanded version of What does Disney know about interface animation anyway? on Monday. If you missed it in the past issue or want to dig into more details, give it a read.

Now on to the links and resources!

- Val



Tools, learning, and inspiration!

A springy musical navigation

UI Animation of the week

It's a nav you've seen a million times, but not like this! Szenia Zadvornykh an extra dimension to his personal site with this fun springy and audio enhanced nav. The springy behaviour is carried through the page transitions too. The .gif barely does it justice, you really need to try it out for yourself!


FWA site of the year: Because Recollection #dzy #music 
Somewhere between a game and a site, Because Recollection sucks you right in to the experience they've created. It doesn't even matter if you've never heard of these bands before. The space bar button-filling interaction is especially fun.

SVG drums and guitar #SVG #sound 
Have a little jam session on your next coffee break with the playable SVG drum set and SVG guitar by Josh Ellis. You can play with mouse clicks or key presses. The "Ampall" and "Ruby" puns won't get past the musician types. 

Esviji SVG game #game 
A fun little game done all in SVG, which means it scales perfectly to any sized screen you play it on. There's more on how it was made on the github page too. 


Optimizing SVG for web use #svg #tutorial
This series on optimizing SVG gets really deep into the topic. Right down to the bezier points and how they shake out in the SVG source code!

Motion with meaning #uianimation
A solid article on the importance of keeping spatial relationships consistent and looking at the big picture when animating state transitions. Good stuff! 

Interview with the author of Animated Storytelling #motiongraphics
This book is on my reading list for 2016, especially after reading this interview. In it, Liz Blazer discusses why animation is such a good medium for storytelling.
Pointy Slider #tutorial #rwd
This tutorial walks you through creating a responsive slideshow with an interesting overlapping sliding transition effect.



Gentle intro to React Motion #tools #tutorial
If you use React a lot, React Motion might be useful for you. If React isn't your thing, the mathy bits behind the animation make for an interesting read (and can be used with other animation tools too).
Squall #iOS #AE
A tool for exporting After Effects vector animations to iOS code. Interesting! It's currently still in beta but if it does what it says it does, it's something to keep an eye on. 

Complex animation with #prototyping #tutorial
A tutorial on working with the easing functions in Definitely one to look at if you currently use, or have been thinking about trying, for your animation prototyping needs.


Follow me on Twitter for more web animation fun.
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