Jump to content
Search Community

Draw SVG dash line on scroll

Husnain test
Moderator Tag

Recommended Posts

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

}

Link to comment
Share on other sites

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!

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...