Scale circle to follow the shape size while rotating along the path

[marko krstic 12 Likes (Newbie)]

I am trying to create circles that going around and follow that background shape. 
I have managed to animate it along the path but scaling can not manage sync the scale with shape. 

 

Inside the code pen there is an image example how it should look on different states in the timeline

See the Pen xxJbVqX by krstivoja (@krstivoja) on CodePen

[elegantseagulls 1,425 Likes (Superhero)]

You're on the right track....

A few things to not: You don't want to have repeat: -1 in the defaults... You also need to translate the X and Y percentages as the shape scales since it's an SVG shape, and those are on their own coordinates.

 

This should get you closer:

See the Pen RwBNGPK?editors=1010 by elegantseagulls (@elegantseagulls) on CodePen

[marko krstic 12 Likes (Newbie)]

Wow Nice. This is awesome. I went crazy today so I almost wanted to make it with after effects instead! ❤️ 

Thank a lot. You are real superhero

 

[PointC 14,185 Likes (Superhero)]

I'd put that on one timeline and use the latest version of GSAP and the MotionPath plugin so you can use alignOrigin.

 

See the Pen oNMgzxx by PointC (@PointC) on CodePen

 

I wasn't' sure if it was supposed to scale down again before the loop, but I added it.

 

Happy tweening.

 

[marko krstic 12 Likes (Newbie)]

Perfect as I will cut left part with css overflow

 

[GreenSock 18,264 Likes (Superhero)]

Nicely done, @PointC and @elegantseagulls! 🙌

[Carl 11,109 Likes (Superhero)]

37 minutes ago, elegantseagulls said:

You're on the right track....

 

 

nicely done.

[marko krstic 12 Likes (Newbie)]

Thanks everyone for helping and taking time to explain as well.

[marko krstic 12 Likes (Newbie)]

@PointC Just a one more quick question if you have time

I managed to add multiple elements (dots) so animation looks more dynamic, 
But issue is that I am having now is moving around that path is working but scale is ignored.

If you can please give me some pointer. 

See the Pen JjBoREY by krstivoja (@krstivoja) on CodePen

 

[PointC 14,185 Likes (Superhero)]

Probably easier to loop through and give each one its own timeline.

 

See the Pen BaPyQdg by PointC (@PointC) on CodePen

 

I also used the GSAP utils.toArray method to select the <rect> targets. That way you don't need to manually create an array or give each one its own ID. You can add as many rectangles as you want and it'll still work as the delay is based on the length of the array. I added a few just for fun.

 

Happy tweening.

 

[marko krstic 12 Likes (Newbie)]

@PointC Just a one more quick question if you have time

I managed to add multiple elements (dots) so animation looks more dynamic, 
But issue is that I am having now is moving around that path is working but scale is ignored.

If you can please give me some pointer. 

See the Pen JjBoREY by krstivoja (@krstivoja) on CodePen

Thank you! So much simpler solution than my overthinking and brain frying solution. 
Looks awesome now!

[Andy Bui 13 Likes (Newbie)]

See the Pen OJwPWWN?editors=1111 by tcb2307 (@tcb2307) on CodePen

 

In my opinion, you need to use forEach() in order to have a seperate timeline for each dot. 

 

P/S: PointC is already faster than me so you can apply his way. Anyways just want to show you another way to achieve it 😁.