Jump to content
Search Community

Moving elements and lines

Haydon test
Moderator Tag

Recommended Posts

Hi,

 

I've been blown away by all the cool stuff that GSAP can do since I came across it and am just really dipping my toes in with a project I currently have. I've been puzzling over this animation requirement for a little while, which I haven't been able to solve to quite the level I'd like, and thought I'd ask to see if there's a better way to achieve what I'm trying to do.  As you can see in the codepen demo, essentially my objective is to animate a circle object around the view, while also animating one end of a connected line to move with it.  The line part is where I've been stuck, in my example, i'm manipulating the 'x1, y1', or 'x2, y2' coordinates of the lines, and animating through a set of co-ordinates I pass it. What I'd really love to do is to provide it a path object which defines the route i want them to take. 

 

From looking around the forums and documentation, I've found plenty of examples of animations involving paths, but these generally involve single objects following a path, which has been great, but I haven't seen any where one end of a line is involved. I was looking into the MotionPath plugin, but I wasn't able to find a way to isolate only one end of the line and i'd generally get an error thrown about the read only property.  Ultimately my end goal involves a larger network of lines and dots that move independently, so being able to pass through a series of Paths to each object will make things much easier.  I also accept that perhaps the line object isn't what i should be using for these, perhaps a path object for each might be better? I'll admit, my expertise in the ins and outs of SVG could be better.

 

I'd love any pointers and suggestions on the best way to achieve this.

 

Thanks,

 

Haydon.

See the Pen eYpmqLg by haydon-gunn (@haydon-gunn) on CodePen

Link to comment
Share on other sites

Thanks Mikel, that gives me some ideas I hadn't considered before. I see that breaking up the x / y animations separately like that can allow for curved paths using the eases, so I'll have a crack with that.  Appreciate the tip!

Link to comment
Share on other sites

An additional approach (which might be more useful if your points are going to be more dynamically generated) is to use MotionPathPlugin to move the circle and then update the line values inside of an onUpdate. In the onUpdate you know the current position and the radius so you can change your line's end point to the correct position. That approach (with a more complex example) is used in this thread: 

 

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

Thanks @ZachSaucier, that definitely looks like it might be a good option for what i'm looking to do, I was struggling to make progress on this. I've tried this and it feels like I'm almost there, but I'm not understanding how I can get the x and y of the centre of the circle when it moves. When i try and get the cx and cy values in the onUpdate method, they're always the same (the starting point), since the animation is done through a css transform (see the pen). I'm missing something (likely small) and not sure how I get it's actual location? I see in the example you pointed me at, it uses a MotionPathPlugin.convertCoordinates() method to determine the location it needs to set, but I sense that this isn't relevant for me since I'm essentially only concerned about the position of the circle itself, rather than it relative to other objects.

 

See the Pen rNOOyja by haydon-gunn (@haydon-gunn) on CodePen

 

Many thanks,

 

Haydon.

Link to comment
Share on other sites

On 4/12/2020 at 4:20 AM, mikel said:

an idea of @OSUblake.

 

Do you by chance have a reference to that older thread where that was originally discussed? 😉

 

Just for nostalgia these were nice older ones by @OSUblake also:
 

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

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

 

Here is also another interesting older one:

 

See the Pen YYbrQY by benoitwimart (@benoitwimart) on CodePen

 

  • Like 3
Link to comment
Share on other sites

  • 10 months later...

This one's fantastic! 👏

 

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

 

I was thinking the other day about how to approach a certain demo and wondered, would it be possible to do rigging with GSAP?

As in mapping one path to another. This demo kinda reminded me of it. I can imagine something like that would be very hard to calculate but wondered if there were any good examples in the wild. For example, if this demo was one polygon rigged to the underlying path.

Link to comment
Share on other sites

I've done some rudimentary rigging with SVGs and GSAP, but most of my rigging time for web animations is spent in Spine.

http://esotericsoftware.com/

 

16 minutes ago, jh3y said:

I can imagine something like that would be very hard to calculate but wondered if there were any good examples in the wild.

I can't think of any demos off the top of my head, but others may have some links or ideas. :)

 

  • Like 3
Link to comment
Share on other sites

15 hours ago, Shrug ¯\_(ツ)_/¯ said:

@jh3y,

 

 

 

Are you thinking more like verlet / ragdoll physics (like verly.js, verlet.js, etc.,) or more like node based connectors, or something else entirely?

Oh wow. These libraries look great! Thanks for sharing @Shrug ¯\_(ツ)_/¯ 🙏

 

I imagine something like that could work. It was when I was making this pen.

 

See the Pen gOLjyrm by jh3y (@jh3y) on CodePen

 

The original path for the 'stache would've been cool to rig to a path that I could've morphed and had the 'stache path follow if that makes sense? Instead I opted to dig in a little more with working on path manually. But I thought I'd ask if anyone had seen/done this kind of rigging 👍

 

19 hours ago, PointC said:

I've done some rudimentary rigging with SVGs and GSAP, but most of my rigging time for web animations is spent in Spine.

http://esotericsoftware.com/

 

I can't think of any demos off the top of my head, but others may have some links or ideas. :)

 

Hadn't seen or heard of this one before. Looks like a great tool to check out 👍

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