Jump to content
Search Community

Scaling objects in animations

Haydon test
Moderator Tag

Recommended Posts

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.

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

Link to comment
Share on other sites

Hey Heydon. You have a fair many things going on in that pen but I believe the issue is that you have multiple layers of transforms but your line updating only accounts for transforms on one layer of elements. So you can either 

  1. Only apply transforms to the one layer of elements that you're using for the line calculations or
  2. Try to calculate the distance and direction between the circles directly (MotionPathPlugin has gotten some methods to help you do that more easily recently)
  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

8 hours ago, Haydon said:

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.

If you have multiple animations affecting the same properties of the same elements at the same time, there is no working around it :) There simply will be conflict, likely causing issues. A value simply cannot be two different values at the same time.

 

Ways to work around that are to

  1. Use overwrite: 'auto' so that tweens will kill off tweens that they conflict with.
  2. Apply animations to a container or child instead of the element it would conflict with.
  3. Rewrite the animations to combine their effects into one animation.
8 hours ago, Haydon said:

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.

It sounds like you're using the first approach I outlined above.

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