[Draw SVG dash line on scroll]

On 6/12/2021 at 4:43 PM, Cassie said:

Hi there - we don't recommend using scrollmagic.

We have our own scroll plugin - ScrollTrigger, it's better in pretty much every way and (obviously) works better with GSAP.

Secondly, tweenMax is an old version of GSAP, so I'd recommend you use GSAP 3 instead. 

You can target the offset of the stroke directly with GSAP,  you'll need to look into how SVG line animation works in order to acheive that. It won't be as easy or flexible as DrawSVG though. Good luck!

Thank you so much for your response.

[Draw SVG dash line on scroll]

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);

}

[Draw SVG and Dashed line problem]

Is it possible to draw this dashed line animation without 'drawSVG'? Please help...