CodepenChallenge GSAP Bubbling: Bubble Launcher
Takane Ichinose
Posted on June 12, 2020
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.
💖 💪 🙅 🚩
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.