You're receiving this email because you wisely signed up at
View this email in your browser

Hello again, animation friends! I’m David Khourshid (also known as @davidkpiano), developer by day, animator by night, pianist and traveler whenever I get the chance. You might know me and Steven Shaw (@shshaw) from our Keyframers show, where we bring imaginative, innovative user interfaces to life by recreating some complex and fun animations that we see on Dribbble or elsewhere on the internet. You might also notice a few recurring themes in some of these episodes.

One of them, which I’m deeply passionate about, is state machines, and how they can be used to simplify otherwise complex animations and user flows
. Let's dig in!


[Inspiration] [Tutorials]  One of our most complex animations we’ve done on the Keyframers is the Turnable Tables animation. In this episode, we simplified the user flow by using a state machine:

We’ve also used state machines in one of our latest episodes on UX Animation Principles.


[Xamarin] [Tutorials] Slava Chernikoff wrote an insightful tutorial about Complex Animations in Xamarin.Forms using Finite State Machines, which explains how state machines can be used practically for creating native animations that transition between different states, with a small amount of code that targets both iOS and Android!

[CSS] [Tutorials] If you want to learn how to use finite state machines to simplify complex UI animations, I wrote a quick guide for you explaining how to do that for CSS animations. No libraries or frameworks needed!

[JavaScript] [Tools] From Matt Perry, the creator of Popmotion, comes Pose, a “project to simplify the creation of fluid and playful interfaces.” It uses the concept of finite states to accomplish that in a declarative way. You define how each state, or “pose,” of your animated elements should look, give it some timing parameters, and the library wonderfully does the rest.

[JavaScript] [Tools] Finite state machines “...are one of the most popular patterns in game development for good reason.” They’re especially useful and common in defining and blending animation behaviors in Unity’s animation system, as this article by Darren Tsung explains.

[Inspiration] [GSAP] Xavier Cazalot created a playful, visually appealing water phases SVG animation using a finite state machine with an eclectic combination of React, xstate, and GSAP

[Gaming] [News] Also from the game dev world, the open-source gaming engine Godot features a new animation tree and state machine. The examples in this article are quite compelling, and demonstrate the benefits of using state machines for animations in complex 3D games.

[Tools] If you want to dive deeper into using state machines (and statecharts, which are an extended variant of state machines) in your applications for animations, user flows, complex logic, and more, I created a JavaScript library called xstate that you can use with any framework (or no framework at all). Version 4 is coming soon, so follow me @davidkpiano for updates!
If you want to learn more about how to bring imaginative, animated user interfaces to life with CSS variables and more, check out Keyframers, a collaborative project by Stephen Shaw and me where we recreate fun, challenging animations live weekly and teach you how to do the same!
Every year I have a little sale on my courses. This year, until December 3rd you can get both of my courses on CSS animations and transitions and on cartooning techniques for only $35 each with 2019BLACKFRIDAY. Happy learning in 2019!
Rachel Nabors, editor
Love the newsletter? Your support keeps us going!

Contribute to our Patreon,
submit a link, or simply forward it to your friends
Copyright © 2018 Tin Magpie, All rights reserved.

unsubscribe from this list    update subscription preferences