instances of timelines

[smenegassi]

Hi,

I have this timeline playing a simulation of reflection on the water. I wanted to duplicate the timeline, all over the view box. The same SVG object, the same animation but on different locations and playing all at the same time. It is that possible ?
I have a test on codepen.
Thanks,
Sergio

See the Pen JjXWede by imaginatica (@imaginatica) on CodePen.

[Richard1604]

hi there Sergio,

I'm just  a newbie but according to my recent investigations you can only animate the same svg  exactly once so you either need multiple copies of the svg or one big one with the elements duplicated inside.

Obviously if you get them appropriate class names and id then you only need a simple animation script and can also stagger the animations if you so wish.

I believe that the recommendation is to have a single svg but I may be wrong.

Richard

[smenegassi]

Thanks Richard. I guess you are right. I just wanted to save some bytes.

[ZachSaucier]

Hey smenegassi and welcome to the GreenSock forums. Thanks for supporting GreenSock by being a Club GreenSock member!

 

What exactly do you mean by "The same SVG object"? I think you'd learn a lot from this article by @PointC.

[smenegassi]

Hello,

I just wanted to create instances of a timeline passing to each instance a x and y position, and all instances playing at the same time.

Thank's for the article. It looks very interesting. I'll check right now.

Have a nice day !

Sergio

[ZachSaucier]

27 minutes ago, smenegassi said:

I just wanted to create instances of a timeline passing to each instance a x and y position, and all instances playing at the same time.

That's fine but it doesn't answer my question. To rephrase: How can you animate multiple objects if you only have one object?  You have to create multiple instances of it at some point, either in the SVG statically or generating them with JS.

[smenegassi]

Yes. I get it. The animation is the same. I wanted to create a pattern.  I can have n instances of the same object  using <defs> and <use>. I tried to elaborated it differently. I see it cannot work. The article you sent me it is very interesting. I'll dive into it. Thanks.

Sergio

[PointC]

My two cents: I'd recommend creating or cloning elements rather than using <use>.

 

My article that Zach linked to should guide you through creating all the elements you need with JavaScript doing the heavy lifting. If you want to clone an existing element  a bunch of times, here's a basic setup for that. 

 

See the Pen 24b436be30b10bd6fc5b840c913b9db6 by PointC (@PointC) on CodePen.

 

Happy tweening.

 

[smenegassi]

Thanks Graig. Great article !

[smenegassi]

Hi Graig. Your article is really great. Thanks. I learn a lot. I'll try it. Have a nice day.

Sergio