Copy
The UI Animation Newsletter
vol 19.03 • Jan 18, 2019 • Twitter / Subscribe / Archives 

Happy Friday! This week’s issue digs into a bit of animation with React hooks, pushes the boundaries of what can be done with some creative CSS animation, and gets you started with SVG filters.

Also, if you’re looking for a fun CSS thing to play around with this weekend, Firefox Nightly just added support for animating the grid-template-columns and grid-template-rows properties of CSS Grid. This means you can make fun morphing grids (made with this Pen) and probably even some other more practical things.

These properties have only been implemented in Nightly so far, so don’t expect them to work in Chrome or anything just yet. 
They are fun properties to play around with animating, and a good excuse to learn a little more about CSS Grid.

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

Rezo Zero #dzy

The consistency of the sliding page transition animations set a steady rhythm for this site. The soft feel of the motion also helps to take the edge off the stark black and white colour palette.

INSPIRATION
The cutest birthday party ever

Birthday pure CSS pen
This one is just so impressive. Cute bunny characters and expressive animation all done with CSS by Julia Muzafarova. Love it!

ShuffleQueue loader
These dots really come to life in this loader by Chris Gannon.

A lovely dark scene

Black sun
A lovely but ominous 3D scene by CJ Gammon.

Fancy tab hovers

Tap bar hover
A neat effect for some tab navigation from Malan Alankara.

LEARNING

SVG filters 101
A seriously great intro to SVG filters from the also seriously great Sara Soueidan.

 

Animated mesh lines
A fun effect with lots of variation from the folks at Codrops.

 

A developers guide to native web animation
A walkthrough of what the various options for web animation are and what they do from a developer's perspective.

 

Interactive text animation with React hooks
A detailed tutorial on creating headings that respond to mouse movements using React Hooks, CSS Modules, CSS variables and clip-path.

UPCOMING EVENTS:

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


An Event Apart Seattle
Feb 4-6, 2019


From Business to Buttons
Stockholm, May 3, 2019

An Event Apart Boston
May 6-8, 2019

 

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.