<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section class="spacer"></section>
<section id="animated-section">
<svg id="line-svg" xmlns="http://www.w3.org/2000/svg" width="500" height="1500">
<path id="line" fill="none" stroke="#88CE02" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M250,1500c32.05-75.52,29.67-155.29,5.86-195.76s-76.19-31-76.19-31-126.19,19-123.81-57.15S141.57,1109,141.57,1109s146.43-34.52,188.1,96.43,94-78.57,94-78.57,23.81-98.81-44-146.43S232.05,909,232.05,909,4.67,830.43,119,765,390.38,609,279.67,569.71,70.14,491.14,207.05,324.48s125-195.24,90.47-248.81S241.79,0,241.79,0" />
</svg>
</section>
<section class="spacer"></section>
body{
background-color: #333;
}
.spacer{
height: 800px;
}
#animated-section{
background-color: #444;
height: 1500px;
}
// Line Scene
var controller = new ScrollMagic.Controller();
var glow_line = document.getElementById('line');
var trigger_element = document.getElementById('animated-section');
var lineTl = new TimelineMax();
var lineTween = lineTl
.set(glow_line, {
drawSVG:'100% 100%'
})
.to(glow_line, 5, {
drawSVG:'0% 100%',
ease:Linear.easeNone
})
var lineScene = new ScrollMagic.Scene({
triggerElement: trigger_element,
offset: 0,
reverse:true,
duration: $("#line-svg").height()
})
.setTween(lineTween)
.addTo(controller)
.addIndicators();
