Sometimes, we want to add smoothly changing text with JavaScript.

In this article, we’ll look at how to add smoothly changing text with JavaScript.

How to add smoothly changing text with JavaScript?

To add smoothly changing text with JavaScript, we can call the animate method on an element.

For instance, we write:

<p>
  hello
</p>

to add a p element.

Then we write:

const p = document.querySelector('p')
p.animate([{
    transform: 'translate(100px, -100%)'
  },
  {
    transform: 'translate(300px, 200px)'
  }
], 1500);

to select the p element with document.querySelector.

Then we call p.animate with an array of CSS rule objects to set how to animate the p element.

It’ll animate according to the CSS rules listed in the same order they’re listed.

The 2nd argument is the duration in milliseconds.

As a result, we see ‘hello’ slides from to left to bottom right.

Conclusion

To add smoothly changing text with JavaScript, we can call the animate method on an element.