<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_wrap');
    const bar = document.querySelector('.history_wrap .bar');
    const boxes = document.querySelectorAll('.history_wrap .box');

    if (!wrap || !bar) return;

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

    // line 높이 조절
    gsap.to(bar, {
        height: () => wrap.offsetHeight,
        ease: 'none',
        scrollTrigger: {
            trigger: wrap,
            start: 'top center',
            end: 'bottom center',
            scrub: 3,
            invalidateOnRefresh: true
        }
    });

    // 화면중앙에 인접한 box 에 클래스 부여
    boxes.forEach((box) => {
        ScrollTrigger.create({
            trigger: box,
            start: 'top center',
            // end: 'bottom center',
            toggleClass: {
                targets: box,
                className: 'active'
            }
        });
    });

});
</script>