Husnain Posted June 12, 2021 Share Posted June 12, 2021 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 More sharing options...
Cassie Posted June 12, 2021 Share Posted June 12, 2021 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! 4 1 Link to comment Share on other sites More sharing options...
Husnain Posted June 16, 2021 Author Share Posted June 16, 2021 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now