使用jQuery和ScrollMagic

Question

滚动动画时间表

我现在有

我建立使用jQuery和ScrollMagic的HTML/CSS/JS滚动时间线（与GSAP插件）。我具有基本的时间轴功能，随着页面向下滚动，时间线事件动画化。

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

我想添加什么

我的问题是关于执行哪个分支从中心垂直线到每个时间轴事件，因为他们淡入水平线的最好方法。理想情况下，水平线会像中心线一样生动，但淡入淡出也可以。

我知道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); 

Answer 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});