9 条评论
- albert_e 21小时前I like the idea
Some examples need more work i think
"Database backup" has circular arrow spinning backwards
"Earth" shows lines being drawn -- instead i expected it to show an abstract spin of the globe
"Droplet" animates the outline draw. Expected a droplet that starts small and descends to become full size.
Same with "flame" -- should ideally be an animated flame licking up / whisps
"Copy" and "File Stack" -- the animation shown should ideally be reversed i think
"Git-branch" -- animation is wrong, doesn't show branching -- just drawing nodes and lines.
"Hand-grab" -- should start with open palm and then the grab.
Same with "hand-fist"
Many animations are simple zoom/enlarge - like those on right angle arrows are not serving a purpose
- jasonjmcghee 10小时前Some of the animations are really good and make sense based on the icon.
Others just draw the SVG path or wiggle/bounce a bit.
If I were the creator here I might differentiate this into two buckets: custom animation or not. And then allow the generic animations to be applied to any of them.
- evolabs 9小时前Good idea, might also make it easier to pick icons / see whats there already and what might need more work (if it makes sense based on the icon, as you mentioned)
- kevin_thibedeau 14小时前Can't these just be done as SVG hover transitions? Then you have the option to use them inline with no JS.
- evolabs 14小时前For a subset, definitly. Anything that's just transform/opacity/stroke-draw can be done.
However, this works only for hover animations then, I believe. The library also provides other triggers.
And some icons use springs, where when you hover away mid-animation it settles "smoothly".
But yes, I can defs add a no JS option for selected icons :)
- jodacola 13小时前Nit on the page itself: let me use my back button after opening an icon instead of having to reach up for the close button.
When I hit back and get returned here when I wanted to check out other icons made me not go back to check out others.
- evolabs 20小时前Most of the animations so far are ported from pqoqubbw/icons and github.com/imskyleen/animate-ui, I'm planning to add more complex / meaningful animations as new variants in the future :) always happy to know which icons are most relevant for that.
- AltruisticGapHN 17小时前That's awesome. I wish there was like a "raw code" option like on many icons sites you can just copy the SVG.
- evolabs 14小时前Thanks and noted!
I can add something like this, limited to "simple" animations, tho. Transform, opacity, stroke-draw ones should work, then you'd need zero dependencies. Everything that uses spring, path-morph or state-driven animation likely cant be flattened to static code.
Oh and only the hover trigger would be usable that way, not the others.
- meetflow 14小时前[dead]
- evolabs 3天前[flagged]
The droplet is what I found unexpected, too, indeed. Yet, the overall ideas, including the reverse animations on rotating ones, with some funky ease, is purely genius, I believe...
If the actual animations/work are of hand of the Tim Rietz, the developer signed alongside Claude LLM, the they are a great artist!
Related: https://icones.js.org/
To clarify, are you the author of the animations, or is it anyone/anything else as LLM, as the Claude used?
It seems like some look like of artists' Elliot Sutton (imskyleen at GitHub) and/or and dmytro (pqoqubbw at GitHub).
Oh... and the animation ease effect of rating items is also of dmytro's, isn'it it? It may be seen at:
- https://lucide-animated.com/
In this case, what is the main reason of your/LLMs project, if I may ask? What does it provide the aforementioned don't?
// ----- Edit (+20m)
I see, your project is a port to Vue you started:
- https://github.com/imskyleen/animate-ui/discussions/178
Relatively similar to projects as RadixVue, ShadcnVue, and the following:
- https://github.com/iloomilo/itshover-vue
Just in case, the aforementioned `icones.js.com` is not "new", but a project of Vue Community, initiated by Anthony Fu (antfu at GitHub), who is a member of the Vue core Team.
Regardless, though I don't appreciate use of LLMs (and presenting its output as personal work/effort), I appreciate you heartfelt for the added support for the ineffably marvelous Vue!
I'm not the author of most of the animations so far, only a tiny fraction is remade as of now, I just started building tooling for me to develop new / more useful animations or animations for icons that dont exist yet from the lucide lib.
The majority of animations was ported from animate-ui and lucide-animated (github.com/imskyleen/animate-ui, lucide-animated.com), mentioned in the attributions, also visiable on the bottom of each icon page.
The reason I worked on this was that these components were built for react, and we're on vue for all of our work projects (and I use vue for my private ones, too).
Then I added additional QoL features to make the icons easy to use, not conflict with static lucide icons you might already use, and fix various animation bugs I encountered.
Not possible time-wise without LLMs here, for this project I see them mostly as an enabler to make this possible :)