Gutenberg support

Hi Vallered,

Thanks for your interest in Animate It!

You can add a Classic Editor Block in Gutenberg to see the Animate It! button.
just do the following:

1. Click the + button you see on the left of posts, and select Classic Editor:
https://shared-assets.adobe.com/link/ce494404-7bf3-42b1-7685-b995bda5ab50

2. As soon as the Classes Editor loads, you should see the Animate It! button
https://shared-assets.adobe.com/link/01188aec-f1e1-465e-6658-d90014bcf4a7

you can generate the animations using this button.
__________________________________

Secondly, you can generate the animation classes from here:
https://www.downloads.eleopard.in/class-generator-wordpress

And Paste these class in the Custom CSS box of any Gutenberg block you want.
https://shared-assets.adobe.com/link/1e01329b-de65-4dd4-64ff-974752a5b933

Hope this helps.

Hi,

I already did it via adding the generated animation classes to a Gutenberg Block before. So your answer is confirmaing, that that is the way to animate any Gutenberg Block. I had some issue with that, as follows:
Using animate it with the classic text block element is working fine, animating the same way any Gutenberg block directly caused some flashing issue (doubled animations). I recognized now, that this was caused because I used some of your class names also in my stylesheet, so I changed some of my css in my stylesheet, and it is working fine now.

I am not a developer, but that leads me to a suggestion / question: To avoid conflicts when animating Gutenberg Blocks “directly” (your option 2), is it possible to “wrap” that in some way? Or, if not possible or your plugin could be extended that way in the future, it probably would be good if your generated class names are “unique” with some prefix like “AI-” or something like that.

Best

Hi Vallered,

Apologies for the delayed reply.

The thing is, when we first started the Animate It! plugin, we used animate.css, a free CSS provided under creative common license. So we were not allowed to modify it.

Hence, from that point on, it became difficult to use our own custom CSS classes.

Hi,

I am trying to add the classes I copied from the class generator directly to a custom HTML block using the Gutenburg editor and it’s not working.

class=”home-cta-green animated rubberBand duration1 eds-on-hover”

If I add the class to another type of block (not HTML), such as a button block, using the Advanced CSS Classes in the block sidebar editor, it works.

How do I add the class directly to an HTML element?

Thanks so much for your help!

• This reply was modified 4 years, 6 months ago by gretchen05.

this should work:

<div class=”home-cta-green animated rubberBand duration1 eds-on-hover”>
Some content here
</div>

You can replace DIV tags with button, a, p, heading etc.

Thank you so much! Sorry it has taken me so long to respond. It works. Bless your soul!