GSAP MorphSVGPlugin question: How to to control and adjust the shape of the morph while the transformation?

Question

I am trying to animate a road in the way it follows its curve. Initially I have tried this with masking, but the result is not exactly what I want.

Now I try to do it with the GSAP MorphSVGPlugin. The best result I achieved is in this CodePen: https://codepen.io/doolak/pen/oNaBZdx.

How can I modify the morph transformation in the way it reveals the road from right to left, beginning with the initial rectangle, revealing the road smoothly on its path?

Maybe there is a totally different way to achieve that? Or am I on the right way?

<svg width="100%" height="100%" viewBox="0 0 13409 7580" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
        <defs>
            <clipPath id="clip-path-road-part1">
                <rect id="rectClip" x="13308" y="4900" width="100" height="2000" style="fill:black"/>
            </clipPath>
            <path id="road-path" d="M3663.97,3885.8c-352.866,-181.191 418.996,-366.45 899.629,-470.829l0,-86.016l-110.787,-0c-0,-0 -3086.59,279.079 -1938.26,1118.38c1805.98,1319.98 10893.5,2305.67 10893.5,2305.67l0,-1757c0,-0 -8682.41,-565.054 -9744.07,-1110.21" style="fill:#f3f8ff;fill-rule:nonzero;" />
        </defs>
        
        <g id="Road" clip-path="url(#clip-path-road-part1)">
            <path d="M3663.97,3885.8c-352.866,-181.191 418.996,-366.45 899.629,-470.829l0,-86.016l-110.787,-0c-0,-0 -3086.59,279.079 -1938.26,1118.38c1805.98,1319.98 10893.5,2305.67 10893.5,2305.67l0,-1757c0,-0 -8682.41,-565.054 -9744.07,-1110.21" style="fill:#f3f8ff;fill-rule:nonzero;" />
        </g>
    </svg>

var rectClipPath = MorphSVGPlugin.convertToPath("#rectClip");

var endShape = document.getElementById("road-path");

gsap.to(rectClipPath, {duration: 2, morphSVG: {shape: endShape, type: "linear", shapeIndex: 4}});