Stick Element to show until Section Scroll to show other Element

[speeday]

Hello,

I am trying to show image class name "scrolling-img" through the content on scroll in bottom until the length of that section, below is an code.

HTML Code:-

<div id="aboutRapid">
<div class="scrolling--content">
                <div class="scrolling--section">
                    <p class="count">10</p>
                    <p class="desc">Years of expertise</p>
                </div>
                <img src="images/packaging.svg" class="img-fluid scrolling-img" alt="Packaging" />
                <div class="scrolling--section">
                    <p class="count">10</p>
                    <p class="desc">Years of expertise</p>
                </div>
                <div class="scrolling--section">
                    <p class="count">10</p>
                    <p class="desc">Years of expertise</p>
                </div>
            </div>
</div>

JS Code.

new ScrollMagic.Scene({
            triggerElement: ".about-rapid",
            duration: $('.scrolling--content').outerHeight() - 490,
            triggerHook: 0.30
        })
        .setPin(".scrolling-img", {
            pushFollowers: false,
        })
        .addIndicators()
        .addTo(controller);

It is working but having more jerk at the End of Trigger without Smoothness.

So I want to know is this above code is correct...?