Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
November 3, 2019 12:45 am GMT

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"


Original Link: https://dev.to/rose/more-experiments-with-form-animations-114e

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To