Typing CSS Animation Problem

I created a typewriter css animation using pseudo elements which makes it look like text is being typed live (no js). It works perfectly, the only real problem is that it starts exactly when the page is loaded in, this is a problem because the animation is lower down the website and by the time a user would visit it, the animation would already go by. Rather than adding a delay (that would just be guessing when the user would scroll down) I would like to add a scroll effect so that when the user scrolls down and is in the viewport, the animation will play. I’ve tried finding this all over the internet for hours and tried several things and couldn’t find it, if anyone has a solution to this please let me know. Thanks!

I think you’re gonna have to use javascript to do this. I’d recommend googling “how to use scroll to trigger css”.

Also I found this:

Can I trigger CSS animations on scroll without Javascript?

The short answer is NO . Window scrolling is an event and CSS itself is not capable of detecting event changes as of now. So we must use javascript to measure the scroll and trigger something to which CSS can react. We do it using adding a new class to the section.

I hope this helps!

Hi, Thanks for your input! I knew have to use JS for this, however I am trying to figure out a way to implement the JS in with my CSS pseudo elements because I used only CSS to create the typing animation.

Edit: managed to find a helpful article based off what you recommended to google search thanks!

Hey! There is a DOM Api called “Intersection Observer” which lets you do stuff when you scroll to a particular section and its much easier to use than the normal scroll event

Just saw this, I almost have a solution

This is random but this is the animation im getting. The animation starts when the website is loaded in, as well as when it comes into viewport. Anyone have a fix?
What happens:
https://streamable.com/wkzsqx

Code:
HTML

<div class="servicequote">
            <h3 class="myanimation">Our Exotic Designs will amaze you.</h3>
            </div>

CSS

.myanimation {
    position: relative;
    width: max-content;
    font-family: 'itc_avant_garde_gothicbold';
}

.myanimation::before, .myanimation::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.myanimation::before {
    background-color: white;
    animation: typewriter 6s steps(35) 1s forwards;
}


.myanimation::after {
    
    width: 0.125rem;
    height: 1.5rem;
    background-color: black;
    animation:typewriter 6s steps(35) 1s forwards,
    blink 750ms steps(35) infinite;

}

.servicequote {
    margin: 3rem 0rem 0rem 38vw;
}

JS

const observer = new IntersectionObserver(entries => {
    // Loop over the entries
    entries.forEach(entry => {
      // If the element is visible
      if (entry.isIntersecting) {
        // Add the animation class
        entry.target.classList.add('myanimation');
      }
    });
  });
  
  observer.observe(document.querySelector('.servicequote'));

If the animation shouldn’t run on page load, remove the class="myanimation" from the HTML. You only want to add that class after the user has scrolled.

1 Like

You got it! Very good catch!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.