Copy
The UI Animation Newsletter
vol 19.19 • May 17, 2019 • Twitter / Subscribe / Archives 

Happy Friday! I’m writing this week’s issue from Pittsburgh for the first time in a while. The last couple of weeks have been a whirlwind of travel, so it’s nice to be home for a bit.

I’ve updated my slides on Notist for both of my recent talks: Purpose and Style at From Business to Buttons in Stockholm, and Making Motion Inclusive at An Event Apart Boston. Two very different talks at two very great events.

Earlier this week I found myself doing some late night SVG coding to help out a friend, and I stumbled upon this little SVG utility from Lea Verou for converting SVG paths to be all relative or all absolute. It’s a super helpful for those times you need to edit SVG paths to make them a little easier to animate. I’m glad she made it and shared it with us all!

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
Lusion studio #dzy

Lusion #dzy

There are some really impressive glowing light and particle effects going on in this site. Most of them play through or follow you as you scroll to change the scene as you move through the content. This one will definitely get your fan revving too. 

Also, today seems like a good time for a reminder about the #dzy hashtag. It serves as a motion warning for links that might be problematic for folks with motion sensitivities.

INSPIRATION
A walk cycle with likes

Like cycle
A lovely looping animation that might hit a little too close to home. It’s by Chris Gannon and made with some clever use of GSAP’s timelines and custom easing.

A rocket flying through CSS space

Rocket through space #dzy
Space! Made with lots of CSS variables and CSS animation by Ryan Mulligan.

A quirky animated camera animation and illustration process

Quirky camera
I love the illustration style and the super smooth motion of this piece!

LEARNING

Having fun with GSAP draggable and Hello Kitty
A short video walking you through how to create a cute drag and drop interaction with GSAP’s draggable from Christina Gorton.
 

UI Animation in React
Donovan takes you through a demo React app to show how you can add reusable UI animations. And you can try the demo out for yourself too.
 

How to create a multi-line text background effect
A simple, yet stylish, hover effect for links with background gradients and transitions from Claudia Romano.
 

Animating CSS Grid rows and columns
A detailed look at what you can animate with CSS Grid in Firefox 66 with lots of references and further reading suggestions too.

UPCOMING EVENTS:

I’ll be at these events in the next few months. If you’re there too, come say hi!

An Event Apart DC
July 29-31

Clarity
San Francisco, Aug 20-21

An Event Apart Chicago
Aug 26-28

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.