1

I'm newer to working with SVG animations so I apologize in advanced if there is a straightforward answer to this. With a combination of utilizing Scrollmajic.js and GASP I was able to get the SVG to animate when the user scrolls to a specific position. The issue i'm running into is that the animation converts it from a dashed line to a solid stroke. I've done some research and found that using a mask would be the best way to accomplish this though I'm a bit lost on how to approach this method.

https://codepen.io/ncanarelli/pen/wvaeLNa

js: 

$(document).ready(function() {
    function pathPrepare ($el) {
        var lineLength = $el[0].getTotalLength();
        $el.css("stroke-dasharray", lineLength);
        $el.css("stroke-dashoffset", lineLength);
    }

    // init controller
    var controller = new ScrollMagic.Controller();

    // loop through all elements
    $(".svg-animation").each(function() {

        var $thePath = $(this).find("path#thePath");

        // prepare SVG
        pathPrepare($thePath);

        // build tween
        var tween = new TimelineMax()
            .add(TweenMax.to($thePath, 1, {
                strokeDashoffset: 0, 
                ease:Linear.easeNone
            }))

        // build scene
        var scene = new ScrollMagic.Scene({
            triggerElement: $(this)[0],
            duration: 200, 
            tweenChanges: true,
            reverse: true
        })
        .setTween(tween)
        .addTo(controller)
        .addIndicators();
    });
});

UPDATE: Updated .js to reflect an .each loop + other modifications. Still having issues with implementing a mask.

Nick
  • 1,471
  • 2
  • 21
  • 35
  • What is your problem? Is it iimplementing the mask approach, or implementing it with GSAP? – Paul LeBeau Mar 02 '20 at 18:30
  • Here's a working example of the mask approach: https://stackoverflow.com/questions/56704940/how-to-do-an-animated-dashed-svg-line and another one here: https://stackoverflow.com/questions/45540161/make-the-on-scroll-growing-path-to-dashed-line – Paul LeBeau Mar 02 '20 at 18:32

0 Answers0