Zannen

Thanks for all the comments and info. I will look into all your suggestions and come up with something.

Did you also check the images i am trying to morph to? (I tested it on chrome) The hulk in the dropbox one doesnt look the same as the one on the page (the drop box images are what they should morph into) . So im thinking that i messed up what should Stagger to what. On the note that i am doing too many things i am aware of that. I am thinking of preprocess all the things that are not needed in the animation directly. For instance make lists of stop-color and offsets before i even start the animation. Also lowering the amount of gradient stop tags so it doesnt change the look of the gradient but just to lower the amount of points it has. I was looking at greensock performance test and was hoping i could achieve a smooth looking animation with it, since i didn't have luck with the other libraries i tried. Another idea is to seperate the animation so i animate lets say half or third part of it first, to seperate them in some sort of groups so they don't all animate at the same time. But im not sure how to pull of a cool looking animation out of it at the moment. I will try the first idea first, don't know if that will help, but that way i won't have any unnecessary operations after the click, so it might be smoother. Just moving the random function i have in the code and setting fixed value speeds it up.

I wasnt able to put it online right away but here it is. This is the link for the animation: http://animacija.lg-studioir.hr/ These are the link to the original SVG's in order of animating: https://www.dropbox.com/s/fn065jc1722t4no/obradeno_capt_am_gotovo%20-%20path%20%28inkscape%29.svg?dl=0 https://www.dropbox.com/s/g074hmlxcnjvesz/obradeno_hulk_gotovo%20-%20path%20%28inkscape%29.svg?dl=0 https://www.dropbox.com/s/4uucckh7dur04nq/obradeno_iron_man_gotovo%20-%20path%20%28inkscape%29.svg?dl=0 I have 2 issues im currently strugling. One is that it is really slow. Two, my gradients aren't animating the way they should be. I think it is slow because i am in the gradient for loop for far too long, and also each time i am calculating a random nubmer for each little polygon so they have different speeds. But i am not sure. Also, i'm not sure why the gradients won't animate correctly. I used the staggerTo and it seemed to work. On that note is it better to use stop-color defined in hex or rgb notation? If anyone finds the time feel free to give any critic, ideas, help. I am open to everything. In the meantime i'm going to try to figure stuff ot on my own. EDIT: forgot to mention, you can switch animations on click.

Ok, well, i figured it out. In my own document the stop-color was actually defined as style="stop-color:#BLABLA" instead of stop-color="#BLABLA" which in turn resulted in NAN filling the lists i use to cycle through for staggerTo. But now i have another question. Is it possible i messed up the staggerTo while animating? Im asking this because when everything animates, including the gradients i do not get the exact same colors. It seems as if the colors are messed up a bit except from the starting image which is fine. EDIT: I'll try to put up the whole thing along with the links to the svg images to see what i expect after each animation tomorrow. If anyone will have time i would like to hear your thoughts on it.

Thanks for the input, i checked a couple of stuff and it really is the little part with the Stagger.to. Without it i animate through all the paths with the same gradient. I will look into it more closely, but thank you, i was stressed out and couldnt figure it out alone at the moment.

Hey, its me again. I finally became a member after trying stuff out and making a script to equalize all the paths, linearGradients and stop tags across all of documents. And as i was setting up things i have run across some problems. For instance, after adding everything to a html document and modifying it so it works i can't get it to animate gradients. So i have the same code that i have on this link: http://codepen.io/anon/pen/gwpZyk?editors=1010 , but only on a larger scale. In my document my SVG-s consist of around 650 paths and gradients. The animation on all the paths work, but the gradients don't change. They are all in the same color(black), not even the start one. Do you have any thoughts on what might be wrong? I can't put it on codepen since codepen is really slow due to a lot of data.

I managed to get it working! I talked to a friend of mine and i ditched the infinite loop idea in favour of calling a function on each click. I have a counter that represents the images and i have it reset after i go through all the images! Woohoo, now all i need is some prep to use the whole images and ill come back here with a link to see what you think. Thanks a bunch for all the information and inspiration! EDIT: In case you want to take a peak at the small version. http://codepen.io/anon/pen/gwpZyk?editors=1010

