使用 jQuery 和 ScrollMagic 滚动动画时间轴答案

【问题标题】：Scrolling animated timeline using jQuery and ScrollMagic使用 jQuery 和 ScrollMagic 滚动动画时间轴
【发布时间】：2016-01-18 11:13:30
【问题描述】：

我目前拥有的

我正在使用 jQuery 和 ScrollMagic（使用 GSAP 插件）构建 HTML/CSS/JS 滚动时间轴。我有基本的时间线功能，当页面向下滚动时，时间线事件会生成动画。

jsFiddle of the page in its current state (scroll down)

我要补充的内容

我的问题是关于实现水平线的最佳方法，水平线从中心垂直线分支到每个时间线事件，因为它们淡入。理想情况下，水平线会像从中心线绘制一样动画，但是fade 也可以。

我知道 ScrollMagic 有draw SVGs 的能力，但我不确定是否有更有效的方法。例如，也许使用 HTML5 画布或仅使用简单的图像对这个应用程序更有意义。我的目标是保持页面响应，所以这是需要考虑的事情。

非常感谢任何有关此主题的建议或演示。

当前“事件动画”的示例，它利用了 ScrollMagic 和 GSAP。我在时间轴上每年都有这样的代码块。这是最有可能添加水平线动画的地方：

var tween1 = new TimelineMax()
    .fromTo("#section1 .left", .5, {left: "10%", opacity: 0, scale: .5}, {left: "0%", opacity: 1, scale: 1})
    .fromTo("#section1 .right", .5, {right: "10%", opacity: 0, scale: .5}, {right: "0%", opacity: 1, scale: 1});

var scene1 = new ScrollMagic.Scene({triggerElement: "#section1 .center #point", triggerHook: 0.5, offset: pointHeight})
    .setTween(tween1)
    .addTo(controller);

【问题讨论】：

您是否尝试过使用 draw SVG 并遇到任何性能问题？

标签： javascript jquery gsap scrollmagic

【解决方案1】：

为什么不直接使用 1px 高的 div？我认为这比绘制 SVG 轻得多。我使用第一项中的 div 方法更新了您的 JSFiddle：https://jsfiddle.net/jameson5555/abyk4gcj/8/

这是基本的想法：

<div class="timeline-item">
    <div class='h-line'></div>
    <img src="Board_Transparent.png">
    <p>1980 - Event #1</p>
</div>

.h-line {
    height: 1px;
    position: absolute;
    top: 50px;
    right: 0;
    left: auto;
    background: #fff;
    width: calc(100% - 75px);
}

.from("#section1 .h-line", .5, {width: 0});

【讨论】：