The Y movement is based on the height of the element Bubble Move Y. If it's 0% the bubble is on the top of the page and if it's on 100% the bubble is on the bottom of the page.

Bubbles are "spawned" every 2 seconds, this time can be changed setting the initial height of each Bubble Move Y. In this case we have 20 bubbles to take 100% screen height, so it means that each bubble must be at 5% difference of each other to create a continuous effect.

It takes 50 seconds to move the bubbles from bottom to top. To change the time you must go inside interactions and on the animation move bubble change the time that it takes to move the bubble from position A to position B.

It's really important that all the bubbles Y movement respect the same time and movement size. If you want to hide a bubble earlier just move it out of screen on position X.

Don't worry with the bubble X movement, it's possible to set the numbers that bets fits to you.

The effect has been created to work on different screen height but it's important to notice that some adaptations must be done inside the animation move bubble on interactions.