使用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});