CodepenChallenge GSAP Bubbling: Bubble Launcher

takaneichinose

Takane Ichinose

Posted on June 12, 2020

CodepenChallenge GSAP Bubbling: Bubble Launcher

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.

💖 💪 🙅 🚩
takaneichinose
Takane Ichinose

Posted on June 12, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related