Carbon’s motion guidelines, letter effects, masks vs clipping
The UI Animation Newsletter
vol 17.21 • June 9, 2017 • Twitter / Subscribe / Archives 

Carbon keeps it short and sweet

A recent chat about design systems this week reminded me of how much I like the motion section of IBM’s new Carbon Design SystemIt’s a great example of creating a solid foundation for animation in a succinct and friendly way.

Their motion guidelines aren’t long, there are just two sections:

  • Principles (the traits all animation in the design system should have.)
  • Guidelines (specifics on duration, easing, and performant properties.)

And in just those two sections, Carbon manages to address both current and future animation needs.

By including a simple custom easing palette—their own custom Ease-in-out, Ease-out and Ease-in—and setting duration guidelines, all animations in the design system will have a shared feel and style. These guidelines will encourage quality animation choices, and save time when authoring animations for immediate results. 

Carbon’s Principles section helps make these motion guidelines more adaptable and future-oriented. (This is the part you don’t always see in other of style guides or design systems.)

At some point there will likely be a need for new interactions or more animation options than the current guidelines cover explicitly. But thanks to the high-level motion principles, this document can still offer guidance.

Their motion principles can be used to evaluate potential additions or exceptions to the design system by asking “Does it fit with our motion principles?”. This ensures the design system can adapt to future needs without having to completely start over.

If you’re looking for a concise yet effective pattern to follow while creating your own motion guidelines, Carbon’s Motion section is a good one to consider.

Until next week,

- Val Head  

p.s: My motion in design systems session is now on UIE’s all you can learn site. Worth a watch if you’re thinking about getting motion in your style guide or design process too.

Stained Glass interactive music video

Stained Glass interactive music video

This animated music video for the band Real Estate let’s you colour in the kaleidoscope-driven scenes as it plays through. It’s really fun to colour things in as they animate. The project is made mostly with canvas, plus a dash of CSS animation for some of the interactions.

CNN colorscope

CNN colorscope
A wonderfully animated video about the colour green by Jr. Cranest. The animation is expressive and engaging even with the extremely limited colour palette.

Red Paper Hearts pinball game

Pinball performance
What’s more fun than pinball? How about a pinball game that puts on an animated show? Red Paper Hearts pairs lively and engaging animation with a classic pinball cabinet for some addictive looking fun. The animations really make the game more exciting for anyone watching the player.

letter effects

Letter effects and interaction ideas
A fun collection of animated and interactive letter effects by Mary Lou from Codrops. These effects mix creative ideas with fancy new tech like CSS Variables and CSS Grid to boot.

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


Masks vs clipping
A helpful article from Sarah Drasner on the difference between clipping and masking. Both are really useful for animation too!

On-scroll morphing background shapes
An interesting tutorial from Codrops that shows you how to create background effects with SVG shapes that morph as you scroll.

Creating YinYang loaders on the web
Ana Tudor walks you through how to animate a yingyang loader with as little code as possible and no external libraries. It’s full of lots of interesting tidbits.


Check CSS animation performance in browser dev tools
Maria Antonietta Perna shows how to troubleshoot web animation performance using Firefox’s dev tools.

New Framer workflow
Framer came out with a major update last week. This article picks out some of the most useful features that have been added.

iOS UI kit for (new) Framer
A handy UI kit if you’re prototyping iOS projects in Framer. It even includes a few pre-built animations to work off of.


Come learn everything web animation with Val Head and Sarah Drasner in a city near you: 

Web Animation Workshops Toronto
June 12 & 13, 2017  

Web Animation Workshops Paris
Sept 4 & 5, 2017

Web Animation Workshops Portland
Sept 18 & 19, 2017

Copyright © 2017

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