Jump to content
Search Community

Animate individual nodes on a path

rickhurk test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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:

 

59f86737139f5_ScreenShot2017-10-31at13_05_47.png.cdd89587e09787d8350ec22feb8d2354.png

 

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?

Link to comment
Share on other sites

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.

 

See the Pen dZovoK by rickhurk (@rickhurk) on CodePen

 

Link to comment
Share on other sites

5 hours ago, rickhurk said:

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.

 

The animation in that thread is essentially doing the same thing the MorphSVGPlugin does. It moves the points of a path from one position to another position. That works well for a lot of things, but I don't know about animating between different poses.

 

The problem is that the points are going to move linearly from A to B, causing the appendages of your icon to expand and contract as they move to different angles. To prevent that, your points need to pivot around some point. But you don't want to calculate the rotation for every single point. So break your icon up into segments, and rotate the segments instead.

 

By doing that, you should be able to get the smooth animation you're going after, kind of like in this demo.

 

See the Pen 36ebf1818254ea0685e9059cdeddfb73 by osublake (@osublake) on CodePen

 

 

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

20 hours ago, OSUblake said:

The problem is that the points are going to move linearly from A to B, causing the appendages of your icon to expand and contract as they move to different angles. To prevent that, your points need to pivot around some point. But you don't want to calculate the rotation for every single point. So break your icon up into segments, and rotate the segments instead.

 

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!

  • Like 2
Link to comment
Share on other sites

2 hours ago, rickhurk said:

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.

 

Even if you use several intermediate poses, I think you're still going to see a lot of distortion. 

 

But I think you should be fine using segments. Create rounded segments like I did in that demo, and see how they fit. If a joint doesn't blend well, try covering it up with a circle. 

 

Use solid colors, and don't add a stroke. You can create the outline using filters, and some metaball techniques to blend everything together. Check out this demo.

 

See the Pen OReZrP by chrisgannon (@chrisgannon) on CodePen

 

 

 

And check out this video for the metaball stuff at 13:07

 

 

 

  • Like 1
Link to comment
Share on other sites

 

Hi @OSUblake,

 

That is a bit meta or amorphous to me - in the end, that exceeds my abilities.

 

Have it simply tried morphing two situations:

 

See the Pen 030e67e65cb7f4687a3909540c56cd9b by mikeK (@mikeK) on CodePen

 

Hmmm ...

Mikel

 

 

P.S.: Should the rumor arise, the guy - in my last pen - on the right would be CARL, do not believe it! Also CARL is wearing green.

 

 

Edited by mikel
Just in case ...
Link to comment
Share on other sites

On 11/1/2017 at 3:34 PM, mikel said:

That is a bit meta or amorphous to me - in the end, that exceeds my abilities.

 

Have it simply tried morphing two situations:

 

I dunno. Still looks a little "stretchy" to me.

 

Here's a really simple example using SVG.

 

See the Pen ooYgWg by osublake (@osublake) on CodePen

 

And a more advanced demo. Move your mouse around. It's created by joining 50 segments together as a polyline.

 

See the Pen bfafda9d056dbc126333b67dfdbd12b7 by osublake (@osublake) on CodePen

 

 

 

  • Like 2
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...