Object moving along a pill shape button border

[soydannybrooks]

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

[mvaneijgen]

Hi @soydannybrooks welcome to the forum!

 

That sounds like a perfect fit for the MotionPathPlugin https://greensock.com/docs/v3/Plugins/MotionPathPlugin

 

Hope it helps and happy tweening! 

[Carl]

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

See the Pen jOQgKWX?editors=0110 by snorkltv (@snorkltv) on CodePen

 

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

See the Pen BaGXxrd by snorkltv (@snorkltv) on CodePen

 

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

 

See the Pen jOQgKNe?editors=1010 by snorkltv (@snorkltv) on CodePen

 

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. 

 

 

 

[soydannybrooks]

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

[soydannybrooks]

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. 

[Carl]

Good job on implementing the suggestions!

 

Instead of trying to figure out a unique position for where second circle-after should start, I prefer to give it the SAME animation as circle-before but just start it at a later time.

 

This can be achieved with a single tween and a stagger

 

See the Pen BaGXgej?editors=0010 by snorkltv (@snorkltv) on CodePen

 

Things to note:

 

I set a repeat:5000 inside the stagger object which makes each circle repeat as soon as it finishes one iteration.

This is different than having a repeat on the tween or the parent timeline

 

 

I also set the timeline to jump ahead using tl.play(2) so that both objects are animating immediately.

 

I also initially hide main-container using opacity:0 in the css so that you don't see the circles before they are "attached" to the path.

after the main functions runs I show everything using:

 

gsap.set(".main-container", {opacity:1})

 

Hope this helps and good luck on the rest of the project.

[soydannybrooks]

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

[Carl]

happy to help.

 

Although I find the way you are doing it with MotionPathPlugin is the better way, I couldn't help but try to throw 2 circles in using my more verbose and less flexible timelines.

 

See the Pen LYXwwzw?editors=0010 by snorkltv (@snorkltv) on CodePen