0

What I currently have

I'm building an HTML/CSS/JS scrolling timeline using jQuery and ScrollMagic (with GSAP plugin). I have the basic timeline functionality working, with timeline events animating as the page scrolls down.

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

What I would like to add

My question is regarding the best method of implementing horizontal lines which branch from the center vertical line to each of the timeline events as they fade in. Ideally, the horizontal lines would animate as if being drawn from the center line, but a fade could work as well.

I know that ScrollMagic has the ability to draw SVGs, but I'm unsure if there is a more efficient method. For instance, perhaps using HTML5 canvas or just simple images would make more sense for this application. I'm aiming to keep the page responsive, so that's something to consider.

Any advice or demonstration regarding this topic would be much appreciated.

Example of current "event animation", which takes advantage of ScrollMagic and GSAP. I have a block of code like this for each year in the timeline. This is most likely where the horizontal line animations would be added in:

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);
conbask
  • 9,741
  • 16
  • 57
  • 94

1 Answers1

0

Why not just use a 1px tall div? I'd think that'd be a lot more lightweight than drawing an SVG. I updated your JSFiddle using the div method in the first item: https://jsfiddle.net/jameson5555/abyk4gcj/8/

Here's the basic idea:

<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});
jameson
  • 201
  • 1
  • 5