Including font JS in WP functions file?

Icons8 Assets Icons
1

Hi there,

I am trying to add an animated icon to my website. I am using the following code:

<div id="animation-container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.10/lottie.min.js"></script>
<script>
  const animationContainer = document.getElementById('animation-container');
  const animationData = '/wp-content/themes/my-listing-child/images/icons8-bell.json'; // Path to your JSON animation file

  const anim = lottie.loadAnimation({
    container: animationContainer,
    renderer: 'svg', // Choose the renderer (svg, canvas, html)
    loop: true,
    autoplay: true,
    path: animationData,
  });
</script>

Which works fine when I add it to my WordPress footer.php file. However, when I enqueue the external JS file in my functions.php file, the icon no longer appears.

I am do this by:

wp_enqueue_script( 'lottie', 'https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.10/lottie.min.js', array( 'jquery' ), false, true );

Am I doing something wrong here? I would rather enqueue the JS rather than just placing it in the footer file.

Any ideas would be great, thanks!

2

Hey,

The issue is likely due to the timing of when you’re trying to load the animated icon and create the container for it. It seems that the script is loading before the element with id="animation-container" is present on the page.

To address this, you need to ensure that your Lottie script executes only after the container element is created on the page. You can achieve this by utilizing the wp_footer hook in your functions.php file:

function enqueue_lottie_script() {
    wp_enqueue_script( 'lottie', 'https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.10/lottie.min.js', array( 'jquery' ), false, true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_lottie_script' );

function add_animation_container() {
    echo '<div id="animation-container"></div>';
}
add_action( 'wp_footer', 'add_animation_container' );

In this example, the Lottie script is enqueued in the footer of the page. The animation-container element is then created when the page is being rendered, as part of the wp_footer hook.

Here’s the sequence of events:

  1. The Lottie script is loaded in the footer of the page.
  2. As the page is being rendered, the animation-container element is created.
  3. Subsequently, the Lottie script is initialized and loaded within the created container.

Give this approach a try, and your animated icon should appear on your site when using the script enqueueing method through functions.php. Let me know if it helps!