GSAP 动画正在打破页面底部

Posted 2023-03-06

【中文标题】GSAP 动画正在打破页面底部

【英文标题】：GSAP animation is breaking the bottom of the page

【发布时间】：2022-01-18 04:12:26

【问题描述】：

我正在使用 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()

【问题讨论】：

您好，请创建minimal reproducible example

【参考方案1】：

我想通了。我需要将我的别针更改为外部容器。