Can't Get anime.js to Work in Shopify Liquid

0
votes

My Problem:

Hey everyone, I'm currently in the process of coding a website for Shopify and I want to animate some HTML within the website using anime.js. The website correctly locates and reads the "anime.min.js" file that I've included in the website's assets, however, it just isn't animating anything. Is it even possible to use anime.js in Shopify Liquid?

I would really appreciate it if someone could help clarify this for me.

What I've Tried:

If you know Shopify Liquid, I'm assuming you know how it code editor works as well. Like I said, I've added the "anime.min.js" file to the "Assets" folder in the template, and it's recognizing and reading that file correctly (via the code shown below) so I'm not really sure why it isn't working unless anime.js just doesn't work with Shopify Liquid for some reason.

My Code:

<!-- HTML/Liquid -->

<div class="social-media__icons">
{% for block in section.blocks %}
    <a href="{{block.settings.url}}" target="_blank" class="social-media__icon"><img src="{{block.settings.icon | img_url:'x22'}}"></a>
{% endfor %}
</div>

<!-- JS -->

<script src="{{ 'anime.min.js' | asset_url }}"></script>
<script>
  
anime({
    targets: '.social-media__icon',
    duration: 1000,
    delay: anime.stagger(200, {start: 400}),
    translateY: [-500, 0],
    easing: 'easeOutCubic'
});
  
</script>
1
htmlliquidanime.js

1 Answers

0
votes

You gave the wrong 'targets' name inside the anime script tag. Instead of targets: '.social-media__icon', you should have given targets: '.social-media__icons'. You just missed an 's' in the end. It's just a spelling error and nothing to worry about.