What do you mean by Anime.js?
Anime.js is a JavaScript library that makes it easy to create smooth and modern text animation effects for your website or application. In this article, we covered how to use Anime.js to create basic text animations, such as animating the color or size of text, as well as more advanced techniques like splitting and staggering text and animating text along a path. We also discussed how to use SVG filters to create unique text animation effects. With Anime.js, the possibilities for creating dynamic and engaging text animations are endless.
anime.js is a lightweight JavaScript liveliness library that permits you to make complex activitys with a solitary, incredible API. It works with pretty much anything online: CSS properties, SVG, DOM credits and JavaScript Objects.
anime.js makes it simple to make layered and complex livelinesss, and gives you full control of timing and setting off occasions so they move precisely how and when you need them. It upholds probably the most recent programs, and offers a lot of models and exhibitions to make you energize right away. Vivify all that you need just and effectively with anime.js
Friends, today we will be going to Create Text Animation Effects Using Anime.js. I have posted many videos and articles before related to the JavaScript project, now this the something new that we are going to build.
Video Tutorial of How to Create Text Animation Effects Using AnimeJS
You have been watching a video tutorial on how to create text animation effects using Anime.js. If you are feeling bored, you can find the codes used in the tutorial below.
To create this text animation effect, you will need to create two files: an HTML file and a CSS file. Once you have created these files, you can paste the provided codes into them.
To get started, download Anime.js and create an HTML document called “index.html”. Paste the provided code into this file. Remember to save the file with the “.html” extension.
<!DOCTYPE html>
<!-- Created By S-Tech04 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Text Animation</title>
</head>
<body>
<section>
<h2 class="text">AnimeJs Text Animation Effects</h2>
</section>
<script src="./anime.min.js"></script>
<script src="./app.js"></script>
</body>
</html>
Next, create a CSS file called “style.css” and paste the given codes into it. Remember to save the file with the “.css” extension.
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
section
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
width: 100%;
overflow: hidden;
background: #0e1623;
}
section .text
{
color: #4db2ec;
font-size: 5em;
position: relative;
text-align: center;
-webkit-box-reflect: below -0.45em linear-gradient(transparent, #0004);
}
section .text span
{
position: relative;
display: inline-block;
}
Finally, create a file called app.js and copy the provided code into it. Don’t forget to save the file with a .js extension.
const text = document.querySelector('.text') text.innerHTML = text.textContent.replace(/\S/g,"<span>amp;</span>")
var textAnime = anime.timeline({
targets: '.text span',
easing: 'easeOutExpo',
loop: true,
delay: anime.stagger(100),
duration: 1500 , // 1.5 seconds
})
textAnime.add({
translateY: [-600,0], //[start value, end Value]
scale: [10, 1],
opacity: [0, 1]
}).add({
translateX: [0,-1000], //[start value, end Value]
scale: [1, 15],
opacity: [1, 0]
}).add({
translateX: [1000, 0], //[start value, end Value]
scale: [15, 1],
opacity: [0, 1]
}).add({
translateX: [0, 0], //[start value, end Value]
scale: [1, 50],
opacity: [1, 0]
})
Congratulations, you have now created a program Text Animation Effects Using AnimeJS. If you encounter any errors or issues with your code, you can download the source code files by clicking the download button below. The source code is available for free in a .zip file, which you can extract after downloading.
Click on the following download button to download all source code files.
