Hello guys,
I have a SVG dash polyline in my project. The query is that when I animate that line it becomes solid instead of dash line.
I know that I can achieve this using 'DrawSVGPlugin' but I want to animate using TweenMax or any other free plugin
your help is highly appreciated in this regard.
code:
************HTML*************
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" id="hero-svg">
<polyline id="polyline" fill="none" stroke="#9a201c" stroke-width="2" stroke-dasharray="10,10" class="polyline" points="100,100 300,150 300,500">
</svg>
************Scroll Magic*************
var controller = new ScrollMagic.Controller();
function pathPrepare ($el) {
var lineLength = $el[0].getTotalLength();
$el.css("stroke-dasharray", 100);
$el.css("stroke-dashoffset", 100);
}
var companyLine = '#polyline';
pathPrepare($(companyLine));
var s5Tween = new TimelineMax();
s5Tween.to($(companyLine), 1, {strokeDashoffset: 0,ease:Linear.easeNone})
var scene5 = new ScrollMagic.Scene({
triggerElement: "#polyline"
})
.setTween(s5Tween)
.addIndicators()
.addTo(controller);
}
