UI Animation Newsletter 20.16 - Netflix animation in CSS 🎬 how animation works💡 t-shirt cannon button 👕

vol 20.16 • April 17, 2020 • Twitter / Subscribe / Archives

Happy Friday! I just finished up an online AMA session with Jina Anne where we had a fun chat about animation and design systems. The online presentations and chats I’ve done in the last few days have really been highlights of my week.

The next one is this coming Monday when I’ll be talking about animation and inclusive design with the IxDA Pittsburgh (online, of course).

If you just need something fun and light right now, I’d suggest starting with the velvet theater and friendly donut toggle links from below.

Stay safe,

- 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 have covered in a video tutorial.

UI ANIMATION OF THE WEEK

CUSP #dzy

An agency site with some clever page transitions and surprise use of liquid image effects. There’s lots of giant type with various animated effects throughout as well.

LINKS

Velvet theater
Another super chill and lovely animated 3D scene from Anna that I totally love.

Weekday, weekend, whatever
I think we can all seriously relate to the sentiment of this type animation. Who even knows what day it is anymore right now, right?

T-shirt cannon button
Sure you can't go to any sporting events right now, but you can bring a little taste of that t-shirt cannon experience right to your computer screen thanks to They.

Chat bubble
The shape morph in this button from Mikael Ainalem is especially satisfying!

Friendly donut toggle
I didn't know how much I needed more donut toggles in my life until I saw this Pen. So cute.

How to recreate a nifty Netflix animation in CSS
I love a good recreation tutorial. Breaking down a UI animation piece by piece to recreate it is a really great way to learn how to build your own unique patterns.

How does animation work?
A neat explainer cartoon that brings you behind the scenes of making 2D-rigged animation, stop motion animation and more.

Vector animations frame by frame course
This course is a paid (but very affordable looking) course. If you're looking to learn some more traditional approaches to animation, this looks like it could be a good place to start.

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