Archived topic
Animate.css
5 replies · Started by Alberto on February 14, 2022
Hi Guys, I try to search some tips on the other thread, but no answer has come.
I've followed the instruction to install Animate.css on WP:
- uploaded animate.min.css in a css subdirectory on the theme child directory
Then I must add this piece of code:
//Animate CSS
add_action( 'wp_enqueue_scripts', 'wpb_animate_styles' );
function wpb_animate_styles() {
wp_enqueue_style( 'animate-css', get_stylesheet_directory_uri() . '/css/animate.min.css', '3.5.0', 'all');
}in the function.php.
(source -> Installing Animate.css)
Ok, nothing happens.
So I try to change the version (now is 4.1.1) but nothing.
Then I put the code as an Element Hook (wp_head, entire site). Nothing.
Css Classes does not apply to blocks.
Where I'm wrong with it?
Could you give me some suggestion? I understand it's not properly on GPP, but a tip should be very appreciated.
Thanks in advance.
Alberto
(the alternative is I must compile the css classes one by one, I suppose)
Hi there,
if you can share a link to a page on the site where it should be working i can take a look at whats going on.
Hi David and thank you for help.
Here a link to test:
I've tried also to make a Hook Element with the CDN link:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
But nothing changes.
I've applied the animate__fadeInLeft css class to the image block (and if I convert it to html view, the class appears too)
Sincerely, I don't know how to.
I can see the CSS is loading, and if i edit the element and add these two classes then it works:
animate__animated animate__bounce
Hi David.
You are always my eye opener and I am the usual newbie.
I was omitting the initial class (animate_animated) as I did not understand the correct syntax of the code.
Thank you, I have verified and by inserting it the library works for me.
Thank you, thank you, thank you!
Another case closed!
Glad to hear that!!
