Animate.css in ionic


#1

can i use animate.css in ionic 2?


#2

Yes, why not?
Animate.css is just a css library and should not conflict with your angular or ionic specific code.
I think it would work!


#3

It would definitely work. It’s just a lib as david said :slight_smile: You just have to ask yourself the question, how would the performance be on a mobile phone? Not every phone is that good at CPU rendering (especially not Android phones). Always be critical when you use animations!


#4

Yeah, you’re right! I think it would not be a problem on the newer phones ( like the Nexus 6P or Galaxy S7) but on older devices it would definitley “damage” the performance.


#5

thank you all :-)…will try it in my coming apps


#6

Did you try it ? , did it worked fine , and how about the performance ??


#7

Animate.css does work fine but you shouldn’t be using it since it will be slow on old phones.

This does not mean that you should give up on animations, just use the way more performant webanimations api. Anuglar 2 Animate is available in Ionic 2 projects and works like a charm. It is really easy to implement the animations provided by animate.css with Angular 2 Animate.

I’ve written a blog post on how to use Angular 2 Animate. It covers a basic animation:

What Animation from Animate.css do you want to use? We can “translate” it to Angular 2 Animate Code :slight_smile:


#8

Hey I am using animation.css and included in index.html but after running " cordova run android " command the file link is getting disappear automatically and if I include that file in my html page it is showing
localhost:8101/animate.css link not found 404 error


#9

From what I understand, the “performant webanimations api” that you refer to simply use “translate3D” instead of modifying the properties like “left” for example, therefore telling the device to use the GPU. It seems to me that Animate.css uses the translate3D command, so wouldn’t it be just as fast as Angular 2 Animate?

Maybe Animate.css has updated it’s code since this last post. Anyway, I just thought I’d try and contribute.