[Object moving along a pill shape button border]

Thanks a lot @Carl, I was struggling with this animation like a month ago. Now I can finish my project. Thanks again.

[Object moving along a pill shape button border]

3 hours ago, Carl said:

ok, this turned into an afternoon of distraction 

 

After doing it first with MotionPath, I had a hunch it could be done with some math and experimentation so I came up with this

 

 

 

The circular motion is caused by offsetting the transformOrigin.

 

It's pretty good. However you will always have to play with the  duration of the animations of the arcs vs the straight part as it can look bad if there is an abrupt change in speed.

 

Ultimately (as @mvaneijgen suggested) MotionPathPlugin is way cleaner as it:

• will only require one tween
• speed is automatically kept consistent throughout

 

I think most people think of MotionPathPlugin as only good for SVG animations, however it excels at applying SVG path data to HTML objects!

 

In order to figure out the path for an html element I

• created a similar svg rect with rounded corners
• converted that rect to a path with MotionPathPlugin
• used that path to animate a div circle around my div button

 

 

 

This demo here copies the path value from the pen above and applies it to the div button.

I did this to show that you don't really need an svg in your final html page

 

 

 

 

If you have buttons of different sizes you could use these files as guides to create a script to dynamically generate all the assets.

If you are handy with SVG path data you could also use the dimensions and radius of your button to dynamically create your own paths.

 

Somehow I feel there's some room for some future creativeCodingClub.com lessons here. 

 

 

 

Sorry to bother you @Carl, I want to know if it's possible to position another circle in the same button changing the initial coordinates or so.

See the Pen rNQXZqR by soydannybrooks (@soydannybrooks) on CodePen

I have tried using the circle position (.circle-after) but still is in the same position as circle-before.
Thanks in advance for your help. 

[Object moving along a pill shape button border]

Thank you both for saving my day.
Hope you have a great day.

[Object moving along a pill shape button border]

I created a pill-shaped button (border-radius of 55px) and gave it an outline border to which I added a couple of circles to be positioned on that outline border. I've also created an animation using GSAP, so that the circles move along the outline border created for that button, I'm new to GSAP and I can't think how I could do the semicircular movement part at the moment the circles reach the side edges (where the border-radius is shown).

 

I would like to know if it is possible for you to help me with this part since I tried following an example I found in the forum (https://greensock.com/forums/topic/9581-circular-motion/) but I didn't really know how to apply it to my problem.

 

Thank you very much for any help you can give me.

See the Pen MWzNVMr by soydannybrooks (@soydannybrooks) on CodePen