An Interest In:
Web News this Week
- April 26, 2024
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
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
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To