Copy
Becoming an undercover animation hero plus inspiration, resources & links.


 

There's one particular question that I get asked most often about UI animation. After nearly every talk or workshop I do, someone asks a variation of this question:

"How do I convince my teammates (or boss, or client) that we should be using animation in our work?”

That's a tough challenge. It can be lonely as the only member of team animation in your office. 

The way to bring them around is to slowly but surely bring animation into your design discussions. Be an undercover animation hero! 


Here’s how: 

Show and tell

Share the articles or examples you find that highlight animation being used effectively. When you come across examples purposeful animation in your favorite apps or sites, share that with your teammates as well. 

Appeal to their competitive side

Keep an eye on your competition and see where (or if) they use animation. Make a case for how you could use animation more effectively than they are in your company’s work to stand out. It’s totally cliché, but appealing to your team’s sense of competition is a highly effective motivator! 

Don’t wait for permission 

Don’t wait for anyone to ask for storyboards or animated prototypes, just make them! Include storyboards with your design explorations. Prepare an animated prototype and present it with your usual static deliverables. Back these up with an explanation of how those animations improve the user experience. The first rule of UI animation is to have purpose. Show them that, and you’ve made a rock-solid case. Go, you!

- Val

News, tools and inspiration!

Adobe's Project Comet joins the crowded prototyping scene

Even More Prototyping Tools

Invision has thrown its hat into the ring of UI animation prototyping tools. And just this week, Adobe announced Project Comet as their new prototyping tool too. With so many different players, we can expect some big improvements in our web animation prototyping options soon! 
 
A little motion design inspiration

Motion Design Inspriation

Watch the Inframe Title Sequence for a little motion design inspiration. Lovely shapes, colours and fluid motion. It's hard not to imagine an SVG version of these animated shapes! For more insipring motion design, check out Wine After Coffee's Vimeo collection.
 

Inspiration 


Halo Waypoint Visualizer #webgl #dzy
3D particles flock together to form halo helemts with an especially nice wavy timeline interface from Active Theory

Sequoia's new web site #inspiration #uianimation #dzy
A little texture, fluid animation and solid art direction. Bonus points for keyboard accessibility too. Nice work from Instrument.

YUME Chrome Experiment #webaudio #experiment
Control the music and animation by interacting with the floaty shapes in this interactive music exploration from Whitevinyl.


 

Learning 


Timing and Spacing explained in 50 seconds #theory #animation
The all important classic principle explained and demonstrated by Richard Williams, Author of The Animator’s Survival Kit. (One of my favorite classic animation books!)

Animation in Responsive Design #slides
My slides from Responsive Field Day. Or watch the 5 minute video verison if that's more your style.

GASP + SVG for Power Users Part 3 
#tutorial
Another installment on advanced SVG animation from the super cool Sarah Drasner. This one covers all the newest GASP features and how to apply them to SVG.

Physics for Motion Design #podcast
In Episode 7 of Motion and Meaning Cennydd puts his Physics degree to good use explaining the physics concepts that are most useful for creating realistic animation. I learned a lot recording this episode! 

 

Tools 


GreenSock’s MorphSVG Plugin #SVG #JavaScript
Morph from one SVG path to the other. Even if the two paths have  a different number of points! (What!?) It’s currently in private beta, but I have it on good authority it will be released publicly in the next few days. Here's one example of what it can do.

Popmotion JS physics library #library #JavaScript
physics, animation and input tracking! This could be a useful one. Their docs breakdown how the library works in great detail too.

Sketch to Principle Tutorial 
#sketch #tutorial
Sketchapp TV shows you how to go from Sketch to Principle for Mac to make an animation prototype.

 
I'll be speaking at CSS Dev Conf, Oredev and edUi in the next few weeks. If you're there too come say hi! 

Like the UI Animation Newsletter? Share it with your friends:
Tweet
Forward
 
Workshop: The UX of Great Animation
Join me for a workshop on animation & UX at edUi 2015! 
Copyright © 2015 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