0

I am trying to trigger a simple typing animation when the user scrolls to that div on the screen. Here is my html:

    <div class="text-8xl">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptas eveniet nulla sapiente libero sequi ipsam voluptatem ex porro nostrum laudantium modi, aliquam, est quia veritatis quod. Quas, voluptas neque.
    </div>
    <div class="flex justify-center items-center">
        <h1>I am <span class="auto-type"></span></h1>
    </div>
    <div class="text-8xl">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptas eveniet nulla sapiente libero sequi ipsam voluptatem ex porro nostrum laudantium modi, aliquam, est quia veritatis quod. Quas, voluptas neque.
    </div>

And here is my javascript:

<head>
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
</head>

...

<body>
<script>
var typed = new Typed(".auto-type", {
            strings: ["a person", "Sleeping", "coding"],
            typeSpeed: 150,
            backSpeed: 150,
            loop: true,
        })
</script>
</body>

How can you trigger this animation when this div enters the screen after scrolling? Thank you, and please leave any questions below.

coderDcoder
  • 585
  • 3
  • 16
  • your question seems to be answered [here](https://stackoverflow.com/questions/27462306/css3-animate-elements-if-visible-in-viewport-page-scroll) – Traidos Feb 21 '23 at 05:28
  • Can you tweak it, because I have little understanding about javascript. Also, I need to trigger a javascript function, not css. Thank you. – coderDcoder Feb 21 '23 at 05:32

1 Answers1

0

There is a library for exactly this kind of behaviour. You can find it here

Add this CDN to your project

CSS

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

JS

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

INITIALIZE AOS

<script>
  AOS.init();
</script>

You can find the type of animation that you want on the Animate on Scroll's website.

https://michalsnik.github.io/aos/

shubhraagarwal
  • 35
  • 4