Copy
The UI Animation Newsletter
vol 19.23 • June 20, 2019 • Twitter / Subscribe / Archives 

React or Vue? We’ve got both in this issue, so you don’t have to decide. This week’s issue features animating string vibrations in React, animated page transitions in Vue, two cute character animations, and a guide to animating for UX. Happy Friday!

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
Lecabcom

Lecabcom #dzy

I love the way the abstract shape illustrations animate along with the slide transitions. It's a little bit random but it has a whole lot of personality. The abstract shapes appear throughout the site and are all SVG animated using Lottie.

INSPIRATION
A glowing CSS lantern

CSS-only animated lantern
This lantern looks cooler than any lantern I own, and it’s made with CSS!

Eyeballs w/zdog
I can’t decide if this one is cute or creepy, but either way it’s a very fun Pen from Neal Agarwall.

The circular menu
We don’t see circular menus all that much, and maybe that’s for good reason. But in any case, this one has some nice snappy animation and staggers to make it that much more fun to use.

Cookie character
A cute little animated character eating a cookie by Chris Gannon.

LEARNING

Animated Interactive Vue.js Slider
This tutorial walks you through creating a nice swipe loading effect with a staggered timeline. It goes through all the code step-by-step and provides a finished demo for reference.

 

String vibration physics animation with React
See how to implement a physics-based animation in React with SVG and a little bit of oscillation theory.

 

Designer's guide to adding animation in UX design
A short list of key ways animation can support UX goals with lots of examples by Jolina Landicho.

 

Draggable menu with image grid previews
A neat draggable masking animation demo from Mary Lou at CoDrops using TweenMax and Draggability.

 

A behind the scenes look at character animation 
This Instagram video gives you a sneak peek into the internal process and set up of a character animation.

 

UPCOMING EVENTS:

I’m super excited about these upcoming events. If you’ll be at one of these too, come say hi!

An Event Apart DC
July 29-31

Clarity
San Francisco, Aug 20-21

An Event Apart Chicago
Aug 26-28

Smashing Conf
Freiburg, Sept 9-10

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.