Copy
The UI Animation Newsletter
vol 18.29 • Aug 10, 2018 • Twitter / Subscribe / Archives 

Happy Friday! If you’ve been looking for a good weekend tutorial, the neon SVG effect or dragging math ones below might be what you’re looking for. And if you need a little something to make your Friday morning just a bit more fun, this week’s UI animation of the week site should do the trick. 

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

Mariano Pascual

Wow, this is pretty darn impressive personal portfolio site. Lots of fun hover animations in a friendly illustration style. The sound design is great too. Don’t miss the easter egg animation when you leave your browser idle for a little while. All in all a really fun site. (The Explorer section might be a bit NSW though.)

INSPIRATION
A fancy boxy menu

Slide box menu
A slick menu reveal animation from the folks at Codrops. 

A loader that's waiting for you

Foot tap loader
There’s something fun about a loader that seems more like it’s waiting for you. This foot tapping loader animation by Darin will make you smile.

CSS mustached nanny
A very intricate scene with some interesting characters! All done with CSS by Julia Muzafarova.

LEARNING

How to fix a dragging animation with math
Interactions like dragging can come with a lot of expectations around how objects should behave. Getting the physics right with a little math can make all the difference in making a satisfying animation.

 

Creating and SVG neon effect
An in-depth tutorial from Nils Binder that walks you through the whole process from drawing the artwork to animating the SVG effect. The secret ingredient for this effect is SVG filters and CSS animation.

 

Splitting.js
Split words or characters and more using CSS vars with this little library from Stephen Shaw. He even has this handy set of examples to show what it can do.

 

Gilbert spiral
A fun spiraly animation of an SVG colour font. Colour fonts seem pretty darn cool if you ask me. (Be sure to check this one out in Firefox though, Chrome doesn’t support them at the moment.)

 

Polyhedra Viewer
This viewer by Nat Alison is super fun to play around with, and it’ll make you feel smarter while you do it!

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.