How to display elements inside a div one after another?

Question

I'm trying to animate some elements. There are spans inside a content-wrapper div. Once we reach the div with the content-wrapper class, the b-fadein class is added to each span, and the animation should start, and the spans should appear one after another.

$(window).scroll(function() {
        $('.el').each(function(){
        var pos = $(this).offset().top;

        var topOfWindow = $(window).scrollTop();
            if (pos < topOfWindow+400) {
                $(this).addClass("b-fadein");
            }
        });
    });

Animation.

.b-fadein {
  /* hidden by default */
  opacity: 0;
  animation: fadeIn 0.5s linear forwards;
  animation-delay: calc(0.5 * var(--i));
}

@keyframes fadeIn {
  from {
    /* is not visible*/
    opacity: 0;
  }
  to {
    /* is visible */
    opacity: 1;
  }
}

HTML

Currently, the desired effect is only visible when each span inside content-wrapper is displayed as a line (flex-direction is set to column). But all spans can be on the same line.
The problem is that, if they are on the same line, they are displayed at the same time once we reach the content-wrapper.
How do we display the spans one after the other once we reach the content-wrapper div?

user_4281558 · Answer

You don't need jQuery for that you can use javascript vanilla Intersection Observer API to keep track of your spans intersection ratio

basically, you need to follow these steps :

add an opacity transition to the span element with the desired delay
add base opacity:0 to the span element
create an Intersection Observer
change the current entry.target.style.opacity(current span) to '1' based on entry.intersectionRatio

demo :



    
        
        

        Intersection Observer API
    
    
        
            span item
            span item
            span item
            span item
            span item
            span item
            span item
            span item
            span item

complete info on Intersection Observer API : https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

user_14761908 · Answer

$('span').each(function(i) {
    (function(self) {
        setTimeout(function() {
            $(self).addClass('b-fadein');
        },(i*1500)+1500);
    })(this);
});

Just add this jquery code when you reach the content-wrapper. I think this will help you to show the spans one after another. I just added a setTimeout function to provide a delay for adding the class to your span.

How to display elements inside a div one after another?

2 Answers