8 ms·
Animista: a collection of ready to use CSS animations
- ArneBab 10y agoThese look great! What’s the licensing of the generated code? Can I use these with cc by-sa projects?
- exodust 10y agoAnother one asking about licensing! What's going on?! It takes one line of CSS to 'wobble a box'!
- michaelmior 10y agoBut if you're using someone else's code to do it, the license still matters.
- exodust 10y agoIt's someone else's code as much as "once upon a time" is someone else's writing. Animista is an awesome resource. Well presented and nicely done. But if you think anyone can own the rights to specific transform values within the @keyframes rule, then you are mistaken.
- throwaway2016a 10y agoI feel almost paralyzed by choice looking at this site. Kind of like when trying to choose a font and you have 200 on your computer. But the grouping is nice and a lot of these look very interesting. Definitely bookmarking.
- dbg31415 10y agoThese are cute and seem like they have promise, but the fact that the site won't load on mobile means I won't have confidence to use them for any mobile-first web project. Hope you add mobile compatibility soon!
- TruthSHIFT 10y agoI don't really expect this to be a common issue. I don't use my phone for web development.
- falsedan 10y agoFunny, I do use it to view web pages about development, documentation, API references, and demos.
- tekromancr 10y agoI don't believe that is true. All of the animations presented are just css3 keyframe-based animations. There is no reason that you couldn't use them. The site cataloging them isn't responsive, but once you generate the css, you can use them in any project.
- callumlocke 10y agoTry viewing it on a phone. It says you have to use a desktop.
- geonic 10y agoThis only refers to the Animista site itself, not the actual animations.
- falsedan 10y agoWhat animations? The link goes to a landing page encouraging the visitor to use a desktop browser instead… > Mobile version is unavailable at the moment. To experience Animista try it on your desktop. The text is unselectable on mobile as well.
- falsedan 10y agoWow, downvotes for complaining about the presentation and accessibility on a front end tech page…
- someguy101010 10y agoIt would be nice if we had the html for some of the flip content, especially for the a/b content
- purple-dragon 10y agoEach 'card' is simply a couple of div elements. You can replicate it pretty easily by inspecting the elements.
- someguy101010 10y agoThat is true, but if the website is meant to be used as a resource then it should be designed to be easy to use and implement instead of having to look at the website's actual source html to get a feature working
- tekromancr 10y agoWow, someguy. You're right. Fuck them for creating and giving away free _CSS_ animations because you don't like how they are packaged. Webdevs shouldn't be expected to apply CSS classes to things without handholding. /s
- always_good 10y ago...Yikes. They were giving pretty reasonable and, I dare say, obvious feedback. The site should provide an HTML snippet like just about every other demo page out there. I can't see the author disagreeing with that. You could copy and paste your "fuck them, right? /s" snark on just about every bit of feedback everywhere. I don't think that's very constructive, and it demonstrates a misreading of the parent comment.
- doc_gunthrop 10y agoYou don't even need to inspect the elements. The code is available right there on the page by clicking the third circular icon at the top-right (the hover text says "Generate code"). Clicking on the icon `{.}` will slide out a div that contains the code for the CSS animation.
- grumblestumble 10y agoThis is really cool, and very nicely packaged. I agree with some other commenters that showing sample html would be a good improvement, but in general this is awesome. That said... Is it acceptable to animate `box-shadow` these days? Thought that was a pure framerate killer on mobile.
- sergiotapia 10y agoPulled in a simple animation for a feature I'm working on, works like a charm. This is awesome! I can't find the license though, and won't push to prod until I do.
- exodust 10y agoYou're kidding right? It's a couple of lines of CSS, not an authored work.
- deleted 10y ago[deleted]
- raspo 10y agoI really like this collection, this is going to turn out very useful for me in the future. With that said, the website/webapp behaves kind of weirdly in my opinion. I would have never ever thought to click on the heart icon in order to select an animation for later download. I assumed that was some form of BS sharing feature. Also, when clicking on the "code" icon { } I wanted to see the underlying animation, not just its implementation.
- dlubarov 10y agoI'd suggest using +/- like Google Fonts does, and change the tooltip to "Add to collection" or "Add to download" rather than "Favorite". If you use the "favorite" symbol/terminology then I'd expect to be able to browse a list of favorites somewhere.
- andrewstuart 10y agoA possible business model is to charge $1 to grab the source code for a snippet, or some sort of monthly fee for wider access. It might be easy to rip off via "inspect", but there's alot of people in this world who pay when required.
- andreasklinger 10y agoimo this kind of stuff is better used as contentmarketing / imagething for you actual job any small consulting job beats several thousand downloads
- andrewstuart 10y agoiconfinder does $150,000 per month - the model does not seem too dissimilar. https://www.iconfinder.com/ https://www.iconfinder.com/
- purple-dragon 10y agoIconfinder has 1.5 million icons and tens of thousands of fonts. They have both a large catalogue and a large customer demographic (e.g., anyone looking for an icon for a presentation, a flyer, software). Animista lets people that write HTML/CSS/webapps interactively choose or tune the settings of a relatively small set of CSS animations styles. It's like a convenience table of contents for what one would typically find in scattered various CodePen examples. It wouldn't make much money.
- andrewstuart 10y agoPeople hand over money when you offer something that they want, in a convenient, easily buyable form, at a price that appeals. It's "programmer think" to equate sellability with the number of icons/animation in the catalogue.
- purple-dragon 10y ago
- rajangdavis 10y agoChecking this out on mobile and the animation for the service not being available on mobile is fluid as heck... really nice work!
- grepthisab 10y agoThis is great, I echo what others have said about getting the code. I would definitely pay for this. One thing though, I've been clicking back and forth between this thread and the site and everytime I do I have to go through that animista loading image again. Got kind of annoying after a couple times. Maybe do something else, or just make it so it appears only the first time or something?
- petarb 10y agoI wish it worked on mobile...
- obiefernandez 10y agoThese are great. The CSS code generation is awesome. Can't get any of it to work on my site. No instructions on how to make it work, other than copying the CSS. Blerghhhh
- obiefernandez 10y agohttps://www.w3schools.com/css/css3_animations.asp https://www.w3schools.com/css/css3_animations.asp helped. What you download from Animista are just the keyframe definitions. You apply them to a target element using CSS properties, particularly "animation:"
- sova 10y agoLovely. Thanks! In a couple ways (flip left / flip right vertical) it is just what I was looking for. Thanks for sharing this, and I like the loading image. You did a good job with this and it would be nothing unusual to declare you a CSS ninja.
- notum 10y agoAwesome stuff, thank you! A tiny wee bit of an issue: Copying to clipboard does not work on firefox dev edition, had to get the code from source as selecting was disabled on the <pre>. Also, why force downloading the whole library? Why not append the keyframes used to the code to be copied as an alt box entitled "Just want to use this one animation? Copy this!".
- talmand 10y agoStrange, copying the code via the button worked for me on Firefox dev. I don't understand the force downloading the whole library? I don't see that it does that. Going to the download page just provides me a way to copy the generated code of my chosen animations to paste wherever I want. I don't see an option to download anything. Ah, I see now. Download is Chrome only. Regardless, my download only had the chosen animations. It didn't download the whole library for me.
- notum 10y agoThe copy button is still broken for me on 54.0a2, W10, no flash, no addons. I'm talking about the third icon in the animation well "Generate code". You're right regarding the downloads! I must be super silly or this is slightly counter intuitive, didn't even notice the sidebar and the download page that requires you to "fav" animations first. And go figure, the copy button works there.
- myowncrapulence 10y agoBroken for me on Stable Firefox (52.0) as well
- jcwayne 10y agoWith great power comes great responsibility. Please use these sparingly.
- notum 10y agoNow if the word "sparingly" just rotated a little bit I think that note would have more impact. A touch of a shadow wouldn't hurt either. A nice scale-in intro effect would really tie this together and add weight to your message. Just my 2c.
- talmand 10y agoFor those that are concerned whether the animations work on mobile or not. They do. Well, as long as the browser of your choice supports the CSS properties in use. Which, at this point it would be easier to keep a list of browsers that do not support such things as opposed to ones that do. It's just the site itself misbehaves on mobile. To test the animations on a phone, just tell your mobile browser to request the desktop site. You should be able to see the page then. More than likely that is, your experience may vary. I was able to see the desktop site on my Android phone. I was just unable to cycle through all the different animations to see them in action or choose them. That has more to do with how the UI of the site is built, nothing to do with the animations.
- Philomath 10y agoI recommend checking out the owners personal site. I really liked the animations on it.
- shock 10y agoTo save others from having to search for the owner's personal site: it's http://wearec2.com http://wearec2.com
- kiflay 10y agoI really like the animations and started playing with them on my side projects
- jordache 10y agolove it
- arvinsim 10y agoI am not sure how this works. I copied the generated CSS and used the class in an element but nothing happens.