Copy
The UI Animation Newsletter
vol 18.30 • Aug 17, 2018 • Twitter / Subscribe / Archives 

Happy Friday! This is one of those Fridays where I can’t even remember what happened on Monday. If you’ve had a super busy week too, I recommend starting off with the 100 days of motion design article below. It’s full of positivity and pretty motion to perk up your day.

If a little math sounds more like your Friday style, check out the UIKit springs article. It gets into some great detail on spring animations which are useful even if you’re not doing them for iOS specifically.

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

Volt for Drive

The glowing particle outlines and touch of parallax rotation set the mood on this site, while the full page transitions keep the content connected. All the detailed bits of motion work together really well on this one. And it’s all pulled off with a clever mix of SVG, canvas, and GSAP under the hood.

INSPIRATION

Dot menu animations
These animations might be little, but they bring a whole lot of life to simple dots and lines with motion! (Click the debug button for a behind the scenes look at how the effects are accomplished with stroke offsets.)

squid vine

Vine squid
An interactive and colourful vine by Jacob Foster with an under water feel. 

The handbook download animation
A very fun and glowy isometric hover effect from Yancy Min.

LEARNING

100 days of motion design
Tiantian Xu wrote about how she learned to animate by making 50 vector animations in 100 days. It's a fun read and the animations are lovely too!


Fake 3d with depth map
A cute pug with a very life-like hover effect. Made with canvas and depth maps by Robin Delaporte.

 

The Keyframers make a turntable animation
Watch the Keyframers (Stephen Shaw and David Khourshid) code up a 3D turntable with CSS live right before your eyes.

 

Demystifying UIKit spring animations
An in-depth look at the math behind iOS spring animations and how to make them look more natural by Christian Schnorr. One of the key tips: if your spring has a set duration, it’s probably never going to look quite right. 

UPCOMING EVENTS:

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

Animation in Design Systems workshop
UX Week, August 22, 2018

AEA Chicago
Aug 27 - 29, 2018

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.