90+ animation using CSS

Hey guys I’ve been working on these animations for a while, finally get to showcase them. There are 90+ animations for all purposes using CSS. Hope y’all can have some fun with it. You can copy the code from the app.

Cheers

Joint work with @ShantanuIyengar :+1:

29 Likes

Thk u both w/ @ShantanuIyengar
:cat::grinning_face_with_smiling_eyes: I haven’t seen everything but it’s so funny as bonus :purple_heart::teddy_bear::cherry_blossom: almost a Tex Avery (ok, you’re too young to know Tex Avery cartoons!)

I can certainly use this.

Good idea too to show numbers as menu, like elevator floor numbers…

Enjoy your Glide!

4 Likes

Wohoa! This is so powerful!

@Harsh_Ganatra how would I go about running the animation only once? For example the fade-ins I might only want triggering into visibility once instead of that looping.

Thanks for this amazing library!

EDIT: answered my own question by just removing the word infinite… :see_no_evil:

2 Likes

Fun!

1 Like

I can’t believe, is so simple!!! Biggest THANKS!!! Your are awesomes!!!

1 Like

Is it possible to apply these animations to buttons, and other components?

I broke glide, when i tried to do that :joy:

I haven’t seen this before but it is so funny and creative, you deserve a :pizza: … no doubt!

Saludos @Harsh_Ganatra

1 Like

Can someone help me understand how to use the fadeout animation only when I want to hide a component?

For example I have a container that is only visible when a boolean column is checked, when setting the fadeout animation for it, it is fading out when the container appears after checking the boolean, and not when unchecking it.

thank you!

This is a pretty old thread so understand that CSS works differently now. Maybe you could have two components… one with the class name and one without. Let the boolean control the visibility of the two components.

Another way is to create your own elements using HTML and the rich text component and then dynamically add and remove the class names inside the HTML instead of using the class name on the component level.

2 Likes