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

How can the color of the wishlist icon be modified in Reactjs when the item is available in the database?

How can I execute route-specific middleware in advance of param middleware in Express v4?

When the user clicks on the body, I want the element to slide up, which will then slide down when the button is clicked

Vuetify ensures that elements remain in a single row and adjust their size according to the content

Eliminate specific content from within a div tag

Perform a Selenium action to click on each individual HTML 'a' tag on

Struggling to connect CSS to HTML on Github Pages

Stop materializecss dropdown from closing when clicking within it

Utilizing React JS to Develop Cell Components for a Schedule, Ensuring Teams are Unique within the Same Row

What is the best way to eliminate an item from an array in JavaScript or AngularJS?

Tips for sending parameters to a web service URL through a Phonegap HTML page

Is it possible to control my CSS using ModX Resources?

Encountering difficulties when attempting to store files using mongoose in a node express.js program

angular-ui-tab-scroll: Odd spacing between blocks and tabs, each separated individually

Set HTML form elements to be shown in 'display only' mode, without any interactivity

I am experiencing an issue where the Axios configuration does not display the OnUploadProgress on my response

A guide on testing mouse clientY in React using JEST for effective testing

Having trouble with Vue.js implementation of Bootstrap tab navigation?

Using div tags may cause rendering issues

Mastering the Art of Mocking DOM Methods with Jest