Animation_Text.html

<!DOCTYPE html>
<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">
    <title>Animated Text Using Anime Js</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
        *{
            margin: 0;
            padding: 0;
            font-family: "QuickSand",sans-serif;
            user-select: none;
            box-sizing: border-box;
        }
        section{
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background:#0e1623;
            overflow: hidden;
        }
        section .text{
            position: relative;
            font-size: 5em;
            text-align: center;
            color: #00fe77;
            -webkit-box-reflect: below -0.46em linear-gradient(transparent,#0004);
        }
        section .text span{
            position: relative;
            display: inline-block;
        }
    </style>
</head>
<body>
    <section>
        <h2 class="text">AnimeJS Text Effects</h2>
    </section>
    <script src="assets/anime/animemin.js"></script>
    <script>
        // This is The Script for Splitting The Word
        const text = document.querySelector(".text");
        text.innerHTML = text.textContent.replace(/\S/g,"<span>$&</span>")
        anime.timeline({
            loop:true
        })
        .add({
            targets:".text span",
            translateY: [600,0],
            scale:[10,1],
            opacity:[0,1],
            easing:"easeOutExpo",
            duration:1500,
            delay:anime.stagger(100),
        })
        .add({
            targets:".text span",
            translateX: [0,1000],
            scale:[1,1],
            opacity:[1,0],
            easing:"easeOutExpo",
            duration:2000,
            delay:anime.stagger(100),
        })
        .add({
            targets:".text span",
            translateX: [1000,0],
            scale:[1,1],
            opacity:[0,1],
            easing:"easeOutExpo",
            duration:2000,
            delay:anime.stagger(100),
        })
        .add({
            targets:".text span",
            translateX: [0,0],
            scale:[1,50],
            opacity:[1,0],
            easing:"easeOutExpo",
            duration:2000,
            delay:anime.stagger(100),
        })
    </script>

</body>
</html>