Hello!
I am trying to make an animated SVG of a complex map. I have over 120 elements in my animation. Most of these are paths but some of them are also polygons (circular).
Here's a CodePen:
I am a JavaScript novice. I searched this forum and found a script (in Carl's post) which allows me to draw a path-
var orig1 = document.querySelector('#lineAB');
var obj1 = {length:0,
pathLength:orig1.getTotalLength()};
orig1.style.stroke = '#f60';
var t1 = TweenMax
ah... I thought you meant erase the line.
The way you're animating the line will make a reverse a bit tricky. You'd have to animate the strokeDashOffset along with drawing the strokeDashArray to do a reverse. I'd still recommend Club GreenSock and DrawSVG to make your life easier.
If you aren't able to do that right now, I think you should simply animate the strokeDashOffset instead. This can be done in a few lines and no onUpdate will be needed.
var path = document.querySelector('