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!

Hey, In case someone takes a look at this, i made another link with so much less code to be easly read and added comments in the JS section for a bit of easy understanding. The code is written this way because i intend to use a lot of paths and gradients, and even more groups. But for now i want to figure out why my gradient isnt animating. It should animate in the same time period as the movement. And in this case it should start changing from color white to color green. Here is the simplified codepen: http://codepen.io/anon/pen/mPaOae?editors=1010 Thanks in advance if anyone can offer any help or insight.

Hey, I have been working on my tweening for a while now, and i managed to get something done. But i was wondering, if anyone can look at my code and tell me why the gradient isnt changing? It was suppose to change from white to green. And i cannot find any errors in my code, but still nothing is happening...am i missing something? The codepen is the same as the link on the first post but here it is anyway. http://codepen.io/anon/pen/yOqdGa?editors=1010

So, let me just check my logic a little bit here. What i want is to somehow, get the offset and the stop-color from each gradient and store them in arrays. I thought maybe extracting it somehow via queryselectorAll or silimilar way. Then using the staggerTo to position myself inside each of the linear gradients and then using the extracted offsets and stop-colors with cycle, to cycle through and animate all the gradients. Is that a good way of thinking? Or am i complicating things? Because im having trouble separating and getting just the specific values in their own arrays. But that is probably due to my inexperience. Maybe i just need to sleep on it.

Thanks in advance i'll look into it. Before i start with the questions ill research the links and give it a go. Yes i am still working on it. I know there is a lot of needless information, both in the svg and the js part, but its a work in progress. I was testing somet things out. Will get back at you soonish! I am trying make the gradient change as the polygons move, to get an effect like it is changing during the mevement. But will see what i can do.

Hi, let me start from the beggining. I have a project i wanted to do with SVG and after trying lots of stuff, i found GreenSock to be the best bet and am trying it out on codepen before, maybe if it fits my needs get the licence. Anyhow on to the problem. I am trying out gsap on codepen and was trying to morph one svg into another. I have 2 svg pictures. One hidden, one visible. I am using the other as reference to where the first one needs to morph, because later, there might be more svg's involved in the animation. So, i succeded into morphing the polygons in the svg's ( converted them into paths first ). But i am having problems with animating the gradients. I presumed that both gradients have to have the same number of <stop> tags. Also wanted to animate both the offset and the stop-color. I read about it on one of this forum's posts, that you can do it with .staggerTo and cycle, but i cant seem to get it... I tried to find all the stop tags inside each of the linearGradients i am looping through and then animating each of the offsets and stop-colors but i can't make it to work... Any idea, or maybe a more easier way to do it would be helpfull. I am still kinda inexperienced with all the syntax and functions so if you can point me in the right direction or offer any assistance i would be really greatfull. Right now on the codepen link i have the animation of the polygons, but no changing of gradients. Thanks in advance.