jquerysvggsapscrollmagic

Animate SVG Path on scroll

I'm using ScrollMagic & GSAP to animate an SVG path on scroll. This works perfectly fine. But as soon as I replace the path with another SVG from the Noun Project, the scroll path-animation no longer works.

I've tried adding containers, moving inline transforms from a g tag to the path tag itself, and many other methods from other solutions.

If anyone can help me understand what's going on, that would be much appreciated.

Solution

  • The reason it's not working is because this type of path animation works by animating the stroke of a path. Howver, the new path you have inserted has no stroke. It's:

    fill="#000000" stroke="none"

    If you remove the fill and give it an appropriate stroke, like this:

    fill="none" stroke="#000000" stroke-width="20"

    You'll get a better result.

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

    var $word = $("path#word");
    var $dot = $("path#dot");

    // prepare SVG
    pathPrepare($word);
    pathPrepare($dot);

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

    // build tween
    var tween = new TimelineMax()
        .add(TweenMax.to($word, 0.9, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw word for 0.9
        .add(TweenMax.to($dot, 0.1, {strokeDashoffset: 0, ease:Linear.easeNone}))  // draw dot for 0.1
        .add(TweenMax.to("path", 1, {stroke: "#33629c", ease:Linear.easeNone}), 0);         // change color during the whole thing

    // build scene
    var scene = new ScrollMagic.Scene({triggerElement: "#trigger1", duration: 250, tweenChanges: true})
                    .setTween(tween)
                    .addIndicators() // add indicators (requires plugin)
                    .addTo(controller);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/animation.gsap.js"></script>
<div style="height: 400px;"></div>
<div class="spacer s2"></div>
<div id="trigger1" class="spacer s0"></div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="350" height="200">
    <path transform="translate(0.000000,176.000000) scale(0.100000,-0.100000)"
fill="none" stroke="#000000" stroke-width="20" id="word" style="stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1009.23px; stroke-dashoffset: 1009.23px;" fill="none" stroke="#000000" stroke-width="5" d="M689 1620 c-131 -22 -181 -107 -128 -213 30 -59 149 -171 257 -242
l91 -59 -52 -22 c-80 -32 -188 -89 -232 -121 l-40 -30 -40 18 c-46 20 -251 69
-290 69 -49 0 -85 -28 -85 -67 0 -28 63 -147 107 -200 19 -24 29 -43 22 -43
-23 0 -79 -51 -99 -90 -27 -52 -26 -119 1 -154 44 -55 117 -73 235 -57 68 10
691 176 1069 285 66 19 120 34 120 33 5 -15 70 -106 130 -182 42 -54 94 -125
117 -159 81 -121 181 -206 243 -206 74 0 126 51 149 146 29 117 28 415 0 570
-6 31 -5 31 43 38 79 10 236 70 315 119 86 53 161 129 188 190 26 56 26 146 1
196 -37 71 -117 129 -229 166 -44 14 -78 16 -185 13 -150 -6 -236 -27 -418
-104 l-105 -44 -96 19 c-138 29 -248 45 -563 86 -477 61 -446 58 -526 45z
m496 -74 c353 -46 380 -50 551 -83 l140 -26 110 45 c203 86 335 114 482 105
101 -6 179 -32 245 -82 65 -49 87 -90 87 -159 0 -152 -142 -276 -417 -365 -59
-18 -34 3 45 39 164 75 298 187 323 270 25 83 -22 169 -117 216 -50 24 -72 28
-170 32 -136 5 -205 -8 -419 -82 l-150 -52 -90 18 c-82 17 -358 55 -670 94
-66 8 -200 18 -297 21 -155 5 -180 4 -202 -11 -30 -19 -33 -44 -10 -89 32 -61
68 -99 187 -194 114 -92 167 -141 167 -154 0 -8 -250 -113 -255 -107 -3 2 41
26 96 53 56 27 104 55 106 62 7 17 -23 50 -62 70 -38 20 -182 132 -216 169
-79 85 -103 169 -60 208 62 56 177 57 596 2z m-65 -60 c267 -31 590 -77 682
-95 l97 -20 118 43 c65 24 167 56 227 71 95 24 124 27 217 23 93 -4 114 -8
165 -34 155 -77 137 -208 -46 -334 -101 -69 -326 -170 -379 -170 -38 0 -41
-20 -26 -171 18 -180 18 -301 0 -403 -29 -165 -90 -151 -238 58 -40 56 -109
140 -155 187 -45 48 -93 106 -105 130 -13 24 -31 45 -40 47 -9 2 -130 -29
-269 -68 -322 -91 -858 -238 -915 -250 -110 -25 -185 89 -107 163 13 12 24 32
24 44 0 12 -32 70 -70 129 -39 60 -70 112 -70 116 0 15 84 -4 212 -47 l127
-43 83 43 c46 24 139 66 208 95 137 57 150 65 150 89 0 21 -87 105 -205 199
-92 73 -130 113 -158 169 -21 40 -21 40 1 47 30 9 342 -3 472 -18z m-906 -530
c-3 -14 1 -38 11 -57 14 -30 14 -32 0 -14 -20 25 -29 60 -21 80 9 24 17 17 10
-9z m321 -37 c35 -17 36 -18 10 -13 -16 3 -48 14 -70 24 -35 17 -36 18 -10 13
17 -3 48 -14 70 -24z m1706 12 c-7 -12 -7 -39 -1 -77 14 -81 13 -448 0 -510
-16 -74 -42 -111 -88 -125 -79 -23 -154 32 -270 198 -80 114 -243 327 -256
334 -6 4 -56 -7 -111 -23 -55 -16 -122 -35 -150 -42 -27 -8 -216 -60 -420
-116 -440 -122 -475 -130 -574 -131 -84 -1 -106 5 -138 34 -49 44 -20 152 52
197 41 25 50 47 30 74 -48 66 -67 97 -63 102 7 6 88 -118 88 -135 0 -7 -11
-26 -25 -43 -50 -59 -22 -163 53 -195 46 -20 83 -13 422 82 129 36 242 68 250
70 8 2 15 4 15 5 0 1 10 3 23 6 13 2 143 38 289 79 146 42 267 74 268 73 1 -2
12 -21 25 -43 14 -22 59 -76 101 -121 42 -45 89 -99 104 -120 16 -21 47 -64
69 -94 106 -147 176 -190 223 -138 28 32 42 73 51 148 8 71 -1 384 -13 467 -7
51 -7 51 21 56 16 2 30 5 32 6 1 0 -2 -7 -7 -18z"></path>
    <path id="dot" style="stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 44.2974px; stroke-dashoffset: 44.2974px;" fill="none" stroke="#000000" stroke-width="5" d="M247.003,38.567c-7.423,1.437-11.092,9.883-1.737,11.142c14.692,1.978,13.864-13.66,1.12-8.675"></path>
</svg>
<div class="spacer s2"></div>
<div style="height: 400px;"></div>

    Next, I anticipate you are going to ask why it's a mess of lines now - instead of just one single line.

    The reason is because your new path is not drawn as single outline path of the plane. The path actually contains six subpaths.

    See: https://codepen.io/PaulLeBeau/pen/eYvGmKV

    If you want it to work more like the original "magic" SVG, you will need to modify the plane SVG so that the plane outline consist of single stroke(s), and not long thin filled shapes that look like strokes.