Animista: a collection of ready to use CSS animations | Hacker News Reader

Animista: a collection of ready to use CSS animations

animista.net

573 pointstilt68 comments

I 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.

I'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.

This 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?

Awesome 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!".

Strange, 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.

The 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.

Broken for me on Stable Firefox (52.0) as well

Lovely. 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.

I 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.

Pulled 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.

You're kidding right? It's a couple of lines of CSS, not an authored work.

These look great! What’s the licensing of the generated code? Can I use these with cc by-sa projects?

Another one asking about licensing! What's going on?! It takes one line of CSS to 'wobble a box'!

But if you're using someone else's code to do it, the license still matters.

It'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.

This 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.

I wish it worked on mobile...

For 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.

With great power comes great responsibility. Please use these sparingly.

Now 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.

In cornflower blue please.

Make it "pop" too. It doesn't pop enough.

Checking this out on mobile and the animation for the service not being available on mobile is fluid as heck... really nice work!

I am not sure how this works. I copied the generated CSS and used the class in an element but nothing happens.

A 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.

imo this kind of stuff is better used as contentmarketing / imagething for you actual job

any small consulting job beats several thousand downloads

iconfinder does $150,000 per month - the model does not seem too dissimilar.

https://www.iconfinder.com/

Iconfinder 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.

People 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.

It's a matter of value. There is nothing near 150k/mo of recurring revenue or sustainable value here.

Edit: And even though it's not what I was saying, I don't know why you think that kind of thinking is 'programmer think'. That's a bit disparaging to programmers, no? The ones I know aren't that shallow.

>There is nothing near 150k/mo of recurring revenue or sustainable value here.

$1k/mo > Any $/mo > $0/mo >>>> Negative $/mo spent on hosting

There are many people who would pay to use the code generated by this tool - even if it can be trivially grabbed via Inspect Element. It seems that's a common sentiment among posters on this topic - and I agree with them.

It might seem silly to charge for 3-step keyframes (0->40->100 on many of them) with different timing functions but people will pay for just that.

Sure they may pay, and that's believable—but I stand by my statement that it won't make much money.

This isn't a jquery plugin, it's one line of CSS.

The CSS line for bouncing a box is already on a million other sites.

It's a nicely presented web app, I've bookmarked it. The donation model is more than enough.

These 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

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:"

It would be nice if we had the html for some of the flip content, especially for the a/b content

Each 'card' is simply a couple of div elements. You can replicate it pretty easily by inspecting the elements.

That 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

Wow, 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

...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.

You 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.

You're talking about the CSS code. He's talking about the HTML structure needed to correctly apply it to 'front' and 'back' card elements.

There are a list of div objects (with the class "anim-object"). The one with the active class is the one displayed. The site uses onclick events to change the classes and stylings of the divs to trigger the events. Open developer tools or view source. It's clearly meant to be agnostic as to the triggering event for the various animations.

I recommend checking out the owners personal site. I really liked the animations on it.

To save others from having to search for the owner's personal site: it's http://wearec2.com

I really like the animations and started playing with them on my side projects

love it

These 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!

I 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.

Try viewing it on a phone. It says you have to use a desktop.

This only refers to the Animista site itself, not the actual animations.

What 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.

Wow, downvotes for complaining about the presentation and accessibility on a front end tech page…

In my experience, if somebody claims something works, but I haven't seen it, the safest assumption is "doesn't work". I happen to be in my phone now, and I'm not going to bookmark a site in the "doesn't work" category. Maybe if I happen to check HN from a desktop later and the link is still on the front page, I'll give it another look. Otherwise, goodbye.

"Trust me." Yup... not something I want to invest my time in if I can't see it work. A message telling me not to use the mobile version reminds me way too much of those, "Please use IE6!" messages we got back in 2004 when a site wasn't tested on Firefox or Safari.

The site lets you choose a lot of parameters for CSS3 animations and shows the effect on a number of selectable objects. It then lets you download the CSS3 code with your selected parameters, so you can use them in your own CSS.

CSS animations work, any individual browser bugs notwithstanding. The nice thing about this site is that you don't have to guess all the CSS `@keyframes` and `animation` parameters to match some vision in your head, but you can visually experiment.

The actual value of this site is the interface, and I can see why it would be hard to make it work specifically for mobile devices.

I don't really expect this to be a common issue. I don't use my phone for web development.

