More experiments with form animations ✅

A sort of follow-up to this post .... a few more form animations.

Not totally happy with the execution in some cases (eg: Why does Firefox require that I use a setTimeout for the transition in example 1 to work correctly? I thought just using something like requestAnimationFrame would suffice but it does not.). , nor with my artistic direction (I feel like someone else could really figure out how to make these "pop" in a super-cool way.)

But they're kind of fun. Enough to show off I guess 🙂

For the first: Using transitions on transform and utilizing getBoundingClientRect to calculate where the dot needs to move to. Works well for this simple case but if you wanted to use it IRL with a bunch of relatively positioned elements etc it would probably need some better positioning logic.

For the second: a SVG with a bunch of little circles that scales in size and fades out, so it looks like a little burst of dots. This one was inspired by something on dribbble (https://dribbble.com/shots/6440021-Card-Theme-Switch) that is way cooler than my attempt to "do something similar but not totally copy"