How’s it going, I'm a Adam, a Full-Stack Engineer, actively searching for work. I'm all about JavaScript. And Frontend but don't let that fool you - I've also got some serious Backend skills.
Location
City of Bath, UK 🇬🇧
Education
10 plus years* active enterprise development experience and a Fine art degree 🎨
How’s it going, I'm a Adam, a Full-Stack Engineer, actively searching for work. I'm all about JavaScript. And Frontend but don't let that fool you - I've also got some serious Backend skills.
Location
City of Bath, UK 🇬🇧
Education
10 plus years* active enterprise development experience and a Fine art degree 🎨
I am not pro css only. I'm pro native specifications. I didn't say anything about not using JavaScript, I just would use the least I could get away with. I have used this method with Web Animations API which is less code than the proposed solution, has documentation etc.
I would base a decision for a particular implementation on browser support, rendering uniformity across browsers, performance, complexity of what you want to do, is it an important feature or just icing, accessibility, and general usability. Sometimes it makes more sense to use JS, and sometimes CSS only. For other types of animation, I would use transitions and @keyframes for simpler animations and certain kinds of effects, for more complex and timed animations I would JS. The nature of web dev is sometimes outcomes can be surprising, so you need to test across browsers to see what you're getting. It may be a requirement to support > 97% of browsers.
In this case, the amount of code is the same, it comes down what is more suitable for your use case. My example is consistent across browsers and has excellent browser support (SVG is native to browsers since around IE9). I am interested to test out the CSS to see how it is. You still need to create a path, which is works the same as SVG I assume? Doing this by hand is cumbersome, so you may still need to jump into an editor. The coordinate system for the path in CSS has a big question mark for me, "M20 20", what unit is 20? Is it responsive (scalable) like SVG?
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Web Animations API === dynamic
Right, but now you've stepped into the browser API & javascript which contradicts your above comment, unless I've misunderstood your point.
I am not pro css only. I'm pro native specifications. I didn't say anything about not using JavaScript, I just would use the least I could get away with. I have used this method with Web Animations API which is less code than the proposed solution, has documentation etc.
Gotcha. I agree, the more native APIs we can leverage the better.
I would base a decision for a particular implementation on browser support, rendering uniformity across browsers, performance, complexity of what you want to do, is it an important feature or just icing, accessibility, and general usability. Sometimes it makes more sense to use JS, and sometimes CSS only. For other types of animation, I would use transitions and @keyframes for simpler animations and certain kinds of effects, for more complex and timed animations I would JS. The nature of web dev is sometimes outcomes can be surprising, so you need to test across browsers to see what you're getting. It may be a requirement to support > 97% of browsers.
In this case, the amount of code is the same, it comes down what is more suitable for your use case. My example is consistent across browsers and has excellent browser support (SVG is native to browsers since around IE9). I am interested to test out the CSS to see how it is. You still need to create a path, which is works the same as SVG I assume? Doing this by hand is cumbersome, so you may still need to jump into an editor. The coordinate system for the path in CSS has a big question mark for me, "M20 20", what unit is 20? Is it responsive (scalable) like SVG?