Add Animated Festive Balloons to Your Site with Balloons.js

Balloons.js is a tiny TypeScript library that creates animated balloon effects on your websites. It generates colorful SVG balloons that float upward from the bottom of the page.

The SVG format keeps the balloons sharp at any size. Users can easily adjust the colors to match their site’s design.

Balloons.js is ideal for websites that want to celebrate a milestone, launch a new product, or inject a dose of joy into the user experience. Birthdays, holidays, or any festive occasion can be made even more special with this library.

How to use it:

1. Install and import the balloons module via NPM.

# NPM
$ npm install balloons

import { balloons } from "balloons-js";

2. You can also import the module directly into your HTML document from a CDN.

<script type="module">
  import { balloons } from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'
</script>

3. Activate the balloon animation:

balloons();

How it works:

• The balloons() function sets up the animation container and calculates balloon positions.
• createBalloonAnimation() handles individual balloon movements and rotations.
• The library uses preset color pairs and easing functions for variety.
• Balloons are placed in 3D space, creating a depth effect. Closer balloons appear larger and slightly blurred.
• Each balloon has a unique animation path with random tilt and movement.
• The number of balloons adapts to the screen size for consistent visuals across devices.
• When all balloons float off-screen, the animation ends and cleans up the DOM.