GSAP animation is breaking the bottom of the page

Question

I am using GSAP to run an animation where an image enters the viewport, then the page stops scrolling and the image fades into a second image. Once this animation is complete the page continues to scroll.

I have noticed once you get the the end of the section the text is overlapping.

See both screen shots...

The correct spacing:

The end result after the animation:

Here is the animation code:

var elements
var windowHeight

function init() {
    elements = document.querySelectorAll('.animated-photo-section')
    windowHeight = window.innerHeight
}

function checkPosition() {

    for (var i = 0; i < elements.length; i++) {
        
        var element = elements[i]
        var elementHeight = elements[i].offsetHeight
        var scrollHeight = elementHeight + elementHeight / 4

        $(element).find('.animated-photo-image-outline').addClass('anima-'+i)
        $(element).find('.animated-photo-image-full').addClass('anima-'+i)

        const index = i

        gsap.to(element, {
          scrollTrigger: {
            trigger: element,
            pin: '.content-section',
            start: 'top 100',
            end: '+='+scrollHeight,
            scrub: 1,
            toggleActions: "play none none none",
            // markers: true,
            onUpdate: (self) => {
                document.querySelector('.animated-photo-image-outline.anima-'+index).style.opacity = 1- self.progress.toFixed(3)
                document.querySelector('.animated-photo-image-full.anima-'+index).style.opacity = self.progress.toFixed(3)
            },
          }
        })

    }
}

window.addEventListener('resize', init)

init()
checkPosition()

Answer 1

I figured it out. I needed to change my pin to the outer container.