How do I import animejs into my wordpress theme?

Question

so I'm a total noob trying to build my own wordpress theme!

I wanted to add a shape on my page that would be animated by anime.js. However, I have no idea how to go about and actually input the javascript to get the shape to animate.

Here is what I have tried so far in my functions.php file:

function tabula_rasa_scripts() {

// Enqueue Google fonts Roboto
wp_enqueue_style(   'tabula_rasa-fonts', tabula_rasa_fonts_url());

//Enqueue anime.js
wp_enqueue_script( 'tabula_rasa_anime', get_template_directory_uri() . '/js/businesscard.js', array(), false, false );

wp_enqueue_style( 'tabula_rasa-style', get_stylesheet_uri() );

wp_enqueue_script( 'tabula_rasa-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );

wp_enqueue_script( 'tabula_rasa-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );

if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
    wp_enqueue_script( 'comment-reply' );
}
}
 add_action( 'wp_enqueue_scripts', 'tabula_rasa_scripts' );

Here's what I have in my index file (the original shape shows up!)

<div id="primary" class="content-area">

    <main id="main" class="site-main">

        <div id="svgAttributes">
            <svg class="businesscard" width="128" height="128" viewBox="0 0 128 128">
                <polygon points="64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100 " fill=orange></polygon>
            </svg>
        </div>

and here's what my javascript file looks like:

/*jshint esversion: 6 */

import anime from 'animejs';

anime({
  targets: '#svgAttributes svg polygon',
  points: '64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96'
 });

So, I assume putting it in the .php file doesn't really work, because it gets called in the header. However, I wouldn't know where to actually call the javascript file, if not in the functions.php file.

Also, maybe this is helpful, but Firefox Dev Tools throws me this error:

SyntaxError: import declarations may only appear at top level of a module

But, I have no idea how what that even means!

Thank you for your help!!

Answer 1

So, I figured out the solution to my own problem, with a little guidance from @Core972's comment!

If you're using a functions.php file to enqueue your scripts (which is good practice), then before you import your own animation file into the footer, you must also actually import anime.js itself.

Earlier, I was trying to import anime.js without having the .zip file extracted into my themes folder. This time I downloaded the file from github, placed it in the right folder, and then called it from functions.php

//Introduce animejs
wp_enqueue_script( 'tabula_rasa-anime', get_template_directory_uri() . '/anime-master/anime.min.js', array(), false, true );

//Enqueue animejs businesscard
wp_enqueue_script( 'tabula_rasa-businesscard', get_template_directory_uri() . '/js/businesscard.js', array(), false, true );

Notice how the last value is "true", which tells the functions.php file to load this in the footer, rather than the header. This is also good practice as to load your animations last (since they are generally the least valuable).

Then, you can remove the import call in your .js file, which will get rid of the import error Firefox's debugger will throw at you.