DEV Community

Rose
Rose

Posted on

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"

Top comments (5)

Collapse
 
nauhil profile image
Huan Li

awesome! Thanks for the sharing

Collapse
 
raghavmisra profile image
Raghav Misra

Dang, those are pretty cool. Thanks for sharing.

Collapse
 
felipperegazio profile image
Felippe Regazio

ow, pretty cool!

Collapse
 
rifaimartin profile image
Rifai Martin

i like it

Collapse
 
burzumumbra profile image
Ronald Flores Sequeira

Really greate post 🙌