In this post, we will go over some text animations we can do using jQuery. We already know we can animate text size using jQuery, so this post will focus more on moving text into the view of the user. This will be done mainly with the help of the jQuery animate() method.

This has become a popular animation on many websites, as it is a way to help catch the user’s attention.

In this example, we will go over how to move text in from the left, right, top, and bottom.

Animating text into view using jQuery

In this example, we will have a simple empty div with a paragraph. We will provide the user with 4 button options, to move text in either from the left, from above, from the right, or from the bottom.

We will need to add some CSS to the div and to the paragraph to start. The rest of the animation will be done using jQuery.

Here is our HTML and CSS setup:

This is some text we will animate using jQuery.

Move text in from the left

Move text in from the top

Move text in from the right

Move text in from the bottom

Full Code: