David Khourshid teaches Stephen Shaw how to use XState ( https://xstate.js.org/docs ) with this daggum delightful Drag & Drop animation, powered by state machines, native JavaScript, data attributes and CSS variables!
( Sorry about the lag right at the start; skip ahead to 3:00 if it's too much )
* 💡 Inspiration: https://dribbble.com/shots/5511492-Drag-and-drop-file
* 📺 Video: https://youtu.be/osaszd2aU9U
* 💻 Code: https://cdpn.io/pen/vYOWxWb
Skip around:
3:40 Animation overview
5:40 Start coding
1:02:10 Keyflections
Additional Resources:
* XState Challenge: https://twitter.com/CodingDive/status/1229961962643173376
* Visualization of the final state machine, thanks to XState Visualizer https://xstate.js.org/viz/?gist=b437f46bbe19c39068f86a05bb3b8286
* Attribute Selectors https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
Like what we're doing? There are many ways you can support @keyframers so we can keep live coding awesome animations!
* Like & subscribe on YouTube at https://youtube.com/keyframers
* Buy web dev shirts, stickers & more at https://keyframe.rs/merch
* Follow & tweet us at https://twitter.com/keyframers.
* Support us on Patreon at https://patreon.com/keyframers
Topics covered:
* State Machines
* Drag & Drop workflow
* Data Attributes
* CSS Variables