Archived topic
code snippet to import animate.css
5 replies · Started by Anders on April 26, 2021
Hi I added this code to a code snippet
add_shortcode( 'add_animate', function () {
$out = '<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head>';
return $out;
} );Then I added the animate css class (animate__animated animate__pulse) to a h1 tag on my front page like this:
<h1 class="gb-headline gb-headline-6183f8c3 gb-headline-text animate__animated animate__pulse">modern webbdesign + bra användarvänlighet + smart seo = <mark class="gb-highlight"><span DIN VINSTMASKIN!</mark></h1>
I would hope that the word "DIN VINSTMASKIN!" to animate but it disappeared. I guess I need to instert the short code from the snippet, but where? Or did I miss something else?
Hi there,
That's not how you add the script or stylesheet to the head of the page. The animate.min.css stylesheet isn't loading on your site.
You can do it like this:
1.) Create a Hook element.
2.) Paste this code:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
3.) Set the hook to wp_head. Set the Display rule location to "Entire site".
4.) Save it.
With this, you've inserted animate.min.css on your site's <head> tag.
Thanks Elvin! I tried that now but no animation is happening. I just added the class in the code editor. Is there anything else I need to do?
<span class="animate__animated animate__pulse">DIN VINSTMASKIN!</span>
see the whole code block:
<!-- wp:generateblocks/container {"uniqueId":"d8b5604e","paddingBottom":"30","backgroundColor":"#fffce2","isDynamic":true} -->
<!-- wp:generateblocks/headline {"uniqueId":"3ec55f22","element":"h1","alignment":"center","highlightTextColor":"#fb6c2d"} -->
<h1 class="gb-headline gb-headline-3ec55f22 gb-headline-text">modern webbdesign + bra användarvänlighet + smart seo = <mark class="gb-highlight"><span class="animate__animated animate__pulse">DIN VINSTMASKIN!</span></mark></h1>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
Hi there,
this doc is handy - under Gotchas you will see the CSS doesn't work with inline elements:
https://animate.style/#gotchas
Give your span element a class of is-inline-block
Then add this CSS:
.is-inline-block {
display: inline-block;
}Great! thanks, it solved the problem;)
Glad to hear that
