StickyScroll

A two‑column scroll section where one column remains fixed (sticky) while the other scrolls through steps. The sticky column crossfades between images or HTML content as the user scrolls through each step.

Use Cases

• Step‑by‑step processes (How It Works, Getting Started)
• Feature showcases with images that change per step
• Storytelling / scrollytelling with rich content on the sticky side
• Product tours or onboarding flows
• Timeline‑style narratives with visuals

Properties

heading

Section heading displayed above the two‑column layout. Type: string.

subheading

Supporting text below the heading. Type: string.

items

Array of step objects. Each step appears in the scrolling column with its content crossfading on the sticky side. Type: array.

stickySide

Which column is sticky. left‑sticky = left stays fixed while right scrolls. right‑sticky = right stays fixed while left scrolls. Type: string. Options: left-sticky, right-sticky. Default: left-sticky

accentColor

CSS color for the step number/icon circles (hex or CSS variable). Type: string.

customCss

Custom CSS property pairs. Useful for styling the sticky HTML content classes. Type: string.

Best Practices

• Use 3‑5 steps for optimal scroll experience — fewer than 3 feels sparse, more than 7 is too long
• Always provide imageUrl OR stickyHtml for each step — avoid the plain placeholder
• Use imageUrl when you have visuals (screenshots, photos). Use stickyHtml for rich text, lists, or mixed content
• Keep step descriptions concise but informative (2‑4 sentences)
• Use HTML in description for emphasis: key terms, highlights, styled via customCss
• Pair with TextReveal above — when doing so, OMIT heading/subheading to avoid duplicates
• Use accentColor matching the app’s primary color for visual consistency

Common Mistakes

Setting both imageUrl AND stickyHtml for the same step

Why it's a problem: stickyHtml takes priority — imageUrl will be ignored when stickyHtml is set

Fix: Use one or the other per step. Mix freely across different steps (step 1 = image, step 2 = HTML, etc.)

Using TextReveal before StickyScroll without omitting StickyScroll heading

Why it's a problem: Creates duplicate headings — TextReveal IS the heading

Fix: When using TextReveal before StickyScroll, omit StickyScroll heading and subheading

Leaving all steps without imageUrl or stickyHtml

Why it's a problem: The sticky side shows a plain gray placeholder with the step title — looks unfinished

Fix: Always provide imageUrl (use searchUnsplash) or stickyHtml for each step

Wrapping StickyScroll inside ScrollReveal

Why it's a problem: StickyScroll has its own scroll‑based animations (sticky positioning + crossfade). Wrapping it in ScrollReveal causes rendering failures because StickyScroll is very tall (80vh per step) and the ScrollReveal threshold becomes impossible to reach

Fix: Place StickyScroll directly on the page — NEVER inside ScrollReveal. Use a separate ScrollReveal for the heading if needed, then place StickyScroll as a sibling after it