Yeah, ummm..maybe i should have explained a bit more in detail. I managed to get the gradient and the animation working. I did testing if the gradient and the movement itself would animate and it does (but i tested it on 2 SVG images only). Right now it seems to me since i have a loop i can only see the animation between the first SVG image and the last one ( i reckon its probably because i don't have a pause between animations in the loop? ), and im trying to pause the loop somehow to see if it actually animates through all the SVG images. My question is, is there probably an easier way of doing it? Because i have a feeling i am complicating things a bit too much. Like i said in the beggining, i had an idea to make an infinite loop to make the animation continues. In that loop i wanted to extract and setup everything in variables and then use that in the animation. Since for instance i do not know how many <stop> elements i have in each gradient, i made it dynamic so it counts them every time and animates them with the same <linearGradient> of the other point. Even though i don't have the same number of <stop> tags in each <linearGradient> they are equal in the other SVG images. I also do not know how many SVG images i will have so i wanted to make that part dynamic as well. Example on the <stop> tags. There is an equal number of <stop> tags in SVG 1 image in linearGradient 5 and SVG 2 image in linearGradient 5, but no the same in SVG 1 image linearGradient 5 and SVG 1 image in linearGradient 6. Thats why in the last mini-loop i have before animating i am putting the stop information in a variable and using it like that to animate it. I used Stagger tween like Jonathan mentioned. I will look into AttriPlugin to see what it is all about. I just wanna know if this is the right way to deal with this kind of idea. Im trying to get better at animating and programming so i want to do it right, but i have a feeling im just overcomplicating things. I was also thinking of making a mini program to check through all the SVG's and <stop> tags before anything happens, count the maximums from all the SVG images then add some <stop> tags and <path> tags that wouldnt change how the SVG images look except make the number of those tags equal across all the SVG images. What do you think about this idea too? I know you are all busy people, so i apologize in advance if im asking a bit much. But thank you for all the help so far i really appriciated! Wouldn't make it so far without your suggestions.

Hello! Its me again! I haven't really been free to do any animating so im back to continue my work and ask you folks a couple of more questions. First of all is, is it wrong to make an infinite loop to make the animating process infinite? Second, is there an easier way to do it then i already have? And Third, what am i doing wrong? I was thinking of making an infinite loop through all my svg images, and wait for a click input or similar between the loops, but after the animation finishes. And then i would get a continues infinite animation that continues with a click. Here is the link with a summary and some comments and explanations. If anyone is free to check it out i would like to hear your comments. Also, it is set on a small example of 3 SVG images so far and each has 10 paths and gradients. I am going to use larger SVG images on my real work, about 650 paths and gradients at least in each image. Thanks in advance. Link:http://codepen.io/anon/pen/gwpZyk?editors=1010

ok, thanks, ill keep that in mind

Oh, hello again. I have another question regarding gradients. So in the first link waaay up above i managed to morph the gradients neatly. But, i was using the same amount of 'stop' tags. Is there a way to morph, or animate linear gradients similar to morphsvg, so it does it correctly even though there arent the same number of 'stop' tags in both groups i am morphing. Or do i have to manually add 'dummy' stop tags to either the destination or the starting linear gradient to make them the same number so they can map into each other accordingly?

Thanks a lot! When im done with the whole animation im definitly posting it somewhere to show off!

Not yet, but im working on it!. I was trying out my previous codepen examples on a larger scale and it worked with no problem, so im looking into chaining now, since for my project i will have more svg groups i want to tween between. I will come back and post a link if i get stuck when i manage to modify my code. Thanks!

Hey, its me again. Not sure if i should open another thread, but im gonna ask here still anyway. I know that morphing can be chained. I saw in the examples. But can it be done in a manner that nothing morphs until you click the screen or a certain part of the screen, and if i have more morphs chained one after another, how would one go about chaingin them in a way that each one starts only when you click with a mouse? Are there any examples out there concerning this particular topic?

Thanks a bunch! Wow...i can't believe i missed that... Ok, gonna try to work with that on a larger scale! Thanks again!