thank you @PointC, I've made some progress, but can't replicate it in pixi the first demo, since pixi does not have dash offset.
I thought to combine svg and webgl, but for different reasons I cannot use that technique.
So, I have an array of cubic bezier coords without animation I just do something like this, and it works:
this.tracks[trackID] = new PIXI.Graphics()
this.tracks[trackID].lineStyle(1, 0xFFFFFF)
this.tracks[trackID].moveTo(newCubicBezier[0].x,newCubicBezier[0].y)
for (var i = 1; i < newCubicBezier.length; i++) {
this.tracks[trackID].lineTo(newCubicBezier[i].x, newCubicBezier[i].y, 1)
}
But if I place it in a tween, the line is not visible:
this.tracks[trackID].moveTo(newCubicBezier[0].x,newCubicBezier[0].y)
//remove the first el
newCubicBezier.shift()
let that = this.tracks[trackID]
TweenMax.staggerTo(newCubicBezier, 2, {
ease: Sine.easeOut,
onUpdate: function(){
console.log("update", this.target, that)
that.lineTo(this.target.x, this.target.y, 1)
}
}, 0.05);
I think I'm missing some basic understanding, but couldn't find it.
Wanted to do a codepen demo, but Codepen is not working right now.
Thanks a lot!