GSAP 动画打破了页面底部

Question

我正在使用 GSAP 运行一个图像进入视口的动画，然后页面停止滚动并且图像淡入第二个图像。此动画完成后，页面继续滚动。

我注意到，一旦您读完该部分的末尾，文本就会重叠。

查看两个屏幕截图...

正确的间距：

动画后的最终效果：

动画代码如下：

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

我想通了。我需要将我的密码更改为外容器。

GSAP 动画打破了页面底部

GSAP animation is breaking the bottom of the page

javascript

css

animation

gsap