Is it possible to add animated text using anime.js?

Question

Is it possible to add animated text using 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>

Apologies, this code snippet is not functioning as expected. I am struggling to implement anime.js after importing it in the code. However, this piece of code works perfectly fine for me in my current project.

The main objective with this code is to transition the number within the span element from 50 to 100. A similar example can be found in the official documentation here:

However, the example provided in the documentation deals with DOM attributes whereas I want to manipulate the DOM content itself. Is this achievable using anime.js?

javascript html css anime.js

Answer 1

Answer №1

If you want to update the content using anime's `innerHTML` property, here is how you can achieve it:

<!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>

Answer 2

If you want to update the content using anime's `innerHTML` property, here is how you can achieve it:

<!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>

Answer 3

Answer №2

Perhaps there are other methods to accomplish this task, but I believe it can be achieved in the following manner:

<!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 crucial component is the update function, demonstrating how to embed any desired value into the HTML.

Answer 4

Perhaps there are other methods to accomplish this task, but I believe it can be achieved in the following manner:

<!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 crucial component is the update function, demonstrating how to embed any desired value into the HTML.

Is it possible to add animated text using anime.js?

Answer №1

Answer №2

Similar questions

Decrease the gap between rows in CSS Grid

Navigate quickly to different sections using jump links and adjust the positioning with the style attribute, such as "padding-top

Error message: `Socket.io-client - Invalid TypeError: Expected a function for socket_io_client_1.default`

There is no index signature that accepts a parameter of type 'string' in the type '{ [key: string]: AbstractControl; }'

Learn the method of conditionally resetting the state count using React hooks

A JavaScript regular expression for identifying IMDB URLs

Adjust the color of the input range slider using javascript

What is the best way to delete comments from the config.js file?

Is the ID "nodeName" specifically designated as reserved in the HTML5 language specifications?

Challenges faced when subscribing to global events in JavaScript

The functionality of Bootstrap 5's modal-dialog-scrollable seems to be malfunctioning

Having trouble with the installation of [email protected] on Windows 10 x64?

Having trouble retrieving input field values with Angular.js

Getting state values from a custom component to another parent component can be achieved by lifting the state up

JQuery is unable to initiate a keyup event

A guide on how to examine the array index within a nested array

There was a problem compiling the template and an error occurred in the mounted hook

Even after defining routes, Node Express continues to throw a 404 error

Placing a list item at the beginning of an unordered list in EJS with MongoDB and Node.js using Express

Showing a Remote Image on the Screen