I’m trying to animate a vertical line depending on the positions of elements on the page. Here’s an example of what I want to achieve.

I tried to do something like this

    <section id="s1">
        <div class="page-container">
            <div class="row">
                <div class="col">
                    <div>
                        <p class="about-text-title">Label1</p>
                        <p class="about-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident nulla iure quod autem amet, ipsa beatae
                            voluptatibus maiores adipisci quae, expedita deserunt laborum architecto corporis dolore. Voluptates tenetur nisi
                            cupiditate?</p>
                    </div>
                </div>
                <div class="col vertical-line"></div>
                <div class="col">
                    <p>Video frame</p>
                </div>
            </div>
        </div>
    </section>
    <section id="s2">
        <div class="container">
            <div class="row">
                <div class="col">
                    <p>Label2</p>
                    <p class="about-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident nulla iure quod autem amet, ipsa beatae
                            voluptatibus maiores adipisci quae, expedita deserunt laborum architecto corporis dolore. Voluptates tenetur nisi
                            cupiditate?</p>
                </div>
                <div class="col">
                    <p>Another video frame</p>
                </div>
            </div>
        </div>
    </section>

.row {
    display: flex;
    justify-content: space-between;
}

.col {
    padding-left: 8.125rem;
    padding-right: 8.125rem;
    align-self: center;

    flex: 1;
    padding: 20px;
    position: relative;
}

.vertical-line {
    content: '';
    border-left: 1px solid var(--primary-text);
    border-right: 1px solid var(--primary-text);
    padding: 0;
    position: absolute;
    height: 48.75rem;
    right: 50%;

    transition: transform 1s;
}

@keyframes moveLine {
    0% { transform: translateX(0); }
    100% { transform: translateX(50px); }
} */

.hidden {
    visibility: hidden;
}

document.addEventListener('DOMContentLoaded', function() {
    const line = document.querySelector('.vertical-line');
    const sections = document.querySelectorAll('section');

    let options = {
        root: null,
        rootMargin: '0px',
        threshold: 0.1
    };

    let observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.remove('hidden');
            } else {
                entry.target.classList.add('hidden');
            }
        });
    }, options);

    sections.forEach(section => {
        observer.observe(section);
    });

    let scrollDirection = 'down';
    let lastScrollTop = 0;

    window.addEventListener('scroll', () => {
        let st = window.scrollY || document.documentElement.scrollTop;

        if (st > lastScrollTop) {
            scrollDirection = 'down';
        } else {
            scrollDirection = 'up';
        }
        lastScrollTop = st <= 0 ? 0 : st;

        if (scrollDirection === 'down') {
            line.style.transform = 'translateX(50vw)';
        } else {
            line.style.transform = 'translateX(-50vw)';
        }
    });
});

The line actually moves depending on the scroll, but it moves to the extreme position of the screen and when I stop scrolling it moves to the place where it is by default (on the left). But most importantly, it does not paint over the elements of section 1 and the elements of section 2 do not appear after it.

I don’t really know how to do this. What I actually want to do is “paginate”, so that this line will scroll the page, updating the elements.

Please tell me how to do this? I will be glad for any help. p.s. Sorry if I didn’t explain it well, I’m really bad at html, css, js.

I tried to reproduce the provided example using javascript and css, but it doesn’t work as I wanted.