Scroll Magic io, the last section to be visible for more time

Question

Im using scroll magic for first time and everything works fine but i really cant figure out how to make the last panel to stay on my page for more time before i scroll to the next content. i tired to add more height on my last panel but the last panel scrolls up and hides , and i want it the animation for the this last panel to hold a little bit more before scrolling out of the animation container.

i also tried using the duration inside my scene, only for the last panel liek this : duration: i === 2 ? 2000 : 0 , but it doesnt seem to work

this is my html simplified:

  <div id="pinContainer">
                                <section class="panel active">
                                    <div>
                                        <span>1</span>              
                                    </div>
                                </section>
                                
                                <section class="panel active">
                                    <div>
                                        <span>2</span>              
                                    </div>
                                </section>

                                <section class="panel active">
                                    <div>
                                        <span>3</span>              
                                    </div>
                                </section>
                            </div>

adn this is my js file:

$(function () {
    var controller = new ScrollMagic.Controller({
        globalSceneOptions: {
            triggerHook: 0.1,
            duration: '100%',
        },
    });

    var slides = document.querySelectorAll('section.panel');
    slides[0].classList.add('active');

    for (let i = 0; i < slides.length; i++) {
        new ScrollMagic.Scene({
            triggerElement: slides[i],
        })
            .setPin(slides[i], {
                pushFollowers: false,
                spacerClass: i === slides.length - 1 ? 'spacer-class' : '',
            })
            .on('enter leave', (event) => {
                if (event.type === 'enter' && event.scrollDirection === 'FORWARD') {
                    slides[i].classList.add('active');
                    if (i > 0) slides[i - 1].classList.remove('active');
                } else if (
                    event.type === 'leave' &&
                    event.scrollDirection === 'FORWARD'
                ) {
                    slides[i].classList.remove('active');
                    if (i < slides.length - 1) slides[i + 1].classList.add('active');
                } else if (
                    event.type === 'enter' &&
                    event.scrollDirection === 'REVERSE'
                ) {
                    slides[i].classList.add('active');
                    if (i < slides.length - 1) slides[i + 1].classList.remove('active');
                } else if (
                    event.type === 'leave' &&
                    event.scrollDirection === 'REVERSE'
                ) {
                    if (i !== 0) {
                        slides[i].classList.remove('active');
                        if (i > 0) slides[i - 1].classList.add('active');
                    }
                }
            })

            .addTo(controller);
    }
    });