Locate these two lines inside the JavaScript:

var startWidthVW = 26;
var startAspect = 0.78;

startWidthVW

Controls the starting width of the image.

Examples:

var startWidthVW = 22;

Smaller starting image.

var startWidthVW = 30;

Larger starting image.

startAspect

Controls the shape of the image.

The value is:

width ÷ height

Examples:

0.66

Very tall portrait

0.78

Portrait (recommended)

1

Square

1.5

Landscape

Image Grow on Scroll

Instructions for your new

Instructions on Desktop :)

1. Changing the starting image size

Whenever you change the animation height, the following must always match.

Code
.scroll-zoom-embed
height: XXXXpx
.scroll-zoom-wrapper
height: XXXXpx
Showit

The Canvas height

↓

The Embed Code box height

↓

The CSS heights

All four values should be identical.

Example:

Canvas
3000px

Embed Box
3000px

.scroll-zoom-embed
3000px

.scroll-zoom-wrapper
3000px

2. Important: Keep all heights the same

Locate:

<img
    class="scroll-zoom-image"
    src="YOUR IMAGE URL"
>

Replace only the URL:

src="https://static.showit.com/file/..."

You can find the image URL by clicking at the connect buttom (top right) in the respective image inside your Media Library

3. Changing the image

Locate:

alt="Sunset over the sea viewed from a sandy beach"

Replace it with a description that explains why the image is on the page, not simply what objects appear.

Good
alt="Luxury interior design project featuring a contemporary open-plan living room."

Better
alt="The Alder House residential interior design project by Studio North."

Avoid
alt="image"
alt="photo"
alt="interior designer luxury modern London best interior design"

4. Writing the Alt Text | Improves your rankings and website accessibility

5. SEO & AI Search Best Practices