Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Husnain

Members
  • Posts

    3
  • Joined

  • Last visited

Posts posted by Husnain

  1. 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.

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

    }

×