DEV Community

Takane Ichinose
Takane Ichinose

Posted on

1 1

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.

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

Best practices for optimal infrastructure performance with Magento

Running a Magento store? Struggling with performance bottlenecks? Join us and get actionable insights and real-world strategies to keep your store fast and reliable.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️