Funny, I do use it to view web pages about development, documentation, API references, and demos.

I think I know what's going on. A web dev 101 class has discovered this thread. This explains some bizarre questions such as "what is the licensing" and "won't work on mobile"... :-)

The Animista web app is meant for web developers to browse the animations, take the very basic CSS code (not HTML) and use it in their projects - which might be mobile-friendly if you wish.

CSS animation is not "mobile or not", that task belongs to your other site-wide CSS and general HTML structure.

Calling developers checking HN on their phones "web dev 101" is pretty condescending. Give the benefit of the doubt, and assume they are engineers with limited time to check out new technology and are disappointed that they can't view these animations while riding a bus.

I was responding to the person who said they didn't have confidence using the CSS in their mobile projects because the site where they got the code from didn't work on mobile. That's not the logic of an engineer!

It's like saying you don't trust the drone will fly above 10 feet because in the store where you bought it the test flight was limited by a 10 foot ceiling.

> It's like saying you don't trust the drone will fly above 10 feet because in the store where you bought it the test flight was limited by a 10 foot ceiling.

That sounds like the happy expectations of someone free of the merciless grasp of deceitful vendors…

This is more like the store refusing to make the video demo of the drone on flight available to visitors using a mobile browser.

If you have Firefox for Android you can tap "request desktop site" if you really wanted to see the site on your phone. If you have an iPhone, I guess you're out of luck.

I just checked and while it loads on iPad, the top row of round buttons for animation category don't respond to touch.

Back to the analogy... it's more than a "demo drone video". It's an interactive drone experience where you select altitude and other settings and see the drone in virtual flight, then copy those settings to your own controller. Sounds like a task for a computer, not a phone.

Your analogy doesn't make sense. The site shows animations which work on mobile, but won't let people on phones view the animations. That puts up a barrier to adoption: even if there are a ton of fiddly UI widgets to control the animation, the mobile site could show a default animation & say, "click here to customize this animation (desktop recommended, lots of controls that don't work well with touch)".

> A web dev 101 class has discovered this thread.

Close... Product Manager (former Engineer) with 20+ years experience building things.

"You're either mobile first, or you're mobile last."

If someone puts up a warning sign telling me that they didn't bother to test their code on mobile... that tells me it's not ready for production yet. I don't want to get bogged down in something that wasn't tested on mobile, or that requires me to invest a lot of my time to get working right between browsers. Having the creator of this code put up a page saying not to use it on a phone seems to say they are comfortable writing off more than 50% of web users.

I don't think it's OK to launch anything, not even an MVP, if it doesn't work on mobile. Shouldn't building a mobile site be a trivial task for someone building CSS animations? How do I trust their work without a way to preview it?

The former engineer seems to be missing the point.

All this site does is present existing CSS animation methods in a convenient, curated fashion with nice variations such as "wobble left". We know it works on mobile because the code is written according to the CSS spec.

If you have doubts about whether the CSS animation works on mobile, then you have doubts about whether the CSS animation spec in general works on mobile.

Developers don't copy and paste and write code on their mobile phones. Therefore the target audience is not your "50% of web users" club, which is a consumption stat, not coding or technical productivity/creating.

The code that you take from this site goes to your own project, and that's when you test on mobile - with your own HTML elements and other code.

Finally, "mobile first" is not right. Nothing should be "first" because by definition everything else is given less priority which is flawed logic depending on the application. "Mobile-friendly" is the more sensible idea.

Would you trust anything done by someone who throws up a splash page, "Don't use your phone to look at my site..." in 2017? Really?

"2017" has nothing to do with it, nor does trust.

You are not entitled to "Mobile First" just because a conga line of over-memed industry bloggers repeatedly insist we are entitled to all the content on the internet through our mobile browsers.

You're waving your phone around like it's attached permanently to your hand, and the only way you can get online!

The site responds and tells you what's going on. There is no fault. Be patient, be cool, save the bookmark and check it our later.

Don't be the kid throwing a tantrum because the hand-me-down phone you got for Christmas doesn't run Pokemon Go.

Screen size is an inherent limitation of mobile, always will be. Video editing, photo-editing, anything requiring a complex interface on a single page, or anything the developer hasn't released yet for reasons which are their business.

Giving release priority to desktop (including laptop) for a technical development app is OKAY in 2017. Just breath, everything is okay. The site is trustworthy, the code is trustworthy.

Reply on news.ycombinator.com