1

I would like to animate a phrase in a wordpress site with a help from animate.css and wow.js. When I reload a page the phrase I would like to animate appears like a ordinary text and only after that the animation starts to happen. I tried to change the order of scripts but still it doesn't work the way it supposed to. 

add_action('wp_enqueue_scripts', 'theme_styles');
add_action('wp_footer', 'theme_scripts');

 function theme_styles() {
       wp_enqueue_style('style', get_stylesheet_uri()); 
       wp_enqueue_style('animate', get_template_directory_uri() . '/assets/css/animate.css');       
 }
 function theme_scripts() {
       wp_enqueue_script('wow', get_template_directory_uri() . '/assets/js/wow.min.js');
       wp_enqueue_script('animate_init', get_template_directory_uri() . '/assets/js/animate-init.js');
}
brad_fresh
  • 129
  • 1
  • 11
  • How are you initializing the animation? Is it within a DOM Ready event, such as jQuery? In this case your function may not run until the dom is ready/page loads. Which you should generally do as good practice anyways, but may solve your issue if that's the case. – DubVader Jan 29 '20 at 22:03
  • @DubVader It's in animate-init.js I have this line new WOW().init(); – brad_fresh Jan 29 '20 at 22:24
  • @DubVader Nothing changes if I write document.addEventListener("DOMContentLoaded", () => { new WOW().init() }); – brad_fresh Jan 29 '20 at 22:51
  • Why don't you hide the text by default, then initialize your WOW, then right after that, show the text. – DubVader Jan 30 '20 at 15:22

1 Answers1

0

You missing one thing I suppose: using the right action for calling these functions, in this case you need wp_enqueue_scripts.

For including properly CSS/JS, i.e you can try this:

add_action( 'wp_enqueue_scripts', 'my_scripts_and_css' );
function my_scripts_and_css(){
theme_styles();
theme_scripts();
}

You can also install a plugin for easy inserting JS code snippets manually, i.e this.

Capolooper
  • 11
  • 8
  • I've updated a question. My scripts are visible in the console and animation works but it works only after the text I target to animate appears for a second without any animation. – brad_fresh Jan 29 '20 at 19:48