Copy
The UI Animation Newsletter
vol 19.18 • May 10, 2019 • Twitter / Subscribe / Archives 

Happy Friday! I spent most of this week at An Event Apart Boston, where I did a talk about making motion inclusive with things like the perfers-reduced-motion query and the Web Content Accessibility Guidelines. It was a fun event and I had lots of great chats about animation and accessibility over the three days of the conference.

This week’s issue features a handy demo on how to handle focus and animation from Marcy Sutton, as well as a look at animating icons and Grid. Plus some cute and fun animal-themed inspiration too.

Until next week,

- Val
 

p.s. Replies go straight to my email, and I read them all. Tell me about what you’re working on.

 

 

UI ANIMATION OF THE WEEK

Petbarn Identity

I’m breaking my own rules for this one. It’s not a UI animation at all, but the way animation is used in this pet store's branding is really well done. The pet animations have so much character and illustrate the different animal behaviours perfectly. Scrolling through these will totally make your day.

INSPIRATION
a penguin you can stretch

Stretchy penguin
An SVG penguin character that you can stretch! Fun interactive animation times from Chris Gannon.

A menu that unfolds in front of you

The more menu
A unique menu animation using clip-path to make an irregular shape and an unfolding effect.

A morphing dashboard interface concept

Smart home controller
Some very smooth transitions and shape morphs come together in this UI concept by Ramotion.

LEARNING

Managing focus with animation
Marcy showed this demo at AEA Boston this week, and it’s a great example of using the transitionEnd event to move focus for keyboard interaction after content has animated into view. (There’s a bonus cute dog too!)

 

Animating Grid in Firefox 66
A look at the animatable Grid properties along with a look at performance implications and what happens in other browsers that don’t support these properties yet.

 

Fading out siblings on hover
A neat CSS trick for making your hover states stand out from Trys Mudford.

 

Designers guide to animating icons with CSS
Shannon Thomann walks you through how to animate SVG icons with CSS and provides lots of examples along the way.

 

 

UPCOMING EVENTS:

I’ll be at these events in the next few months. If you’re there too, come say hi!

An Event Apart DC
July 29-31

Clarity
San Francisco, Aug 20-21

An Event Apart Chicago
Aug 26-28

Support the UI Animation Newsletter: 
Submit a link for a future issue  or  Share it with a friend

Copyright © 2019


You can update your preferences or unsubscribe from this list here.