voice and tone for animation + tutorials & resources | View in your browser
The UI Animation Newsletter

Not sure what easing, timing, or other details to use for your animations? Voice and tone guidelines can help you find the answers.

Voice and tone documents can be a helpful source to inform how you design your UI animation. They’re especially helpful for getting past that “blank page syndrome” for animation ideas because they define a direction to aim for.

For example, if your voice and tone goals are to sound friendly and energetic, you could pair that with animation that uses overshoots or bounce easing to create a heightened sense of energy. Or perhaps use some squash and stretch to make the objects on screen appear softer and friendlier. 

If your voice and tone goals are to sound steady and strong, you could pair that with a steadier ease-in-out easing (a custom ease-in-out curve, of course) for animations that have a even and balanced feel to them.

Those are just two examples, but you can see where this is going: When your content and animation are working together to tell the same story, your message will be that much more impactful.

I talk more about the connection between animation and content in this video of my talk at Design and Content conference. (And it’s something I cover in Designing Interface Animation too.)

Now on to this week’s links and resources! 

- Val Head


UI Animation of the week:

Kikk Festival site

Kikk Festival site

The Kikk Festival site is a wonderfully art directed site that uses animation to enhance its concept. The zooming bubble in the background and the touches of glitchy animation throughout really give the site personality. The animations help give the site a feeling of depth and a sense of mystery.


How Pixar fosters creativity #creativity
Pixar is clearly doing something right when it comes to making creative work and this article summarizes how they make it happen. There’s lots of little bits of advice in this one. (You might also be into Ed Catmull’s book, Creativity Inc. I really enjoyed reading it earlier this year.)

SVG heat shimmer effect #svg #filter
A very creative use of SVG filters indeed! This shimmer will make any photo look like it was taken on a hot summer day.


Rotating Elements to mouse and touch location #JS #tutorial
Dudley Storey walks you through creating an element that rotates dynamically based on the current mouse or touch position. He also takes it one step further to create a smiley with dynamic googly eyes too. These are two useful tutorials for creating dynamic animation effects.

Slicing SVG 9 ways #svg #performance
Paul Lewis shows you how to create a performant, edit-friendly, animatable shadow using SVG and 9-slicing. He also explains why box-shadows negatively affect performance when they’re animated. Even if this solution isn’t for you, the bit about performance might be. (Note: one of his demo is Chrome only.)

3D with WebGL course from Keith Peters #course #3d
A comprehensive course from Keith Peters (who wrote some great animation books back in the Flash days). The course focuses on creating WebGL without any frameworks, covering the basics of 3d vertices, shaders, drawing modes, animation, interaction and transformations. If you’ve been wanting to dig into the guts of WebGL, this sounds like the course for you.


New Framer desktop features 
I just finished up a round of Framer prototyping for a consulting client and this was a feature I often wished Framer had while working on it. And now it exists for real! Apparently I wasn’t the only one wanted more flexibility when working on big screens.

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