Copy
The UI Animation Newsletter
vol 19.33 • September 6, 2019 • Twitter / Subscribe / Archives 

Happy Friday!

If you like animated text effects, you'll really like this week’s issue. We’ve got a variety of animated type, as well as some tips for keeping type animations accessible. And on top of that there’s a great Vue animation example, and a look at some fun ways to bounce elements around the browser.

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

Leon Sans

A canvas-based "font" with a whole lot of variations. Each letter is drawn with canvas and it has a great collection of animated effects. The demo site shows them off in an entertaining loop.

 

INSPIRATION

A sphere of boxes
A colourful and shiny orb made of tall boxes and some Three.js magic.

Loading text
So fun yet so simple! The animation brings this loading text to life with the letters playing catch.

Flip flop
An amusing type animation with a snappy letter morph to switch out the words.

LEARNING

Vue.js fancy flyout selectors
A neat flyout menu animation made with Vue’s transition system.


How to accessibly split text
Helpful advice from Michelle Barker on how to split text for text animations with accessibility in mind.

 

Bouncing elements around the viewport with CSS
Chris Coyier rounds up techniques from a variety of sources, like the Coding Train, to create a Pong-like animation with CSS.

 

UPCOMING EVENTS:

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

Smashing Conf
Freiburg, Sept 9-10

Finch Front End
Edinburgh, Sept 23-25

Intersection Conf
Milan, Oct 1-3 

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.