Circle Jelly effect

[Haisan]

Hello everyone. I'm learning to mess with GSAP for about 5 days. So I'm sorry if my questions are anything but simple.

 

I want to do something like the jelly animation to the bottom of the planets at the top of this site: https://cuberto.com/.

At first I'm testing in 2 circles. But I've come across a problem that I can not solve. The circle moves laterally and horizontally and when it hits the edges it is cut off.

 

1 - Would I have to create the SVG with a spacing predicting the movement of the circle?

 

2 - To make the jelly effect I noticed that I will have to deal with the value of the paths. Would I have to manually do the value of each path or would I have some more sophisticated way of changing the values of the path of the element?

 

Thank you. I'm sorry for google's english

See the Pen ZMemOR by Haisan (@Haisan) on CodePen.

[mikel]

Hi @Haisan,

 

Welcome to the GreenSock Forum.

 

One option could be to morph two svg 'blobs' as in this example:

 

See the Pen bKXBme by mikeK (@mikeK) on CodePen.

 

Happy tweening ...

 

Mikel

 

 

[Haisan]

@mikel Blob was the word I needed. I already found a lot of information. Thanks a lot for the help. When I can do something put here to leave an example.