Bubble Animation

[rassem]

Is there any way to animate bubbles like this site by using this library? Is yes, can anyone point me to that direction? I,m kinda new in web development.   

[Carl]

Hi and welcome to the GreenSock forums,

Yes, the site you mentioned is using the GreenSock Animation Platform.

 

Unfortunately it would be extremely time-consuming to try to explain how all of that works, especially not knowing just how new you are to web development. There are probably a dozen or so different things going on there, each with their own varying levels of complexity. Honestly, this is a very ambitious project for a beginner.

 

There really aren't any shortcuts to these types of things (unless you find a tutorial or demo online that provides all the code for you). Perhaps someone around here knows of a tutorial or demo that does something similar.

 

The only thing I thought of was @Sahil's canvas tutorial that makes a bunch of elements scale and move based on their proximity to the mouse:

Regardless of how closely that resembles what you need to do, it paints a nice picture of the level of complexity.

 

If you have any specific questions about the GreenSock Animation Platform, we'll be happy to help. 

 

 

 

[rassem]

17 hours ago, Carl said:

Hi and welcome to the GreenSock forums,

Yes, the site you mentioned is using the GreenSock Animation Platform.

 

Unfortunately it would be extremely time-consuming to try to explain how all of that works, especially not knowing just how new you are to web development. There are probably a dozen or so different things going on there, each with their own varying levels of complexity. Honestly, this is a very ambitious project for a beginner.

 

There really aren't any shortcuts to these types of things (unless you find a tutorial or demo online that provides all the code for you). Perhaps someone around here knows of a tutorial or demo that does something similar.

  

The only thing I thought of was @Sahil's canvas tutorial that makes a bunch of elements scale and move based on their proximity to the mouse:



Regardless of how closely that resembles what you need to do, it paints a nice picture of the level of complexity.

 

If you have any specific questions about the GreenSock Animation Platform, we'll be happy to help. 

 

 

 

Thanks for you reply. I will look into it. But in meantime you can give me some direction/points, which i should learn particular for this site? I mean what  i need, what are they using, How to create those bubble. As i see the source code, they are using SVG. 

[Carl]

Sorry, but we just don't have the resources to guide you one-on-one through building these types of things. However, as a fun little challenge, I'd encourage you to start here:

 

 

Step 1: watch the Getting Started video here: https://greensock.com/get-started-js

 

Step 2: Create an html page that contains an SVG that has a single <circle> in it

 

Step 3: Try to move the <circle> to the right using TweenMax

 

The CodePen demo below loads up every GSAP tool (including the bonus plugins) so you can just drop in your SVG code in the HTML tab and write some JavaScript in the JS tab. After clicking "Run Pen" you can click the "Edit on CodePen" button.

 

See the Pen BOrKYQ?editors=1010 by GreenSock (@GreenSock) on CodePen

 

If you get stuck on any of the above, let us know, we'll be happy to help.

 

 

Once you get a single circle moving you can experiment with more circles, adding mouse events, etc.