gsap中DrawSVGPlugin替换写法

关于gsap中的DrawSVGPlugin收费效果

最近使用gsap中的DrawSVGPlugin 作svg线性路劲动画插件，发现是收费的插件，我就想怎么替换

Html 内容

<section class="panel section-two" id='section2'>
<svg id="svg" 
            data-name="图层 2" 
            xmlns="http://www.w3.org/2000/svg" 
            xmlns:xlink="http://www.w3.org/1999/xlink" 
            viewBox="0 0 1972.61 1210.16">
                                    <defs>
                                    
                                    <linearGradient id="_未命名的渐变_3" data-name="未命名的渐变 3" x1="188.53" y1="5393.54" x2="1498.4" y2="6149.79" gradientTransform="translate(0 6459.22) scale(1 -1)" gradientUnits="userSpaceOnUse">
                                        <stop offset="0" stop-color="#0918e1"/>
                                        <stop offset="1" stop-color="#557cfc"/>
                                    </linearGradient>
                                    </defs>
                                    <g id="_图层_1-2" data-name="图层 1">
                                    <g id="_首页_图像" data-name=" 首页 图像">
                                        <path class="cls-1 theLine" d="m16.5,16.5c291.51,94.54,428.85,287.02,492.59,494.05,57.65,187.27,38.58,373.8-90.93,445.07C-13.35,1138.35,37.57,605.08,309.77,474.54c209.85-122.93,438.04,114.91,656.78,292.39,142.32,111.25,278.36,187.06,368.78,151.02,123.8-33.37,494.34-228.29,620.78,275.71"/>
                                    </g>
                                    </g>
                                </svg>
          </section>
                                

DrawSVGPlugin 写法

gsap.registerPlugin(ScrollTrigger, DrawSVGPlugin, MotionPathPlugin);
   gsap.from('.theLine', {
		scrollTrigger: {
			trigger: "#section2",
			start: 'top top',
            end: "+=200",
			scrub: 1.9
		},
		drawSVG: 0
	});

替换写法

 	 let path = document.querySelector('.theLine');
    let l = path.getTotalLength();
     const svgGsap = gsap.timeline({ paused: true,})
    svgGsap.set(path, {strokeDasharray:l});
    svgGsap.fromTo(path, 3, {strokeDashoffset:l}, {strokeDashoffset:0});

    ScrollTrigger.create({
        trigger: "#section2",
        start: 'top top',
        end: "+=200",
        animation: svgGsap,
        scrub: 1.9
    });