Haydon

Thanks Zach, what you said made it clearer to me about what was going on there with having different layers of animations. That's helped me to conceptualise it better, understand the MotionPathPlugin methods much more clearly and figure out where to go from there. I've ended up rebuilding how I was approaching this to a large degree, as I'd taken an admittedly odd approach to which elements I was animating, and it's come out much more sensibly and has also cleared up those niggly issues i was having. I'm still not clear on how I would go about configuring it to have multiple animations happening on the same layer, as you put it. Is there any examples or documentation that demonstrates this? Along with the changes to elements i'm animating, what I've done instead is to kill certain animations when i need to do my shifts, then restart them after and that sort of thing, so it all stays together.

Hi Tweeners, I've been wrestling with an animation I've been working on, on and off for a few weeks, and I'm reaching out for advice as I can't seem to crack it. I've set up a basic version in the codepen, which as you can see, has circles, connected by lines, which move around a path object (the purple shapes). The circles track along the path, and i'm updating the line connection points so they're following along. In addition to that, I've also set up some scaling up and down of the circle sizes and I'm looking to also change the scale of the path. On top of all of that, I've set up different positioning of the circles depending on the breakpoint the user is in (These are defined on the SVG elements themselves). So if you resize it, you'll see that happen, and that's where my trouble comes in. So I currently have 2 trouble points: 1: When I move between breakpoints, the circles and lines disconnect. I know this is due to how i'm doing the scaling up and down of the circles (if I comment that part out, they work as expected). I'm not sure why this is, I thought it might have been the transformOrigin, but I didn't have any luck there. 2: When I resize the path object, the animation is unaffected, it continues along with the original path size. I was having a look around at the .updateTo() method that used to be available for Tweens, which I thought would have been what I was after, but see that it has been removed in v3. I figure I need to notify the animation in some way, so is there a different way of doing this in V3, or am I approaching this one in the wrong way? Any tips you could provide would be greatly appreciated! Thanks, Haydon.

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.

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. https://codepen.io/haydon-gunn/pen/rNOOyja Many thanks, Haydon.

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!

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.