Scrollytelling Guide

1. Resources and Primary Assets

Connect your image sequence and define supporting graphic files to ensure smooth navigation.

Sequence Folder

Select the folder from your Resources panel that contains all the individual frames of your animation ordered numerically. Make sure the files are compressed to keep the animation smooth on the web.

Practical example: If you rendered a 3D product animation or a video transition into individual image frames, select the folder containing them here. The component will automatically stitch them together into a seamless interactive sequence.

Fallback Image (Poster)

This static image is instantly shown to the user while the animation frames load in the background, preventing a blank screen.

Practical example: Imagine a user visiting your site on a slow mobile connection. Instead of seeing a frustrating empty space for a few seconds, they will immediately see this cover image (e.g., the very first frame of your sequence), keeping the experience professional.

File Extension

Specify the exact format of the images that make up your sequence (e.g., .jpg, .webp, .png).

Practical example: If you exported your frames as `.webp` to save bandwidth and improve site speed, select `.webp`. Ensure every single file in the selected folder shares this exact extension, otherwise the sequence engine will break.

2. Sequence Settings & Nomenclature

Align the component's internal math with how you exported the files from your animation software.

File Count and Prefixes

Tell the component how many total frames make up the animation and if your files have a text prefix before the number.

Practical example: If your folder contains 120 images named `render-001.jpg` to `render-120.jpg`, set the total frames to 120 and the prefix to `render-`. If your files are named with just numbers (e.g., `001.jpg`), leave the prefix field completely empty.

Numbering Format (Leading Zeros)

Match the numbering digit length to that of your actual files so the code knows how to look them up.

Practical example: Look at your file names. If they are formatted as `01.jpg`, `02.jpg`, choose the "2 digits" option. If they go up to `0001.jpg`, choose the "4 digits" option. This guarantees the component reads the sequence in the correct order.

Scroll Duration (Height in vh)

Control the scroll space required to complete the entire sequence, expressed in vh (Viewport Height).

Practical example: Setting this to `150vh` means the user has to scroll the equivalent of one and a half screens to watch the animation. By increasing it to `300vh`, the sequence is stretched over a much longer scroll, resulting in a slower, more detailed playback.

3. Loading Indicators (Invisible Buffer)

Control the user's waiting experience by blocking interaction until a safety threshold is loaded.

Activation and Unlock Threshold

Select how much of the animation must be downloaded in advance before removing the loading screen and allowing scrolling.

Practical example: Setting the threshold to 25% displays a loading screen until one-quarter of the frames are ready. This guarantees a smooth, stutter-free start, while the remaining 75% silently downloads in the background as the user scrolls.

Loading Style

Choose between a percentage indicator or a circular spinner, and customize the background overlay.

Practical example: You can create a cinematic feel by setting a black background with 80% opacity and a white spinner. The user will subtly see the fallback image underneath as if in the shadows, intuitively knowing an experience is about to begin.

Logo in Spinner

Upload and display your brand logo perfectly centered within the circular loading animation.

Practical example: Instead of showing just a generic loading circle, place your company's monogram or custom graphic right in the center. It adds a premium touch, reassures the user, and reinforces your brand identity while they wait.

4. Trigger Points (Scroll Triggers)

Define the exact intersection between the monitor and the component where the magic should start.

Viewport and Container Management

The Viewport is the user's screen. The Container is the box holding your image sequence.

Practical example: If you set Viewport Start to Bottom and Container Start to Top, you are telling the system: "Start moving the frames as soon as the top edge of the sequence appears from the bottom of the screen." If you set Viewport to Center, it will wait until the component reaches the exact middle of the monitor.

Interactive Trigger Simulator

Use the control panel on the left to simulate the settings in Elements. See the live result in the browser window on the right. Blue lines control when the animation starts, Red lines control when it ends.

+

Viewport Start

Scrollytelling Start

Viewport End

Scrollytelling End

Scroll Speed

www.sassano.me

VIEWPORT

VP Start

VP End

Comp Start

Comp End

Scrollyplay

5. Container Style and Overlaps

Modify the spatial interaction of the sequence with the rest of the page elements.

Pin to Screen

The core feature of Scrollytelling. When activated, the container remains fixed in the center of the screen while the user scrolls.

Practical example: As the user scrolls down, the page physically stops moving and the mouse wheel solely drives the frames forward. Only when the last frame is reached does the section "unpin," and normal vertical page scrolling resumes.

Overlap Effect

Subverts the normal page flow, allowing the next section of your webpage to visually scroll over the animation once it's finished.

Practical example: Normally, when the animation ends, scrolling pushes the sequence up and out of view. With Overlap enabled, the sequence stays glued to the background and the next section of your website slides physically over it, closing like a curtain.

Background and Image Alignment

Define the fill color for empty areas of the container and anchor the image sequence vertically.

Practical example: If the main subject of your sequence is at the top of the image and a visitor uses a narrow smartphone, setting the alignment to "Top" ensures the subject's head is never cropped out of the screen.

6. Fades and HUD

Add graphic gradients and indicators to visually integrate the component and guide your users.

Fade In/Out Gradients

Apply overlapping gradients to the top or bottom of the canvas to hide sharp cuts.

Practical example: If your website has a dark theme but the animation is bright, apply a dark Fade Top and Bottom. This way, the edges of the animation will blend seamlessly into your site's background, making it look like a native element instead of a pasted rectangle.

Scroll Hint Indicator (HUD)

Enable an area at the bottom to insert text or icons to suggest scrolling behavior.

Practical example: To guide the user without obstructing the main animation, set the hint to appear immediately (Start: 0%) to give instructions, but configure it to gradually fade out and disappear completely once the user has scrolled through 30% (End: 30%) of the sequence.