I’m learning jQuery by making a timeline in HTML.

When the next elements/cards are visible, they will slide up with an animation. This is working properly.

There’s a circle in the center highlighting the current timeline, and this is what I would like to animate. It should scale bigger when that certain row is in the center of the screen, and the one above should scale back to the normal size.

I got an example working right now, but it’s not coded the correct way. I would like to code this dynamically so that it automatically finds the previous circle to reduce the scale, instead of setting Y coordinates.

Please see this code section to further clarify my situation. I feel like there should be a way to dynamically find the previous timeline-circle in the div timeline-container in the first function.

https://jsfiddle.net/5kj2h3nf/

$(window).scroll(function(event) {
    $(".timeline-container").each(function(i, el) {
        var el = $(el);
        if (el.visible(true)) {
            el.addClass("come-in");
        }
    });

    if ( jQuery(window).scrollTop() > 0) {
        $(".timeline-circle.first").addClass('scale');

    } if ( jQuery(window).scrollTop() > 850) {
        $(".timeline-circle.first").removeClass('scale');
        $(".timeline-circle.second").addClass('scale');
    } else {
        $(".timeline-circle.second").removeClass('scale');
    }
});