Copy
The UI Animation Newsletter
vol 18.32 • Aug 31, 2018 • Twitter / Subscribe / Archives 

Happy Friday! (And happy long weekend too if you’re celebrating Labour Day weekend.)

If you’ve been working on making animation part of your team's design process, you’ll like the Putting gears in motion article below. It's always helpful to hear about how other folks have approached things.

On the more mathy side of things, if you’ve ever wondered what ”lerping” was, Matt DesLauries explains this animation technique in detail in his Linear Interpolation article linked below. And there’s a lot more in this issue too of course!

Until next week,

- Val

p.s. Replies go straight to my email and I read them all. I’d love to hear about what you’re working on.

 

UI ANIMATION OF THE WEEK

Robin Mastromarino portfolio site #dzy

This one is a very impressive portfolio site. It has some unique horizontal scrolling, fancy distortion effects and even a little bit of parallax hover going on. 

INSPIRATION

Dog skateboard
This dog is going places! A very cute animation from the folks at Animade.

Carlton dance

CSS Carlton dance
A pixely good time, with or without music, by Grzegorz Witczak.

Vue.js London animation
Birds and triangles converge to make for a fun logo animation by Sarah Drasner.

LEARNING

Putting gears in motion: animation principles on the new Gravity Works website
A wonderfully detailed write up by Kurt Trowbridge on how Gravity Works made animation part of their design process and guidelines. It’s so helpful to read about other team's processes and how they made animation a meaningful part of their system and work.

 

Linear interpolation
A detailed account of how the animation technique of lerping works from Matt DesLauriers. He includes lots of examples with accompanying source code too.

 

Using CSS clip paths for interactive effects
A look at some neat effects and techniques using CSS clip paths by Mikael Ainalem. Not all the examples are animated, but there are lots of interesting ideas in this article.

 

mauerwerk
A React-spring driven masonry-like grid with enter, exit, and shared element transitions.

UPCOMING EVENTS:

I’ll be at these conferences in the next few months. If you’re at one of them too, come say hi! 

WebExpo
Prague, Sept 21 - 23, 2018

Design Matters
Copenhagen, Sept 26 - 27, 2018

 

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

Copyright © 2018


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