Question

我将ScrollMagic与GSAP结合使用，以实现nytimes网站中的动画效果。我的HTML代码如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="scenes-wrapper">
        <div class="scenes active" id="scene-1"><!-- 3 to 5 big images inside --></div>
        <div class="scenes" id="scene-2"><!-- 3 to 4 big images inside --></div>
        <div class="scenes" id="scene-3"><!-- 3 to 4 big images inside --></div>
    </div>
</body>
</html>

.scenes默认隐藏（display:none）execpt .active类。例如我的滚动条在#scene-1上，然后滚动到#scene-2部分，这将导致场景1松散活动类，而场景2现在具有活动类。问题是，当按下.scenes滚动条向下跳转时，转换不顺畅，但如果我向上滚动并再次向下滚动，则动画变得平滑。

是什么导致这个？我已尝试将display更改为visibility和opacity，但结果相同。另外，我使用预加载来预加载图像。

可以找到完整的应用here

在可见元素之间切换滞后

0 个答案: