Hi,
Yes it is.
We have tested it, and its working fine.
However, in case you face any issues, please feel free to let me know here.
I would like to animate an image on my homepage that I inserted via a column widget and I don’t have the “animate it” logo, I don’t understand why
Are you using default Gutenberg editor, or any other custom editor like Elementor?
There is a simple workaround for gutenberg
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.
I have created a column with 3 images and 3 paragraphs and I would like to animate only the images. here is the html version
<!-- wp:columns {"style":{"color":{"background":"#f4ede5"}}} -->
<div class="wp-block-columns has-background" style="background-color:#f4ede5"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"align":"center","id":14113,"sizeSlug":"full","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-full"><img src="https://tourdumondedesloulous.com/wp-content/uploads/2022/01/sac-a-dos.png" alt="" class="wp-image-14113"/></figure></div>
<!-- /wp:image -->
<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">Sillonner les routes du monde en sac à dos, de l'Europe en camping-car, du Vietnam en moto, ou encore du Myanmar en train...sont autant de possibilités de voyager différemment. Prenez le temps de voir le monde autrement grâce au slow travel.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"style":{"color":{"background":"#f4ede5"}}} -->
<div class="wp-block-column has-background" style="background-color:#f4ede5"><!-- wp:image {"align":"center","id":14111,"sizeSlug":"full","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-full"><img src="https://tourdumondedesloulous.com/wp-content/uploads/2022/01/lieux-meconnus.png" alt="" class="wp-image-14111"/></figure></div>
<!-- /wp:image -->
<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">Mettre en lumière des destinations méconnues, voire oubliées, aborder des destinations touristiques sous un angle différent sont des aspects qui reflètent notre conception du voyage. Imprégnez-vous de nos carnets et tentez le voyage hors sentiers traditionnels. </p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"style":{"color":{"background":"#f4ede5"}}} -->
<div class="wp-block-column has-background" style="background-color:#f4ede5"><!-- wp:image {"align":"center","id":14114,"sizeSlug":"full","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-full"><img src="https://tourdumondedesloulous.com/wp-content/uploads/2022/01/rencontres.png" alt="" class="wp-image-14114"/></figure></div>
<!-- /wp:image -->
<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">Laissez place à l'imprévu, aux rencontres fortuites car elles sont l'essence même du voyage. Aller au-devant d'associations humanitaires, soutenir des éco-projets, faire du volontariat font partie des expériences que vous trouverez sur notre blog. Piochez dans ces idées pour donner du sens à votre voyage.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
I created the following shortcode thanks to your plugin but I don’t know where to insert it to animate images only
[edsanimate_start entry_animation_type= “jello” entry_delay= “0” entry_duration= “1” entry_timing= “ease-in” exit_animation_type= “” exit_delay= “” exit_duration= “” exit_timing= “” animation_repeat= “1” keep= “yes” animate_on= “hover” scroll_offset= “” custom_css_class= “”]
Please add your content in this area.
[edsanimate_end]
Can you help me please ?
I followed your second suggestion and it works thank you so much !
Hi Astel,
Glad to know you worked it out se==yourselves.
Just in case, you only have to add classes to <div class=”wp-block-image”>
So it looks something like:
<div class="wp-block-image animated spinner duration1">
I am marking this ticket resolved for now.
Please feel free to re-open it if you face any issues.
