rickhurk

Yeah, I figured if I were to use morph and want a good result, I would need at least 2 more poses in-between, but then maybe it is still not smooth enough. I cannot wrap my head around how to make breaking the icon up in segments would work. The icons I need to animate are using strokes and transparency masks. I am trying to figure out inside my head how to make it so the joints will not look 'clunky'. What I mean by that is: the strokes won't align nicely anymore if I rotate them. I have seen something called 'metaballs' somewhere on this forum. These were circles that kinda sticked together in the shape of an outline of an 8 when you hold them close together. Building on that idea of paths merging dynamically: would it be possible to create the stroke segments 'open ended' and then fill in the space in between the different segments programmatically? This sounds way over my head for now, but maybe if I look into it I'll find it to be manageable. As looking into any of these options will take a chunk of my time and I am not sure how much effort I need to put to make my deadline for this project, I am going to finish all of the icons with easy animations that I can do right now. Only when I have made significant progress I'll allow myself the time to look into any of these options: Test to see if multiple in-between poses and using the morph library can create a smooth enough animation. Research how the 'metaballs' thing works / how to create paths and join paths programmatically. By the way: You guys are really nice and helpful. Many thanks for your help!

I am sorry. I wasn't really clear and used ambiguous language. What I meant by nodes was the control points in the vector image. So in svg you can have something like <polygon points="50 80 70 30 50"/> I would like to be able to take that "50 80 70 30 50" and tween it to "50 90 80 20 50". This is one of the animations that I quickly made. I can rotate and translate the grey leg and arm and the head, but what I wish to do is change the pose of the blue shape. Having seen the example animation of the morphSVG I know this is what I need. Especially the stuff that is happening to the cape. Unfortunately I don't really understand what is happening in that code. All the other examples on morphSVG are all morphs that are into something completely different. I need something akin to a puppet tool in animation software. Now I know I will probably need to use morphSVG for doing this. I am going to study the example of the cape to find out if I am able to learn this within reasonable time. If you have any pointers or other relevant examples: they are much appreciated. Thanks a lot for you help! Edit: Now that I know better how to search for this problem, I have found this thread regarding animating a polyline. So tweening individual points is possible, except for now it seems the points need to be put in programmatically. With the shape I have that is going to be a lot of work.

Hello, I have been trying to find an answer this, but couldn't really find what I was looking for. Basically I want to be able to animate individual nodes of a vector image. Is this possible with GSAP / is this possible at all within a browser? My assignment is to animate some icons. This is one of those icons and will probably be the one I'll have the most difficulty with: My idea was to create one or two extra poses. Then show one and hide the rest, maybe using some alpha fading in between. My client seems to prefer a smooth animation. I have told them it is either impossible or very difficult for me. However, I do really want to look into it. Any ideas on how this could be done?