Copy
The UI Animation Newsletter
vol 20.35 • Sept 18, 2020 • Twitter / Subscribe / Archives 

Happy Friday! This week’s issue has a whole lot of cool CSS going on. Learn about CSS 3D transforms, master the difference between transitions and animations, and even see some of that in action in the other links. Also, if animating irregular strokes in SVG has ever gotten you down, there’s a helpful link below for that too.

Until next week, 

- Val
 

p.s. Replies go straight to my inbox. Reply and let me know what you’re working on.

 

UI ANIMATION OF THE WEEK

Claudio Guglieri

Claudio’s new personal site is full of impressive 3D type animation and icons. The sticky project description boxes and content layering add a nice touch of detail too.

LINKS

Audio book app concept
This audio book concept really comes to life thanks to some 3D transforms!

Responsive "cool" steps
This animation by Jh3y is definitely cool. Click to reveal how it was pulled off.

LED switch
An incredibly realistic (and functional) switch made with CSS.

Animating SVG handwriting
This was one of the top questions we would get when Sarah and I were running our web animation workshops. SVG stroke animations are the key to those super cool write-on effects, but it does get a little bit tricky when you want more stylized strokes. This article shows you how to pull off a handwriting animation with irregular strokes.

 

CSS animations and transitions explained
A lovely pair of animated illustrations to demonstrate the differences between CSS transitions and animations from Stephanie Walter.

 

Learning about 3D CSS transforms
Perspective and 3D transforms can be a tricky part of CSS. Michelle wrote a great summary of how she learned more about them, complete with demos of the core concepts and links for inspiration.

Support the UI Animation Newsletter: 
Submit a link for a future issue  or  Share it with a friend

Copyright © 2020


You can update your preferences or unsubscribe from this list here.