使用Javascript延迟绘制多个SVG路径'；卷轴魔术图书馆

我正在尝试使用ScrollMagic在scroll上绘制一个SVG线括号。SVG基本上是一个“运动”括号，因为它在某些节点上分成两个分支。我创建了一个具有多条路径的SVG，其中一条主路径从上到下。沿着这条路径的某个节点，括号分开，并用另一个SVG路径绘制

我可以让SVG在scroll上绘制路径，但它们都是从触发器开始绘制的，所有的都是从触发器结束绘制的。我想要实现的是，根据每个路径相对于SVG边界框的偏移量，使其开始和结束。我已经能够计算出所有要求的百分比。。。但我就是不能把这些转化成卷轴所需要的数学知识绕过去

任何帮助都将不胜感激

参见示例

/*globals ScrollMagic*/
（功能（）{
"严格使用",；
console.clear（）；
var括号=document.querySelector（“#括号”）；
var path=document.querySelectorAll（“#括号路径”）；
var高度=支架高度；
函数绘制路径（进度）{
对于（变量i=0；i
正文{
高度：5000px；
}
#括号{
位置：固定；
顶部：5vh；
左：5vh；
宽度：90vh；
高度：90vh；
}
#括号路径{
笔划阵列：2000；
行程偏移量：2000；
}