Random Element Movement around starting position

[emjay]

Hello GSAP friends :),

in the following pen you can see a simplified demo of a project I'm trying to implement. For better understanding a little background information about it:

The lightblue circle will later be a graphic that represents a process. The lines of the 4 tooltips point to different places of this graphic. You should be able to hover over a tooltip, then it will stop to move. If you click on a tooltip it will enlarge and some text will appear. If you leave the tooltip it will close itself again.

As you can see in my demo, the 4 squares are already moving. However, it doesn't really look nice because they all move quite evenly, plus there is a little pause at the end where I don't know how to prevent it.

Would someone have a tip on how I can create some kind of random movement around the start position that looks a bit more fluid?

(I tried to demonstrate the movement in the attached GIF).

And I have one more general question. I solved the lines to the square with a SVG which has no aspect ratio. If someone has a better idea or a tip from his own experience how I could solve this more elegantly, I would be very happy about it.

Thanks and best regards

emjay

 

See the Pen 8092d811ccf58f84597f3561fa3eacc4 by emjay (@emjay) on CodePen

[mikel]

Hey @emjay,

 

Is this concept an option for you?

 

See the Pen RwKamBO?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[PointC]

Since you're a Club member, you also have access to CustomWiggle. Might be just the thing for this animation.

 

 

 

Happy tweening.

 

[mikel]

Hey @emjay,

 

... one step further

 

See the Pen vYgGqLB by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[mikel]

... another idea

 

See the Pen BapzyBm?editors=1100 by mikeK (@mikeK) on CodePen

 

Happy moving ...

Mikel

 

[emjay]

Hello @mikel,

 

thank you very much for your different approaches or perfecting them. I like it all much better to solve it with a SVG. However, I'm not so good at it yet, and I also have to display text that is maintained in a CMS.

In the following pen I demonstrated the hover effect to make it easier to understand what I want / have to display. As you can see, it already goes quite well, what I do not understand why the box shakes briefly when closing.

 

See the Pen b980ba33696a413a71e2811a19e06bef by emjay (@emjay) on CodePen

 

But I don't want to move too far away from your solution. Do you see that I can do this with just a SVG? Or should I try to optimize my solution. The random movement I have unfortunately still not managed well. Also the effect from your last pen is really great.

Really thanks again for your answers and the time you invested. Thank you!

Emjay

[mikel]

Hey @emjay,

 

You can add a non-svg (html) element inside svg.
Here is a quick and dirty example

 

See the Pen jOyrGrO by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[mikel]

 

... and here with the initial animation

 

See the Pen ZELOamM by mikeK (@mikeK) on CodePen

[emjay]

Hello @mikel,

 

thanks again very much for demonstrating your solution. In your last example there is a little problem. On hover the div's are not visible.

 

Thanks,

Emjay

[mikel]

Hey @emjay,

 

in CHROME for me ok.
But no support for IE - sorry (more here).

An option: position the tooltipps in the HTML.