Keep children inside parent container

[markilfin]

Hi,

i'm trying to add a bit of animation to tags cloud.

But i'm stuck with one issue. How can i keep child elements( tags ) inside parent container?

See the Pen vgLdWV by anon (@anon) on CodePen

[GreenSock]

Just add the CSS "overflow: hidden" to your container

 

Is that what you mean? Or do you want to make sure that the animation positions never overlap with one of the edges of the container?

[markilfin]

Or do you want to make sure that the animation positions never overlap with one of the edges of the container?

yes, exactly.

I specifically commented out "overflow: hidden;" so you could see that tags are flying outside the container.

[GreenSock]

Ah, I see. And you also want to factor in the rounded corners? Sorry, I don't personally have time to go through all the math and figure it out for you, but perhaps someone else can dive in. If you have a GSAP-specific question, we'd be happy to help. 

[markilfin]

And you also want to factor in the rounded corners?

Nope, not necessary. Can be rectangle.

No problems. Probably, I'll solve this issue myself tomorrow. Just thought that maybe a good idea will come to someone while i'm in bed. Or maybe someone had the same problem and already has a solution.

 

PS sorry for my bad english. i'm from Moldova.

[Jonathan]

Instead of using the jQuery position() method to get left and top offset.

 

Try using getBoundingClientRect instead:

 

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

 

And getClientRects

 

https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects

 

This way you can get more accurate offsets of its position.

 

[markilfin]

if anyone interested, here is my solution for now 

See the Pen ZLWBrO by anon (@anon) on CodePen

[GreenSock]

Thanks for sharing your solution. Happy tweening!