How to use Scrollmagic to animate an SVG path as quickly as the scroll event?

Question

I have the following code snippet:

var controller = new ScrollMagic.Controller();

var $line =  $("#line");

$line.attr("stroke-dashoffset", $line[0].getTotalLength());
$line.attr("stroke-dasharray", $line[0].getTotalLength());

var tween = TweenMax.to($line, 1, {
  strokeDashoffset: 0,
  ease: "none"
});

var tlPath = new TimelineMax().add(
  tween
);

var pathScene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 2100,
    offset: 0,
    tweenChanges: true
  })
  .setTween(tlPath)
  .addIndicators({
    name: "path"
  })
  .addTo(controller);

body {
  margin: 0;
}

.scrollContent {
  height: 3000px;
  margin: 300px;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js"></script>
<div class="scrollContent">
  <section class="demo">
    <div id="trigger" class="spacer s0"></div>
    <div class="spacer s2"></div>
    <svg data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" width="50" height="2100" viewBox="0 0 50 2100">
  <path id="line" d="M48.17,.5V2094c0,5.5-4.5,5.5-4.5,5.5" style="fill: #fff; stroke: #000; stroke-miterlimit: 10; stroke-width: 4px;"/>
</svg>
  </section>
</div>

As you can see, the line falls behind after scrolling for a bit. I want the line to stay on the same position while it is drawn. I tried putting "ease:none" to the Tween, but that didn't do the trick.

How can I draw the line so it moves as quickly as I am scrolling?

Answer 1

Found the fix, I had the wrong syntax for easing. The proper syntax would have been ease: Power0.easeNone.

var controller = new ScrollMagic.Controller();

var $line = $("#line");

$line.attr("stroke-dashoffset", $line[0].getTotalLength());
$line.attr("stroke-dasharray", $line[0].getTotalLength());

var tween = TweenMax.to($line, 1, {
  strokeDashoffset: 0,
  ease: Power0.easeNone
});

var tlPath = new TimelineMax().add(
  tween
);

var pathScene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 2100,
    offset: 0,
    tweenChanges: true
  })
  .setTween(tlPath)
  .addIndicators({
    name: "path"
  })
  .addTo(controller);

body {
  margin: 0;
}

.scrollContent {
  height: 3000px;
  margin: 300px;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js"></script>
<div class="scrollContent">
  <section class="demo">
    <div id="trigger" class="spacer s0"></div>
    <div class="spacer s2"></div>
    <svg data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" width="50" height="2100" viewBox="0 0 50 2100">
  <path id="line" d="M48.17,.5V2094c0,5.5-4.5,5.5-4.5,5.5" style="fill: #fff; stroke: #000; stroke-miterlimit: 10; stroke-width: 4px;"/>
</svg>
  </section>
</div>