Loop through JSON to create and animate SVG Elements

[KlatbahII]

Hi,

i have a question. Is it possible to loop through a JSON file as an array and to create SVG elements through the loop.

In the codePen i linked, i have a JSON and i manage to create svg elements(path) and the animation of drawing a path.But all these animation starts a the same time.I would like for each one to start when the previous one has ended.

 

I've read the docs, and i've seen onComplete and totalProgress. And i don't really know how to implement them. I've seen that you can add a Function, onComplete but, is it a good idea to create the next path and animation by using the array index.

 

 

I hope you'll understand what i'm asking(English is not my primary langage, sorry) and that you'll provide me help.

Thanks in advance

See the Pen bGgEaYJ by Klatbah (@Klatbah) on CodePen

[PointC]

Hi @KlatbahII

 

Welcome to the forum.

 

The reason all the lines start at the same time is you've set the same position parameter.

//switch this
tl.add(createLineTween(svg_path), counter_path);
//to this
tl.add(createLineTween(svg_path));

See the Pen eb08e75cae58643b75760617fbd5fe40 by PointC (@PointC) on CodePen

 

Just FYI - you're using a really old version (1.18.0) of GSAP.

 

You'll want to use the latest version (3.6.1) More info about migrating here:

 

Happy tweening.

 

[KlatbahII]

Wow it was something this easy.

Thanks a lot. 

And just a little question. What i used to do, after adding things to the timeline was to put a number as a delay in seconds.And if you don't put number(like what you did), does it mean that the animation will start when the previous one is finished? and if it's thats it's perfect that's exactly what i wanted

 

Thanks again.And i'll switch to the latest version.And another quick question, i used to change the attribute of the viewBox, to have an effect of panning in the SVG, does it still exists in the last version.

[PointC]

Yep - the tweens will just line up in sequence on the timeline unless you set a position parameter with an absolute time, label etc.

 

Yes - you can animate the viewBox attribute. No problem at all.

 

Happy tweening.

 

[KlatbahII]

Wow you're the boss. Thanks again, i was sure that it will be really hard.

And i have a final question, if i may.

Is there a way to make the points appears when the line finish it's animation ?

like an opacity from 0 to 1. And if so, just to get the concept.

I create my points with an opacity of 0 and after the animation of the path,i render with an element of the global timeline that makes the point visible.

[PointC]

You could return the point from your create point function. Something like 

 

let point = CreatePoint(data[i].x, data[i].y);

Then you can tween the opacity right before or after the line tween.

 

tl.fromTo(point, 0.5, {opacity:0}, {opacity:1})
tl.add(createLineTween(svg_path));

Here's a fork. Though it looks like you do something different with the last point so you'd need to address that.

See the Pen b2d99a86703f996f0f23d0980f55603c by PointC (@PointC) on CodePen

 

Does that help? Happy tweening.