<div class="history_list_wrap">
    <div class="line">
        <div class="bar"></div>
    </div>

    <div class="box rig">
        <span class="year">2025</span>
        <ul class="list">
            <li>
                <strong>03.01</strong>
                <p>주사무소 이전</p>
            </li>
            <li>
                <strong>02.28</strong>
                <p>주사무소 이전 2</p>
            </li>
        </ul>
    </div>
</div>
... 이하 생략 ...

<script>
gsap.registerPlugin(ScrollTrigger);

window.addEventListener('load', () => {

    const wrap = document.querySelector('.history_list_wrap');
    const bar = document.querySelector('.history_list_wrap .bar');

    gsap.set(bar, {
        height: 0
    });

    gsap.to(bar, {
        height: wrap.offsetHeight,
        ease: 'none',
        scrollTrigger: {
            trigger: wrap,
            start: 'top center',
            end: 'bottom center',
            scrub: true,
            invalidateOnRefresh: true
        }
    });

});
</script>