animista

CSS Animations on Demand

64 followers

CSS Animations on Demand

64 followers

Visit website

Design resources

•

UI frameworks

Animista is a place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use.

Launch tags:Web App•Productivity•User Experience

Launch Team

Unblocked AI Code Review — High-signal comments based on your team's context

High-signal comments based on your team's context

Promoted

Checkout Page

Came across this a few days ago. Usually I hate HTML/CSS generators, but this one is actually really useful. No bloat and good to use as a look-up as well ("how did that effect works again?"). 👌

Report

9yr ago

animista

Maker

@fishsander awesome feedback, thanks Sander! 🙏

Report

9yr ago

This is a great tool, looks good and so easy to use! One small issue - I'm not able to copy the code in FF. It says copied to clipboard, but isn't. I can't seem to select all / copy either. Also I think it would be useful to include the keyframes in the css. I wondering why mine didn't work like yours until I realised what I was missing.

Report

9yr ago

animista

Maker

@jaamproductions Great to hear you like Animista! Thanks for letting me know about FF, I will look into it ☺️

Report

9yr ago

@ana108 @jaamproductions I'm going to second Jaam's comment regarding keyframes needing to be included for the copied code to work. Thanks for creating this fantastic resource Ana!

Report

9yr ago

animista

Maker

@jaamproductions You can now copy keyframes code for single animation on the preview page as you suggested : )

Report

8yr ago

Invoice generator

Wow, this is awesome, well designed and great UX, and the best part is that its CSS3 based. 👏 Congrats @ana108

Report

9yr ago

animista

Maker

@csaba_kissi thanks Csaba, glad you like it :)

Report

9yr ago

animista

Maker

Animista is a place where you can play with a collection of pre-made CSS animations, tweak them and get only those you will actually use. Animista started out as a small side-project of mine. As I was increasingly using CSS animations, I thought it would come in handy to have them organised in a meaningful and accessible way so that they can be easily reused on different projects. The idea was to create a playground of a sorts where a collection of pre-made animations could be tested and tweaked before actually using them. Seeing how various options like easing, delay, duration and others affect the animation proved to be very useful. And basically that is how Animista was born. I have been using Animista for a while now and I hope some of you will find it useful as well. It is still very much a work in progress and hopefully it will evolve over the time :)

Report

9yr ago

SlidesUp API

Really smooth animations, even for the branding! This will help me play with all the transforms I've never used and improve my toolkit. Thanks!

Report

9yr ago

animista

Maker

@kunalslab Many thanks Kunal 🙏

Report

9yr ago

animista

Maker

@giopecchio @jonathanmarvens @ariaitch @matsilva @james_osullivan @askar @chthomos @clement_chazarra @janklimo @pawelhalicki @roberttanislav - Thanks so much for supporting Animista and for all your kind words. Really means a lot 🙏

Report

9yr ago

Hi there, it looks like I can't combine 2 or more animations and export / copy code as one?

Report

4yr ago

animista

Maker

@leonlee Hi Leon, not sure if I understood well. You can add animations you like to your favourites (heart icon) and then get them all at once from the download page. Here's the link to page explaining how to - https://animista.net/how-to Hope this helps :)

Report

4yr ago

animista

Maker

Report

4yr ago

@ana_travas Hi Ana, sorry for any confusion, by "combine" I mean, for instance, I would like "flip" and "scale" applied to an element at the same time so I can see this combination in the preview window.

Report

4yr ago

1 2 3

•••