Growing Vine Timeline

GROWING VINE TIMELINE

Create an interactive botanical timeline with a vine that grows as visitors scroll.

Design your timeline using normal Showit elements. The code adds the growing vine, botanical leaves, and scroll-triggered reveals automatically.


WHAT YOU'LL NEED

A Showit canvas with your timeline content.

Your timeline can include dates, headings, paragraphs, shapes, photos, buttons, or other Showit elements.

If one point on your timeline includes several elements — such as a date, heading, paragraph, and background shape — you can group those elements together in Showit so they appear at the same time.

Photos are optional.


HOW TO INSTALL


01 — CREATE YOUR TIMELINE

Create a canvas in Showit and design your timeline using normal Showit elements.

The vine automatically runs down the center of the canvas on both desktop and mobile, so leave some open space through the middle of your design.

Arrange your timeline points and photos down the canvas in the order you want them to appear.


02 — GROUP YOUR STORY ELEMENTS

If one point on your timeline contains several elements — such as a date, heading, paragraph, and background shape — group those elements together in Showit.

You will add the vine-story Class Selector to the group instead of adding it to each individual element.

When the growing vine reaches that point on the timeline, the entire group will appear together.

If your timeline point only contains one element, you do not need to create a group.


03 — ADD THE CANVAS CLASS SELECTOR

Select your timeline canvas.

In the right-hand settings panel, go to:

ADVANCED → CLASS SELECTORS

Add:

growing-timeline

This tells the code which canvas should contain the growing vine.


04 — ADD THE STORY CLASS SELECTOR

Select a single element OR a group of elements that represents one point on your timeline.

Go to:

ADVANCED → CLASS SELECTORS

Add:

vine-story

Repeat this for each point on your timeline.

Use the same vine-story Class Selector each time. You do not need to number them.

The code automatically reads the vertical position of each timeline point and reveals it when the growing vine reaches that position.


05 — ADD THE PHOTO CLASS SELECTOR

If you want a photo to reveal as the vine grows, select the photo.

Go to:

ADVANCED → CLASS SELECTORS

Add:

vine-photo

Repeat this for each photo you want to reveal.

Photos are optional.

You do not need to number your photos or pair them with specific timeline points.

Design your photos directly in Showit. They can be circles, squares, rectangles, rounded images, or any other shape you create.


06 — ADD THE CODE

Open the page containing your Growing Vine Timeline.

Go to:

ADVANCED SETTINGS → PAGE LOADED JAVASCRIPT

Paste the entire Growing Vine Timeline code into the Page Loaded JavaScript area.

Do not add <script> tags around the code.


07 — CUSTOMIZE YOUR VINE

Near the top of the code, find:

CUSTOMIZE HERE

You can change:

VINE_COLOR — Changes the color of the vine.

LEAF_COLOR — Changes the color of the botanical leaves.

VINE_WIDTH — Changes the thickness of the vine.

GROWTH_POSITION — Controls where the growing tip of the vine sits on the visitor's screen while scrolling.

STORY_SPEED — Controls how quickly your timeline points appear.

PHOTO_SPEED — Controls how quickly your photos appear.

You don't need to edit anything below:

NO EDITING NEEDED BELOW THIS LINE


08 — PREVIEW + TEST

Open Preview and scroll through your timeline.

The vine will grow down the center of the canvas as you scroll.

When the vine reaches a timeline point with the vine-story Class Selector, a botanical leaf will grow from the vine and your content will appear.

When the vine reaches a photo with the vine-photo Class Selector, the photo will appear.

Once a section of the vine has grown, it stays grown even if the visitor scrolls back up.

Preview both your desktop and mobile designs before publishing.


DESIGN TIP

Think of each vine-story as one point on your timeline.

For example, one point could include:

YEAR OR DATE
HEADING
DESCRIPTION
BACKGROUND SHAPE

Group those elements together and give the entire group the vine-story Class Selector. They will appear together when the vine reaches that point.

Position your timeline points and photos on either side of the centered vine. The code uses their vertical position on the canvas to determine when they appear.


QUICK INFO

DIFFICULTY — Easy

REQUIRES — Class Selectors + Page Loaded JavaScript

CAN USE GROUPS — Yes

PHOTOS — Optional

MOBILE FRIENDLY — Yes

CODING KNOWLEDGE — Not required