Butterfly Release

BUTTERFLY RELEASE

Create a whimsical release of animated butterflies that flutter upward through your Showit design.

The butterflies emerge from the bottom of the canvas, follow individual flight paths and fly off the top of the screen.

You can also add landing targets so butterflies flutter down onto specific Showit elements, rest for a moment, then take off and fly away.


WHAT YOU'LL NEED

A Showit canvas

Page Loaded Javascript

The butterfly-release Class Selector

Optional butterfly-land Class Selectors if you want butterflies to land


HOW TO INSTALL


01 — ADD THE CANVAS CLASS SELECTOR

Choose the Showit canvas where you want the Butterfly Release to appear.

Select the canvas and go to:

Advanced → Class Selectors

Add:

butterfly-release

Then click the check mark to save it.

Showit may display it as .butterfly-release after you add it.

The butterflies will release from the bottom of this canvas and fly upward through your design.


02 — ADD THE JAVASCRIPT

Select the page name in the Pages panel.

Go to:

Advanced Settings → Page Loaded Javascript

Paste the entire Butterfly Release code into the box.

Do not add <script> tags. Showit adds them automatically.


03 — CHOOSE THE NUMBER OF BUTTERFLIES

At the top of the code, find:

butterflyCount: 18,

Change the number to choose how many butterflies appear in the release.

For example:

butterflyCount: 10,

will release 10 butterflies.


04 — CUSTOMIZE THE SIZE

Find:

size: 170,

This controls the overall base size of the butterflies.

Increase the number for larger butterflies.

Decrease the number for smaller butterflies.

The butterflies automatically vary slightly in size so the release feels more natural.


05 — CUSTOMIZE THE WING-FLAP SPEED

Find:

flapSpeed: 300,

This controls how quickly the butterfly wings flap.

Lower number = wings flap faster

Higher number = wings flap slower

This setting controls the movement of the wings only. It does not change how quickly the butterflies fly across the canvas.


06 — CUSTOMIZE THE BODY + DETAILS

Find:

wingStroke: "#756966",

This controls the outline around the butterfly wings.

Find:

bodyColor: "#302B29",

This controls the butterfly bodies, antennae and wing details.

Replace the HEX codes with your own colors to coordinate the butterflies with your website.


07 — CUSTOMIZE THE WING COLORS

Find the section labeled:

BUTTERFLY WING COLORS

Each color pair contains a main wing color and a lighter wing color.

Example:

{ wing:"#D9A6A1", light:"#F1D1CD" },

wing controls the main wing color.

light controls the lighter color inside the wings.

Replace the HEX codes with your own colors to create a custom butterfly palette.

You can add or remove color pairs as needed.

If you have more butterflies than color pairs, the colors will automatically repeat throughout the release.


08 — OPTIONAL: MAKE BUTTERFLIES LAND

Choose a Showit element where you would like a butterfly to land.

Select the element and go to:

Advanced → Class Selectors

Add:

butterfly-land

Then click the check mark to save it.

You can add butterfly-land to more than one element inside the Butterfly Release canvas.

The code will automatically use the available landing targets.

Landing butterflies flutter as they approach, settle onto the element, rest for a moment, then take off and fly away.

You do not need to add any butterfly-land Class Selectors if you don't want butterflies to land.


09 — PREVIEW + TEST

Open Preview and watch the full Butterfly Release.

Check the effect on both desktop and mobile.

If you're using landing butterflies, make sure each butterfly lands where you want it in both layouts.

Adjust the butterfly count, size, flap speed or colors as needed for your design.

Everything below:

CODE BELOW
NO EDITING NEEDED

can be left alone.


LANDING TIP

A landing target can be text, a shape, an image or another Showit element inside the Butterfly Release canvas.

Move the Showit element to change where the butterfly lands.

You do not need to change the butterfly's flight coordinates inside the code.


MOBILE NOTE

Butterfly Release works on both desktop and mobile.

The butterflies automatically display slightly smaller on mobile to better fit the screen.

Because Showit allows you to design desktop and mobile separately, you can reposition your butterfly-land elements on mobile to control where the butterflies land.


DESIGN TIP

Try choosing a small palette of coordinating wing colors rather than making every butterfly the same color.

The wing colors will repeat automatically throughout the release, creating variation while keeping the butterflies visually cohesive with your website.


QUICK INFO

DIFFICULTY — Easy

REQUIRES — Showit Canvas + Page Loaded Javascript

CLASS SELECTORS — butterfly-release + optional butterfly-land

TRIGGER — Page load

NUMBER OF BUTTERFLIES — Customizable

BUTTERFLY SIZE — Customizable

WING-FLAP SPEED — Customizable

WING COLORS — Customizable

WING OUTLINE — Customizable

BODY + DETAIL COLOR — Customizable

LANDING — Optional

MOBILE FRIENDLY — Yes

CODING KNOWLEDGE — Not required