Growing Flowers

GROWING FLOWERS

Add an animated wildflower garden to your Showit design. When the effect scrolls into view, colorful flowers grow upward from behind a Showit rectangle.

The rectangle acts as an anchor for the flowers and can be completely transparent, allowing you to position the garden behind other elements in your design.

HOW TO USE IT

1. CREATE YOUR FLOWER ANCHOR

Add a rectangle in Showit where you would like your flowers to grow.

Resize and position the rectangle to control the width and placement of your flower garden.

The rectangle can be visible or completely transparent.

2. ADD THE CLASS SELECTOR

Select the rectangle and go to:

Advanced → Class Selectors

Add:

growing-flowers

Then click the check mark to save it.

Showit may display it as .growing-flowers after you add it.

3. ADD THE JAVASCRIPT

Select the page name in the Pages panel.

Go to:

Advanced Settings → Page Loaded Javascript

Paste the entire Growing Flowers code into the box.

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

4. PREVIEW YOUR EFFECT

Preview your site from above the Flower Anchor and scroll down to it.

When the rectangle enters the screen, the flowers will grow upward from behind it.

The animation plays once.

CUSTOMIZE THE COLORS

At the top of the code, find:

var stemColor =
  '#657153';

This controls the color of the stems and leaves.

Replace the HEX code with any color you'd like.

Find:

var flowerColors = [
  '#E95D45',
  '#E8C95B',
  '#4565A8',
  '#B56F8C',
  '#D9896A',
  '#8A6FA8'
];

These are the colors used for the flowers.

Replace the HEX codes with your own colors to match your website or brand.

You can also add or remove colors from the list.

Find:

var centerColor =
  '#292826';

This controls the color of the flower centers.

CUSTOMIZE THE NUMBER OF FLOWERS

Find:

var flowerCount =
  48;

This controls how many flowers appear in the garden.

Increase the number for a fuller garden.

Decrease the number for a more minimal garden.

CUSTOMIZE THE FLOWER HEIGHT

Find:

var minHeight =
  60;

var maxHeight =
  145;

These settings control the range of flower heights.

minHeight controls the shortest flowers.

maxHeight controls the tallest flowers.

The flowers automatically vary between these heights to create a more natural garden.

POSITIONING NOTE

The flowers grow upward from the top edge of the Showit rectangle.

Move the rectangle to change where the flowers appear.

Resize the rectangle to make the garden wider or narrower.

You can make the rectangle completely transparent and position it behind text, images, buttons, or other Showit elements. This allows the flowers to appear as though they are growing from behind your design while the invisible rectangle controls the effect.

FLOWER NOTE

The garden includes four flower styles: Daisy, Cosmos, Buttercup, and Allium.

Flower heights, stem lean, leaf placement, leaf direction, flower size, and spacing automatically vary to give the garden a more natural appearance.

You do not need to edit these variations manually.

MOBILE NOTE

Growing Flowers works on both desktop and mobile.

Because Showit allows you to design the desktop and mobile layouts separately, you can resize or reposition your Flower Anchor on mobile to control how the garden fits your mobile design.

QUICK INFO

Difficulty: Easy
Requires: Showit Rectangle + Class Selector + Page Loaded Javascript
Class Selector: growing-flowers
Trigger: Flower Anchor enters the screen
Anchor: Native Showit rectangle
Flower Colors: Customizable
Stem + Leaf Color: Customizable
Flower Center Color: Customizable
Flower Count: Customizable
Flower Height: Customizable
Mobile: Yes
Coding Knowledge: Not required