How to animate a line when scrolled to it?

Question

I have added a horizonal line after a section using CSS:

.section:after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #000;
  animation: line-appear 1.5s forwards;
  visibility: hidden;
}

@keyframes line-appear {
  to {
    width: 100%;
    visibility: visible;
  }
}

I also added javascript into the html:

$(document).ready(function() {
  $(window).scroll(function() {
    $(".section").each(function() {
      var position = $(this).offset().top;
      var scrollPosition = $(window).scrollTop() + $(window).height();

      if (scrollPosition > position) {
        $(this).find(".section:after").css("animation-play-state", "running");
      }
    });
  });
});

However, the line animated before I scrolled to it. Does anyone know how to make the line starts animated just when I scroll to it?

Does anyone know how to make the line starts animated just when I scroll to it?

What do you want to happen when the user scrolls in the other direction? — A Haworth, Aug 18 '23 at 11:13

score 0 · Answer 1 · answered Aug 18 '23 at 09:22

0

animation-play-state already has the value running, before your JavaScript code even sets it. (Because that is its initial value, and by using the animation shorthand property in your CSS, you set all the "sub-properties" that you don't explicitly specify, to their initial default.)

You need to specify it as paused in the initial state:

animation: line-appear 1.5s forwards paused;

answered Aug 18 '23 at 09:22

CBroe

91,630
14
92
150

Thanks. I have added specify it as paused. However the line doesn't appear when scrolled to it. – Hillary Au Aug 18 '23 at 10:20
You can't directly access pseudo elements like that using jQuery. Toggle a class on the element itself instead, that triggers the animation on your pseudo element. https://stackoverflow.com/q/17788990/1427878 – CBroe Aug 18 '23 at 10:26

score 0 · Answer 2 · answered Aug 18 '23 at 10:37

0

Try this: css:

.section:after {
content: "";
position: absolute;
bottom: -20px;
left: 0;
width: 0;
height: 2px;
background-color: #000;
visibility: hidden;
}

.section.animate-line:after {
 animation: line-appear 1.5s forwards;
}

JavaScript:

 $(document).ready(function() {
  $(window).scroll(function() {
    $(".section").each(function() {
       var position = $(this).offset().top;
       var scrollPosition = 
   $(window).scrollTop() + $(window).height();

       if (scrollPosition > position) {
          $(this).addClass("animate-line");  
                  //Add the animate-line class
            }
     });
     });
     });

Let me know if this can be helpful to you

answered Aug 18 '23 at 10:37

Levin Baria

91
5

Hi, answers that are code-only can be enhanced by a verbal description of how they work. – A Haworth Aug 18 '23 at 10:47
you're trying to trigger the animation of the horizontal line only when the section is scrolled into view. To achieve this, you need to adjust your JavaScript code. You should modify your JavaScript to add a class to the section when it comes into view, and then use that class to apply the animation. – Levin Baria Aug 18 '23 at 10:50
With this code, the .animate-line class is added to the section when it comes into view, which triggers the animation for the horizontal line. Make sure your HTML markup has the appropriate class="section" attribute for the sections you want to apply this animation to. – Levin Baria Aug 18 '23 at 10:51
You can edit your question to include the explanation. – A Haworth Aug 18 '23 at 10:54

How to animate a line when scrolled to it?

2 Answers2