CODEWITHSUNDEEP
javascripthtmlcssanime.js
Daniel Kaplan
Daniel Kaplan

Reputation: 67440

Can you animate text content with anime.js?

var elements = document.querySelectorAll('.content');

anime({
  targets: elements,
  content: 100,
});
<script src="https://raw.githubusercontent.com/juliangarnier/anime/master/lib/anime.min.js"></script>
<span class="content">50</span>

Forgive me, this snippet doesn't work in the slightest: I can't figure out how to use anime.js after import in the snippet code. This works for me in my project.

Here's what trying to do with this code: I want the number 50 in the span to go to 100. There's a similar example in the official docs: https://animejs.com/documentation/#domAttr

But this works on a Dom attribute. I want to work on dom content. Is this possible?

Upvotes: 1

Views: 1910

Answers (2)

SebSob
SebSob

Reputation: 582

You should use anime's innerHTML property for this:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>animejs</title> 
        <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"> 
        </script> 
    </head> 
    <body> 
        <span class="content">50</span>
        <script> 
            anime({ 
                targets: document.querySelector(".content"),
                innerHTML: 100,
                easing: 'linear',
                round: 1,
                delay: 1000 // demo purpose
            }); 
        </script> 
    </body> 
</html>

Upvotes: 3

Daniel Kaplan
Daniel Kaplan

Reputation: 67440

I don't know if this is the best way of doing it, but I think it can be done this way:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>animejs</title> 
        <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"> 
        </script> 
    </head> 
    <body> 
        <div></div> 
        <script> 
            var div = document.querySelector("div"); 
  
            var object = { 
                prop1: 10, 
                prop2: "0%", 
            }; 
  
            let animation = anime({ 
                targets: object, 
                prop1: 70, 
                prop2: "96%", 
                easing: "linear", 
                round: 1, 
                update: function () { 
                    div.innerHTML = JSON.stringify(object); 
                }, 
            }); 
        </script> 
    </body> 
</html>

The key part is that update function. It shows you how to insert any value you want into the HTML.

Upvotes: 1

Related Questions