Hello, dear dev.to community!
What would be the best way (performance wise and/or complexity wise) to implement a background fill animation for a complex shape that has more than one element (like an arrow below). It seems to be such a simple animation, but I'm not sure whether I should start looking into pure CSS solutions, or JS, some animation library, SVGs? What solution would allow to have an arrow of arbitrary length?
Can anyone also recommend any articles, videos or textbooks on Web animation that could teach me doing such not-so-obvious things? Animation in Android/Flutter is probably completely different, but if you happen to have something to share on it, please do!
Top comments (2)
I've managed to solve it somewhat with the
clip-pathproperty. That allows to create objects of arbitrary shapes whose background can than be manipulated by transitioning itsbackground-position. Example:I generated the arrow shape in this tool and the gradient for the background in this tool.
I did some research on how would one implement a button like that in Flutter (i.e., with background color filling from side to side indicating there is time to cancel the action) and I couldn't find a concrete answer on how to do something like that. I found this example that animates padding to gradually fill a container, but this seems like a very hacky solution for something that seems like a staple UI element (a "hold button"?). A similar technique, only using two containers, is described here. I wonder if I should look into combining a button with the progress bar widget, would it be less hacky?
Anyway, here's an alternative web solution for the problem using two divs and a padding transition inspired by the abovementioned example. It's probably less performant, isn't it? But the code looks a bit more clean.