Jump to content
Search Community

instances of timelines

smenegassi test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

:)

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...