how to animate ANYTHING on the web

While CSS animations are okay for what they're intended to do, they lack that natural feel and don't have that snap you get with native apps. Plus even if you animate something relatively complicated with CSS, at times it comes with its "gotchas" such as browser support (yes I'm looking at you CSS Houdini) or properties you simply can't animate.

This workshop will show you how to use Framer Motion to create eye-catching animations for your web apps. In this hands-on session, we'll take a look at Framer Motion, a powerful React library designed to bring fluid, intuitive motion to your user interfaces. You'll learn how to elevate your web applications from static experiences to dynamic, engaging interfaces that respond naturally to user interactions. We will also learn about spring animations and web apps like https://framer-motion-visualizer.vercel.app/ to make our lives easier.

To end the workshop, I will breakdown and recreate either https://family-drawer-opal.vercel.app/ or https://codesandbox.io/p/sandbox/family-avatar-picker-qnm9km live with what we've learnt