Bubble Explosion

In this project, 56 bubbles explode when you click on them.

Bubbles are positioned absolutly, above each other. The last bubble has an Interaction action with the trigger set to “click”. Its target is set to $div.circle, so that all bubbles on the page are animated with the same interaction.

What happens

This is what happens when you click on the bubble:

1. Each bubble gets scaled to half its size (SC 0.5).
2. 0.1 seconds later, they move randomly up and down with X random(-2,2)vw Y random(-2,2)vh. This animation ends at 1.7 seconds on the timeline. This creates a shaking effect, because random makes each bubble move in a slightly different way.
3. At 1.6 seconds bubbles get scaled to 1.5 (SC 1.5). At 1.9 seconds they move randomly up and down. We make sure they fly out of the screen by providing a range of possible random values for X random([-200,-190,-180,-170,-160,-150,-140,-130,-120,-110,-100,-90,-80,-70,-60,60,70,80,90,100,110,120,130,140,150,160,170,180,190,200])vw  and for Y random([-200,-190,-180,-170,-160,-150,-140,-130,-120,-110,-100,-90,-80,-70,-60,60,70,80,90,100,110,120,130,140,150,160,170,180,190,200])vh.

Finishing touches

We have a H1 which says “Click on the bubble, if you are brave enough.” The last bubble has a second animation with a trigger set to “click” and a target set to $h1. This makes the heading disappear when you click on the bubble by setting its auto opacity to 0.

Body has a CSS rule body with overflow: hidden so that we don't see scrollbars after the bubbles fly out of the visible area.