"SVG animation"
Bootstrap 4.1.1 Snippet by ranjit1602

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .svg-container{ position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 3000px; } svg{ height: 100%; } </style> <body> <secrtion class="section-1"></secrtion> <div class="svg-container"> <svg width="1280" height="3000" viewBox="0 0 266 664" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M250 3.00001C249.34 2.67001 248.68 2.34001 231.345 2.00501C214.01 1.67001 180.02 1.34001 162.015 1.33501C143.017 1.32973 141.01 2.66001 139.015 3.82501C129.539 9.35888 117.02 24.64 112.85 29.15C108.359 34.0074 100.4 44.58 91.855 56.965C88.6639 61.5902 87.34 65.98 84.345 69.985C81.3041 74.0514 80.34 81.3 79.005 86.315C77.1553 93.2635 76 101.96 72.68 129.19C69.71 153.549 72.33 169.32 72.83 172.31C74.8878 184.616 79.66 200.64 89.125 210.795C95.1758 217.287 103.62 219.32 110.645 220.995C115.374 222.123 123.28 224.32 132.62 225.495C152.084 227.944 164.58 230.66 180.615 234.485C188.712 236.416 197.94 239.32 204.975 241.49C214.629 244.468 219.64 247.98 226.965 252.81C239.257 260.915 245.64 266.64 249.65 272.635C258.365 285.664 259.32 299.6 261.825 307.81C263.658 313.817 264.32 322.62 264.67 352.375C264.91 372.812 258.68 380.64 256.675 385.48C253.423 393.331 248.02 400.3 241.53 406.975C237.454 411.167 232.35 413.32 229.025 415.485C226.07 417.409 212.45 420.63 193.795 426.295C179.612 430.602 170.04 431 157.74 432.66C141.028 434.915 128.02 433.33 111.16 433.83C96.2856 434.271 68.56 434 53.785 434.165C35.9915 434.364 31.36 436.32 27.015 439.485C20.5513 444.193 17.68 452.64 14.18 458.97C11.3607 464.069 9.36 478.56 5.03 496.87C2.13231 509.123 2 516.31 1.835 520.8C1.68115 524.987 0.999995 539.21 1.825 560.515C2.402 575.416 9.96 588.59 16.29 600.915C20.959 610.006 30.26 621.24 48.095 636.45C56.7746 643.852 71.25 647.31 88.205 651.635C105.639 656.082 119.29 657.33 127.11 658.16C130.655 658.536 133.28 659.32 148.5 660.155C163.72 660.99 191.44 661.98 206.71 662.325C227.325 662.791 231.98 659.68 236.98 658.505C242.32 655.67 250.28 653.02 256.98 651.17C258.32 651 259.64 651 263 650" stroke="black" stroke-width="2" stroke-linecap="round" stroke="#000000" stroke-width="10"/> </svg> </div> <script src="minified/gsap.min.js"></script> <script src="minified/ScrollTrigger.min.js"></script> <script src="script.js"></script> </body> </html>
let svg = document.querySelector("svg"); let path = svg.querySelector("path"); const pathLength = path.getTotalLength(); console.log(pathLength); gsap.set(path, { strokeDasharray: pathLength }); gsap.fromTo( path, { strokeDashoffset: pathLength, }, { strokeDashoffset: 0, duration: 10, ease:"none", scrollTrigger: { trigger: ".svg-container", start: "top top", end: "bottom bottom", scrub: 1, }, } );

Related: See More

Datepicker
Ripple Dot Animation
Success and Error Icon Animation
Bootstrap4 navigation border animation

Questions / Comments: