https://greensock.com/forums/topic/28173-scrolltrigger-motionpath-on-a-fixed-element-with-x-translation/
https://greensock.com/forums/topic/29120-control-the-revealing-process-the-duration-of-the-animation-during-scrolling/
https://greensock.com/forums/topic/29189-scroll-animation-svg-fill-when-onscroll/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SVG Scroll Drawing，geovindu,涂聚文，Geovin Du</title>
<meta name="Description" content="geovindu"/>
<meta name="Keywords" content="geovindu"/>
<meta name="author" content="geovindu"/>
<style type="text/css">
body {
background: linear-gradient(#a8ff78, #78ffd6);
font-family: 'Didact Gothic', sans-serif;
}
.wrapper {
margin: 0 auto;
width: 1100px;
}
.container {
height: 800px;
}
.svg {
width: 500px;
height: 500px;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
<script type="text/javascript">
// Thanks, CSS Tricks, for the guidance! https://css-tricks.com/scroll-drawing/
// getting the length of the svg path
const svg = document.getElementById("svgPath");
const length = svg.getTotalLength();
// start position of the drawing - normal display pre-animation
svg.style.strokeDasharray = length;
// hides the svg before the scrolling starts
svg.style.strokeDashoffset = length;
// offset the svg dash by the same amount as the percentage scrolled
window.addEventListener("scroll", function () {
const scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
const draw = length * scrollpercent;
// Reverse the drawing (when scrolling upwards)
svg.style.strokeDashoffset = length - draw;
});
</script>
</head>
<body>
<div class="wrapper">
<h1>SVG Scroll Drawing</h1>
</div>
<div class="container">
<!--SVG from The Noun Project, LSE Deisngs, PH-->
<svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 920 920" version="1.1" x="0px" y="0px">
<path fill="none" stroke="black" stroke-width="4" id="svgPath" class="animate" opacity="1.00" d=" M 390.05 144.58 C 403.06 143.38 416.23 145.49 428.55 149.70 C 440.73 154.22 451.73 161.48 461.21 170.31 C 470.40 161.59 481.17 154.52 493.02 149.98 C 505.19 145.68 518.20 143.53 531.11 144.46 C 543.66 145.75 556.02 150.20 566.18 157.75 C 571.90 161.55 576.66 166.55 581.35 171.51 C 588.84 180.02 595.83 189.18 600.33 199.66 C 607.66 216.00 608.88 234.24 608.39 251.91 C 607.82 288.63 597.73 324.78 581.59 357.62 C 575.65 370.48 568.58 382.79 561.00 394.76 C 570.86 402.66 580.60 410.73 590.18 418.97 C 613.66 401.37 639.25 385.81 667.55 377.39 C 681.59 372.78 697.55 371.01 711.54 376.70 C 723.09 382.40 732.41 393.18 735.45 405.81 C 750.07 402.53 765.80 401.65 780.10 406.86 C 792.05 410.82 805.04 417.05 809.74 429.65 C 820.67 424.25 833.44 423.52 845.15 426.58 C 853.35 428.54 861.39 431.29 868.92 435.13 C 875.87 438.52 884.05 440.04 891.65 438.31 C 893.77 436.58 893.71 432.57 896.89 431.83 C 902.02 430.83 906.65 436.15 906.01 441.12 C 906.02 446.70 900.80 450.43 895.91 451.79 C 889.38 453.46 882.48 453.14 875.88 452.15 C 866.27 450.65 858.23 444.67 848.94 442.16 C 841.22 440.03 833.11 437.56 825.06 439.32 C 820.33 440.17 815.94 442.16 811.60 444.13 C 811.17 451.71 808.71 459.58 803.02 464.88 C 798.36 469.39 791.61 473.39 784.95 471.16 C 778.70 468.88 777.11 460.94 779.37 455.26 C 782.58 446.82 790.00 440.94 797.22 435.96 C 793.65 425.98 782.56 422.58 773.47 419.52 C 761.43 415.31 748.48 417.19 736.37 419.97 C 733.66 438.67 723.07 455.57 708.94 467.83 C 699.93 474.96 689.57 481.03 678.09 482.88 C 667.41 484.31 658.24 473.24 659.59 463.02 C 660.61 452.52 667.67 444.00 674.85 436.82 C 687.88 423.85 704.24 414.30 721.92 409.28 C 719.71 401.00 713.86 393.77 706.28 389.81 C 698.06 386.14 688.70 386.64 680.09 388.50 C 650.86 395.37 624.78 411.18 600.59 428.45 C 615.25 441.47 629.03 455.79 639.61 472.38 C 649.30 487.29 653.37 505.35 653.03 523.00 C 653.38 536.05 649.85 548.86 644.80 560.80 C 635.66 578.88 621.95 596.15 602.42 603.44 C 591.51 607.96 579.27 607.89 567.96 605.01 C 554.10 601.23 541.00 594.39 530.34 584.73 C 519.70 574.22 511.84 560.21 510.99 545.06 C 509.45 524.57 517.49 504.92 527.33 487.39 C 540.16 464.22 558.31 444.33 578.80 427.69 C 570.43 420.48 561.81 413.58 553.35 406.48 C 526.86 445.18 497.41 481.71 469.78 519.57 C 481.68 536.58 493.58 553.77 502.24 572.72 C 514.05 599.02 519.96 628.13 518.30 656.96 C 517.53 668.14 515.27 679.16 512.14 689.91 C 508.85 700.16 505.50 710.56 499.58 719.65 C 493.39 729.18 485.73 737.98 476.14 744.20 C 472.36 746.74 468.64 749.41 464.58 751.50 C 462.65 752.47 460.26 752.62 458.29 751.70 C 443.67 744.13 430.75 732.98 422.18 718.81 C 414.42 705.82 410.13 691.11 406.78 676.45 C 401.91 654.04 403.17 630.68 408.20 608.42 C 413.22 585.42 423.14 563.67 435.98 544.01 C 441.19 535.65 447.12 527.70 452.33 519.39 C 443.32 506.58 433.60 494.29 424.25 481.73 C 410.59 464.02 397.39 445.97 384.09 427.99 C 379.08 420.85 373.84 413.86 369.17 406.48 C 360.56 413.45 351.92 420.41 343.60 427.73 C 371.98 450.70 395.68 480.49 407.58 515.32 C 411.71 528.81 413.13 543.56 409.13 557.25 C 404.42 572.32 393.89 585.35 380.44 593.53 C 368.88 600.77 355.74 606.02 342.04 606.93 C 329.91 607.94 317.84 603.74 307.76 597.20 C 294.73 588.61 285.26 575.65 278.14 561.96 C 266.90 538.79 266.59 511.18 275.15 487.11 C 280.86 472.95 290.26 460.64 300.43 449.40 C 307.23 442.09 314.11 434.81 321.78 428.40 C 301.79 414.42 280.96 401.09 257.77 393.08 C 246.68 389.35 234.92 385.58 223.10 387.67 C 211.96 389.24 203.40 398.87 200.33 409.30 C 220.90 415.06 239.74 427.04 253.49 443.40 C 259.04 449.95 263.49 458.24 262.72 467.09 C 261.73 474.30 256.40 481.09 249.15 482.73 C 243.16 483.77 237.36 481.32 231.88 479.23 C 208.01 468.86 189.92 445.74 186.00 419.97 C 180.38 418.85 174.77 417.54 169.03 417.19 C 156.96 416.11 144.94 419.84 134.40 425.50 C 130.08 427.65 126.85 431.42 125.06 435.87 C 132.05 440.70 138.97 446.38 142.65 454.23 C 144.37 458.95 144.77 465.08 140.80 468.82 C 136.91 473.12 130.18 472.23 125.60 469.57 C 116.27 464.77 110.93 454.42 110.71 444.13 C 103.36 440.63 95.22 437.68 86.96 439.03 C 77.48 440.51 68.20 443.38 59.63 447.71 C 49.90 452.70 38.49 454.02 27.78 452.15 C 22.40 451.02 16.42 447.12 16.44 441.02 C 15.98 436.02 20.62 430.50 25.89 431.92 C 28.63 432.95 28.85 436.33 30.63 438.31 C 38.96 440.19 47.81 438.22 55.25 434.24 C 67.34 428.71 80.47 424.42 93.90 424.81 C 100.37 425.16 106.73 426.87 112.56 429.68 C 117.25 416.87 130.62 410.67 142.70 406.70 C 156.88 401.59 172.40 402.68 186.90 405.72 C 189.90 393.60 198.48 383.25 209.39 377.36 C 216.34 373.84 224.28 373.04 231.96 373.23 C 239.47 373.34 246.91 374.77 254.02 377.16 C 282.59 385.55 308.47 401.18 332.12 418.98 C 341.76 410.81 351.39 402.63 361.29 394.77 C 349.28 375.96 339.14 355.97 330.92 335.22 C 320.09 307.82 314.11 278.48 313.83 249.00 C 313.85 236.52 314.27 223.84 317.71 211.76 C 322.13 194.54 332.77 179.58 345.20 167.16 C 356.95 154.78 373.03 146.43 390.05 144.58 M 357.05 175.06 C 349.36 182.55 342.43 190.91 337.25 200.34 C 331.14 211.57 328.62 224.39 327.97 237.06 C 326.53 265.87 331.55 294.81 340.94 322.00 C 349.14 344.32 359.61 365.81 372.31 385.92 C 387.72 373.57 403.11 361.18 418.01 348.20 C 430.08 337.21 442.63 326.48 452.46 313.34 C 447.19 304.64 442.07 295.76 439.00 286.01 C 430.79 263.57 427.57 238.56 434.14 215.30 C 437.34 202.62 444.20 191.23 452.02 180.89 C 449.00 178.25 446.00 175.59 442.77 173.21 C 429.40 163.17 412.62 158.22 395.99 158.10 C 381.52 158.79 367.44 164.98 357.05 175.06 M 470.41 180.86 C 480.50 194.11 488.29 209.46 490.53 226.11 C 493.71 246.09 490.29 266.54 483.47 285.42 C 480.39 295.36 475.29 304.48 469.85 313.30 C 479.18 325.77 490.97 336.07 502.42 346.52 C 517.91 360.08 533.90 373.04 549.99 385.87 C 554.47 378.96 558.47 371.75 562.47 364.56 C 572.18 345.66 580.94 326.14 586.48 305.57 C 591.80 285.85 594.68 265.44 594.72 245.00 C 594.35 232.07 593.17 218.87 588.12 206.82 C 583.07 194.55 574.44 184.15 565.08 174.92 C 552.55 162.83 534.48 156.18 517.11 158.67 C 499.57 160.46 483.01 168.60 470.41 180.86 M 461.21 191.96 C 455.91 199.77 450.74 207.92 448.27 217.12 C 445.95 224.20 444.96 231.63 444.53 239.05 C 443.99 249.70 446.28 260.22 448.74 270.51 C 451.83 280.85 455.33 291.23 461.20 300.37 C 465.70 293.05 469.02 285.09 471.55 276.90 C 477.79 258.19 480.34 237.57 474.45 218.42 C 472.03 208.74 466.73 200.15 461.21 191.96 M 427.56 358.45 C 412.09 371.96 396.15 384.94 379.97 397.60 C 405.67 435.20 433.92 470.98 461.22 507.40 C 488.27 470.81 516.75 435.26 542.33 397.62 C 530.00 388.03 517.96 378.08 505.95 368.10 C 490.30 354.52 474.29 341.07 461.13 324.99 C 451.32 337.43 439.29 347.88 427.56 358.45 M 679.15 452.91 C 676.14 456.43 674.15 460.69 673.19 465.21 C 674.00 466.59 674.88 467.95 675.84 469.25 C 697.88 464.17 715.01 445.46 721.30 424.15 C 705.05 429.81 690.09 439.57 679.15 452.91 M 201.01 424.04 C 206.80 444.28 222.49 461.93 242.81 468.27 C 244.40 468.68 246.68 469.59 247.75 467.77 C 249.37 465.81 248.73 463.18 247.93 461.03 C 245.58 454.68 240.65 449.79 235.92 445.15 C 226.03 435.63 213.83 428.78 201.01 424.04 M 540.23 493.16 C 532.03 507.83 524.66 523.83 524.74 540.98 C 524.85 553.59 530.91 565.53 539.73 574.32 C 548.92 582.57 560.19 588.44 572.13 591.55 C 577.63 592.61 583.36 593.95 588.95 592.64 C 601.89 590.48 613.23 582.41 621.07 572.10 C 632.67 558.12 639.20 540.11 639.27 521.96 C 638.96 507.62 636.07 492.86 628.20 480.66 C 617.90 464.02 603.86 450.15 589.48 437.05 C 570.02 452.73 552.46 471.23 540.23 493.16 M 298.26 474.24 C 293.17 481.97 288.03 490.01 286.16 499.23 C 280.15 520.46 282.91 544.34 294.87 563.04 C 297.75 568.02 301.43 572.48 305.20 576.81 C 313.70 585.95 325.43 592.42 338.02 593.21 C 352.11 592.70 365.58 587.03 376.97 578.95 C 385.88 572.58 392.47 563.17 395.81 552.77 C 399.51 539.88 396.88 526.12 392.08 513.88 C 380.09 483.32 358.47 457.25 332.79 437.12 C 320.25 448.46 308.24 460.54 298.26 474.24 M 461.19 531.60 C 450.15 547.51 439.21 563.67 431.57 581.55 C 424.22 598.48 419.94 616.63 418.16 634.97 C 416.44 649.72 418.28 664.68 421.83 679.03 C 425.69 694.95 431.53 711.04 443.00 723.12 C 448.15 728.93 454.72 733.15 461.20 737.32 C 466.58 733.76 472.08 730.27 476.72 725.75 C 484.37 718.28 490.38 709.14 494.18 699.14 C 501.26 680.42 505.67 660.36 504.62 640.25 C 503.07 619.62 498.64 599.04 490.12 580.12 C 482.53 562.81 471.80 547.16 461.19 531.60 Z"></path></svg>
</div>
</body>
</html>