UI Animation Newsletter 19.35 - CSS variables and keyframes 🎬 animating a hue with Houdini 🎩 Active Theory site ✨

vol 19.35 • September 20, 2019 • Twitter / Subscribe / Archives

Happy Friday! This week’s issue has a wide variety of inspiration to choose from, along with some neat tutorials on animating hue with Houdini and combining CSS variables with CSS animation.

If you haven’t seen it yet, don’t miss the Apple event animation below, it’s really really good. (And totally worth watching more than once.)

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

Active Theory web site

Distortion effects, particles, and a clever use of depth really make this site stand out. I especially like the particle colour changing text effect.

LINKS

Apple wonderful tools
I was on plane during the apple event so I didn't see this animation until recently, but it’s so great. Worth a second watch (or third or more) for all the lovely motion and morphs.

Upside down
A dramatic black and white animation of fish diving around an ocean that starts to get a bit crowded.

With your eyes closed
A super cute interactive character animation by Tiffany Choong.

Wave
An energetic wavy letter with animated SVG filters from Adam Kuhn.

Animating a hue with Houdini
Dan Wilson brings together colour, Houdini and animation for some clever results.

CSS custom properties in @keyframe animations
Some handy tips on using CSS variables to customize CSS keyframe animations from Sandrina Pereira. I wrote about some other ways to combine CSS custom properties and keyframe animations a while back as well. It’s a very useful and powerful combination.

Paper Pirouette
An impressive all CSS 3D animation from the Keyframers. Don’t miss the links at the bottom to watch them code it live for more details on how it works.

UPCOMING EVENTS

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

Finch Front End
Edinburgh, Sept 23-25

Intersection Conf
Milan, Oct 1-3

An Event Apart Denver
Oct 28-30

MAX
Los Angeles, Nov 3-6

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