Haydon Posted April 12, 2020 Share Posted April 12, 2020 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 More sharing options...
mikel Posted April 12, 2020 Share Posted April 12, 2020 Hey @Haydon, Welcome to the GreenSock Forum. Just another approach. I love the different easings - an idea of @OSUblake. See the Pen ZEbGYbG by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 4 Link to comment Share on other sites More sharing options...
Haydon Posted April 13, 2020 Author Share Posted April 13, 2020 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 More sharing options...
ZachSaucier Posted April 13, 2020 Share Posted April 13, 2020 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: 1 1 Link to comment Share on other sites More sharing options...
Haydon Posted April 14, 2020 Author Share Posted April 14, 2020 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 More sharing options...
mikel Posted April 14, 2020 Share Posted April 14, 2020 Hey @Haydon, You need the MotionPathPlugin.convertCoordinates() See the Pen KKddmJm by mikeK (@mikeK) on CodePen Happy converting ... Mikel 3 Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 14, 2020 Share Posted April 14, 2020 GSAP doesn't change the actual attributes for those properties because you didn't use the attr plugin. You should use GSAP's .getProperty() method to get the updated value: See the Pen dyYYzKV?editors=0010 by GreenSock (@GreenSock) on CodePen 4 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted April 14, 2020 Share Posted April 14, 2020 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 3 Link to comment Share on other sites More sharing options...
mikel Posted April 14, 2020 Share Posted April 14, 2020 Hey @Shrug ¯\_(ツ)_/¯, Sorry, I'm not a good archivist. I really like how you do it. Maybe you should do the post / thread of the month. Or prepare diverse solutions for a specific topic. The forum is perfect for gold diggers - lots of nuggets. Kind regards Mikel 1 Link to comment Share on other sites More sharing options...
OSUblake Posted April 14, 2020 Share Posted April 14, 2020 I've talked about that technique many times before, but nothing in depth. Basically, just use different animations for x and y. These are the ones I could find ATM. 3 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted April 14, 2020 Share Posted April 14, 2020 Thanks Mikel, I agree regarding nuggests abound for the diligent seekers. Yes I've considered it. ¯\_(ツ)_/¯ Thanks OSUblake, yup I've seen those was hoping see something that was missed. ;--) All good stuff !! 1 Link to comment Share on other sites More sharing options...
Haydon Posted April 15, 2020 Author Share Posted April 15, 2020 Thanks everyone, these are all great tips and guidance! I have that animation happening the way I was after now, so I'll expand on this concept and go from there. Link to comment Share on other sites More sharing options...
jh3y Posted March 9, 2021 Share Posted March 9, 2021 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 More sharing options...
PointC Posted March 9, 2021 Share Posted March 9, 2021 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. 3 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted March 9, 2021 Share Posted March 9, 2021 @jh3y, See the Pen LXPaME by ge1doot (@ge1doot) on CodePen Are you thinking more like verlet / ragdoll physics (like verly.js, verlet.js, etc.,) or more like node based connectors, or something else entirely? 5 Link to comment Share on other sites More sharing options...
PointC Posted March 9, 2021 Share Posted March 9, 2021 I had a feeling @Shrug ¯\_(ツ)_/¯ would stop by with some fun links. You must have quite the collection of bookmarked demos perfectly organized and cross referenced. 1 1 Link to comment Share on other sites More sharing options...
jh3y Posted March 9, 2021 Share Posted March 9, 2021 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 👍 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now