Copy
The UI Animation Newsletter
vol 19.27 • July 19, 2019 • Twitter / Subscribe / Archives 

Happy Friday! This week’s issue has animated planets and tarot cards, as well as tutorials on animating with React Hooks and using clip-path for fancy animated shape effects.

Before we dig into all of that, let’s take a minute to talk about one more principle of UX animation: Spatial Orientation.

Spatial orientation is the second principle I cover in my recent UX animation video series and it’s all about how animation can be used to show where UI elements are in virtual space, even when you can’t see them. This technique can be especially useful when you’re designing for the wide range of viewport sizes out there. Check out the full video for examples and details on how to use it in your own work.

Until next week,

- Val
 

p.s. Replies go straight to my email, and I read them all. Reply and let me know what you’d most like to learn about UI animation.

 

 

UI ANIMATION OF THE WEEK

Prior venue site #day

Swooping 3D ribbons and floaty text animations guide you through the story of this microsite. It’s made with Three.js and canvas, and there’s a hint of a custom cursor floating around in there too.

INSPIRATION
A circular planet picking menu

Planet picker
A neat circular SVG menu and animated numbers from the Keyframers. (You can watch them build this in the video link too.)

An illustrated and animated CSS storefront

CSS store animation
A fun loading animation that builds your online store by Mariana. All done with CSS.

Tarot bot #dzy
This site is full of bright colours and big animations. It definitely packs in a whole lot of personality.

LEARNING

Intro to SVG and GSAP animations
A new Design+Code course on SVG animation. It covers the basics of GSAP and some of the specialized SVG animation plugins too. If you’re a Design+Code member it looks like it comes bundled with the previous courses. 

 

Reusable animation components with React Hooks
A tutorial on how to pair CSS animation and React Hooks together for some reusable animation.

 

Animating with clip-path
A look at how clip-path can be used to create some neat shape-shifting animation effects.

 

Delivering consistent animation with a design system library
One company’s approach to systematizing animation code for the web and their design system.

 

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.