index.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">
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <title>Document</title>
</head>
<body>
    <div class="w-screen h-screen">
        <div id="custom-loading" class="w-full h-full relative overflow-hidden">
            <div class="h-1/2 absolute top-0 left-0 right-0 transition-all duration-1000 top-cover bg-gradient-to-r from-black to-[#0e101f] flex items-end justify-center">
                <div class="h-px w-0 transition-all duration-1000 bg-gradient-to-r from-[#1DCFFC] to-[#AD00FF]"></div>
            </div>
            <div class="h-1/2 bg-black absolute bottom-0 left-0 right-0 transition-all duration-1000 bottom-cover bg-gradient-to-b from-[#0e101f] to-black flex items-start justify-center">
                <div class="h-px w-0 transition-all duration-1000 bg-gradient-to-r from-[#1DCFFC] to-[#AD00FF]"></div>
            </div>
        </div>
    </div>

    <div class="p-5 text-center" data-aos="fade-up" data-aos-duration="1000">
        <span class="font bold text-[24px]">Heading</span>
    </div>

    <div class="p-5 text-center" data-aos="fade-up" data-aos-duration="1000">
        <span class="text-[16px] w-[200px] block m-auto">this is paragraph text for test animation. this is paragraph text for test animation. this is paragraph text for test animation.</span>
    </div>

    <div class="p-5 text-center">
        <span class="font bold text-[24px] ml12">Heading Tester</span>
    </div>

    <script>
        (() => {
            const sleep = (time = 1000) => {
                return new Promise((resolve) => {
                    setTimeout(() => {
                        resolve();
                    }, time);
                });
            }
            window.addEventListener('load', async () => {
                const loadingAnimation = document.getElementById('custom-loading');
                const topCover = loadingAnimation?.getElementsByClassName('top-cover')[0];
                const bottomCover = loadingAnimation?.getElementsByClassName('bottom-cover')[0];
                const topLine = topCover?.firstElementChild;
                const bottomLine = bottomCover?.firstElementChild;

                if (loadingAnimation && topCover && bottomCover && topLine && bottomLine) {
                    await sleep(1000);

                    topLine.classList.remove('w-0');
                    topLine.classList.add('w-full');
                    bottomLine.classList.remove('w-0');
                    bottomLine.classList.add('w-full');

                    await sleep(1300);

                    topCover.classList.add('-translate-y-full');
                    bottomCover.classList.add('translate-y-full');

                    await sleep(1000);

                    loadingAnimation.remove();
                }
            });
        })();
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <script>
        AOS.init();
    </script>
    <script>
        (() => {
            document.querySelectorAll('.ml12').forEach((el) => {
                el.innerHTML = el.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

                let animation = anime.timeline({loop: false})
                .add({
                    targets: el.querySelectorAll('.letter'),
                    translateX: [40,0],
                    translateZ: 0,
                    opacity: [0,1],
                    easing: "easeOutExpo",
                    duration: 1200,
                    delay: (el, i) => 500 + 30 * i
                });

                let observer = new IntersectionObserver((e) => {
                    if (e[0].isIntersecting) {
                        animation.play();
                    } else {
                        animation.seek(0);
                    }
                });

                observer.observe(el);
            });
        })();
        // Wrap every letter in a span
        // var observer = new IntersectionObserver((e) => {
        //     console.log(e);
        // });
        // console.log(observer);
        // var textWrapper = document.querySelector('.ml12');
        // textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

        // var animation = anime.timeline({loop: false})
        // .add({
        //     targets: '.ml12 .letter',
        //     translateX: [40,0],
        //     translateZ: 0,
        //     opacity: [0,1],
        //     easing: "easeOutExpo",
        //     duration: 1200,
        //     delay: (el, i) => 500 + 30 * i
        // });
    </script>
</body>
</html>