smenegassi Posted August 26, 2020 Share Posted August 26, 2020 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 More sharing options...
Richard1604 Posted August 26, 2020 Share Posted August 26, 2020 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 1 Link to comment Share on other sites More sharing options...
smenegassi Posted August 26, 2020 Author Share Posted August 26, 2020 Thanks Richard. I guess you are right. I just wanted to save some bytes. Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 26, 2020 Share Posted August 26, 2020 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. 2 Link to comment Share on other sites More sharing options...
smenegassi Posted August 26, 2020 Author Share Posted August 26, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 26, 2020 Share Posted August 26, 2020 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. 2 Link to comment Share on other sites More sharing options...
smenegassi Posted August 26, 2020 Author Share Posted August 26, 2020 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 More sharing options...
PointC Posted August 26, 2020 Share Posted August 26, 2020 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. 3 1 Link to comment Share on other sites More sharing options...
smenegassi Posted August 26, 2020 Author Share Posted August 26, 2020 Thanks Graig. Great article ! Link to comment Share on other sites More sharing options...
smenegassi Posted August 27, 2020 Author Share Posted August 27, 2020 Hi Graig. Your article is really great. Thanks. I learn a lot. I'll try it. Have a nice day. Sergio Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now