Design comparison
Solution retrospective
challenged myself and added animation, learned a ton of new knowledge such as DOM manipulation, key difference between transition and animation :D
What specific areas of your project would you like help with?would like to know if there's anything I can improve with js
Community feedback
- @Alex-Archer-IPosted 5 months ago
Whoa, that's cool =) I animated those bars too, except I used pseudo-element. But I was trying to figure out how to animate counter and yes - intervals! I'll bookmark your solution =)
By the way, width can be animated via transition, isn't it? It's definitely doesn't work with height, but I guess it should work with width.
Well, so that my comment is not completely useless, I noticed that you have
spna
tag. Fun fact - browser renders unknown tags as non-semantic inline elements (which is whatspan
is). That's it.Marked as helpful0 - @Rayco21Posted 5 months ago
yes, transition works with width, but the thing I learned from building this is that the one key difference between transition and animation is that transition is "passive", it needs to wait for something to happen first, like state change :hover, or event occurs like click, whereas animation is more "active", it triggers immediately when the element gets rendered, that's why I chose animation over transition in this case.
thanks for the fun fact :D
1@Alex-Archer-IPosted 5 months ago@Rayco21
Well, transition works every time when corresponding property is changing even via JS. But that doesn't really matter both approaches are good =)
Oh, I tried to say that you have a typo in the code
<spna style="color:
. And browser renders unknownspna
element but it's still worked as intended =) Now I re-read my comment and saw that it's not such clear as was in my head =)Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord