DEV Community

loading...

CodepenChallenge GSAP Bubbling: Bubble Launcher

takaneichinose profile image Takane Ichinose ・1 min read

Click on the screen to launch bubbles.

There are 4 steps in launching, just hold the mouse on the screen, then the bubble will charge.

Step 1 has only 1 bubble to release.

Step 2 has 4 to 8 bubbles.

Step 3 has 8 to 16 bubbles.

Step 4 has 32 to 64 bubbles.

Speed and angle of release will also vary on how you charged it. Of course full charge should be the most satisfying (in my opinion).

I used VueJS in javascript codes. GSAP and plain CSS for animations.

Although I have't fully tested it yet, I believe this will also work on mobile devices.

Discussion

pic
Editor guide