
Animista: a collection of ready to use CSS animations - tilt
http://animista.net/
======
raspo
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.

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

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

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

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

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

~~~
myowncrapulence
Broken for me on Stable Firefox (52.0) as well

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

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

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

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

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

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

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

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

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

------
petarb
I wish it worked on mobile...

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

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

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

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

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

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

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

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

any small consulting job beats several thousand downloads

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

[https://www.iconfinder.com/](https://www.iconfinder.com/)

~~~
purple-dragon
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.

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

~~~
purple-dragon
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.

~~~
Nadya
_> 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.

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

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

~~~
obiefernandez
[https://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:"

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

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

~~~
someguy101010
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

~~~
tekromancr
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

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

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

~~~
shock
To save others from having to search for the owner's personal site: it's
[http://wearec2.com](http://wearec2.com)

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

------
jordache
love it

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

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

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

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

~~~
falsedan
> _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.

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

~~~
falsedan
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)".

