webdevpuneet.com

Related Snippets

211 in Scroll Effects category
4–9 of 60

ScrollReveal Fade Timeline

Three.js Scroll Shader Fluid Gradient Wave

Scroll Canvas Starfield Warp Speed

Scroll Canvas Generative Flow Field

Three.js Scroll Shader Ripple Distortion

Scroll Canvas Particle Text Formation

ScrollReveal Fade Timeline — Alternating Origin Snippet

ScrollReveal Fade Timeline · Scroll · Plain HTML, CSS & JS · Live preview

CategoryScroll Effects
TagsScroll AnimationMicro-InteractionsJS Libraries

Copy & paste

Source Code

Requires
JS · scrollreveal.min.js
<div class="srt-stage">
  <div class="srt-head">
    <span class="srt-tag">scrollreveal · alternating origin</span>
    <h2>Company Timeline</h2>
    <p>Scroll down — each entry fades in from alternating sides as it enters the viewport.</p>
  </div>
  <div class="srt-timeline">
    <div class="srt-line"></div>
    <div class="srt-item" data-side="left">
      <div class="srt-dot"></div>
      <div class="srt-card"><span class="srt-year">2019</span><h3>Founded</h3><p>Three engineers, one laptop, zero customers.</p></div>
    </div>
    <div class="srt-item" data-side="right">
      <div class="srt-dot"></div>
      <div class="srt-card"><span class="srt-year">2020</span><h3>First 100 Users</h3><p>Word of mouth carried us through a rough year.</p></div>
    </div>
    <div class="srt-item" data-side="left">
      <div class="srt-dot"></div>
      <div class="srt-card"><span class="srt-year">2022</span><h3>Series A</h3><p>$8M raised to build out the platform team.</p></div>
    </div>
    <div class="srt-item" data-side="right">
      <div class="srt-dot"></div>
      <div class="srt-card"><span class="srt-year">2024</span><h3>1M Requests/Day</h3><p>Crossed a million daily API calls in production.</p></div>
    </div>
    <div class="srt-item" data-side="left">
      <div class="srt-dot"></div>
      <div class="srt-card"><span class="srt-year">2026</span><h3>Global Launch</h3><p>Live in 40 countries with a fully remote team.</p></div>
    </div>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Attribute-selector routing
data-side="left"/"right" lets two .reveal() calls target each side without JS branching.
Per-side stagger scope
interval staggers each selector's own match order independently, so both sides cascade in parallel.
IntersectionObserver-driven
ScrollReveal v4 observes visibility natively — no scroll-event polling or throttling code needed.
Directional origin per axis
origin: 'left'/'right' reinforces the timeline's left-right layout instead of a generic bottom fade.
Independent dot animation
Spine dots scale in with a short delay so they visibly connect to their card.
Subtle spine reveal
The connecting line fades in on its own schedule instead of competing with entry motion.
Responsive single-column fallback
CSS collapses the alternating layout to one column with left-aligned dots on narrow screens.
Zero manual observer code
The entire effect is configuration passed to sr.reveal() — no IntersectionObserver written by hand.

About this UI Snippet

ScrollReveal Fade Timeline — Alternating Origins and IntersectionObserver, Explained

Screenshot of the ScrollReveal Fade Timeline snippet rendered live

A plain scroll-reveal list — every item fading up from the bottom — reads as a generic feed. A timeline needs the motion to reinforce the layout: entries on the left side of the spine should feel like they're arriving from the left, and entries on the right should arrive from the right. ScrollReveal.js makes this a matter of calling .reveal() twice with different selectors rather than writing any custom observer code.

Two reveal calls, one per side

js sr.reveal('.srt-item[data-side="left"]', { origin: 'left', distance: '46px', interval: 120 }); sr.reveal('.srt-item[data-side="right"]', { origin: 'right', distance: '46px', interval: 120 });

ScrollReveal's origin option sets which direction the element travels *from* — 'left' means the element starts distance pixels to the left of its resting position and slides right into place, translated with opacity. Because the HTML already marks each timeline entry with data-side="left" or data-side="right", two separate attribute selectors let each side get its own reveal configuration without any JavaScript branching — the CSS attribute selector does the routing.

What interval does versus what you might expect from "stagger"

interval: 120 staggers elements matched by that one .reveal() call, delaying each subsequent match by 120ms relative to the previous one *in that selector's own match order*. Because left and right items are revealed by two independent calls, the stagger is scoped per side — left items stagger against each other, right items stagger against each other, and both groups start their timers as they individually enter the viewport (ScrollReveal uses an IntersectionObserver under the hood, not a fixed page-load timer), so items further down the page naturally reveal later regardless of interval.

Under the hood: IntersectionObserver, not scroll events

ScrollReveal.js v4 replaced its old scroll-listener implementation with IntersectionObserver, which is why this snippet doesn't debounce or throttle anything — there's no scroll handler to throttle. Each revealed element gets its own observer entry; when it crosses the configured threshold (roughly 20% visible by default) the callback fires the CSS transition. This is dramatically cheaper than polling getBoundingClientRect() on scroll, especially with dozens of timeline entries.

The spine line and dots

The vertical .srt-line gets its own subtle reveal (opacity fade with no translation) so it doesn't compete visually with the entries, and each .srt-dot reveals with a scale animation and a short delay so the dot "pops" into place slightly after its card starts sliding in — a small sequencing detail that makes the connection between dot and card read as intentional rather than coincidental.

Reusing it

Because the reveal logic is entirely selector-driven, adding a sixth timeline entry means adding one data-side HTML block — no JS changes required. Swap the alternating pattern for a single-column layout by revealing everything with the same origin.

Step by step

How to Use

  1. 1
    Add the ScrollReveal CDNInclude the scrollreveal UMD build from the CDN panel.
  2. 2
    Paste HTML, CSS, and JSA five-entry timeline renders with a central spine and alternating left/right cards.
  3. 3
    Scroll down the pageLeft-side entries slide in from the left, right-side entries from the right, staggered per side.
  4. 4
    Add more entriesDuplicate an .srt-item block with the opposite data-side value — no JS changes needed.
  5. 5
    Tune the staggerAdjust interval (currently 120ms) to speed up or slow down how quickly items on the same side cascade.
  6. 6
    Change the reveal directionSwap origin: 'left'/'right' for 'bottom' on both selectors for a simpler single-direction reveal.

Real-world uses

Common Use Cases

Company and product timelines
Reveal entries from alternating sides on an About page or changelog, so items on the left arrive from the left and items on the right from the right.
Course and roadmap progress
Show completed and upcoming milestones with motion that reinforces the layout, using data-side attributes to route two reveal() calls.
Case study narratives
Walk through a project's phases in order, with each selector's interval staggering its own matching items independently.
Event schedules
Present a conference or launch-day agenda as an alternating timeline, with ScrollReveal observing visibility natively and no scroll listener.
Resume and career pages
Reveal career history as the visitor scrolls, and use it as a concrete example of per-side selector routing for ScrollReveal.

Got questions?

Frequently Asked Questions

Each call configures a distinct origin direction — 'left' for the left-side selector, 'right' for the right-side one. ScrollReveal's reveal() takes one origin per call, so two selectors (routed by the existing data-side attribute) is the simplest way to give each side its own travel direction without writing conditional JS.

Separately. interval staggers matches within a single reveal() call in the order they appear in the DOM for that selector, so the five left-side items stagger against each other and the right-side items stagger against each other, each group timed relative to when its own elements individually cross the viewport threshold.

No — version 4 uses IntersectionObserver internally, which the browser fires natively when an element crosses a visibility threshold, rather than ScrollReveal manually listening to scroll events and computing getBoundingClientRect() on every frame. That's why nothing in this snippet needs debouncing.

The dot's reveal call includes delay: 200, so its scale-in animation starts 200ms after it would otherwise. Combined with the card's slide-in duration of 700ms, the dot visibly 'catches up' to and locks onto the card mid-slide, reading as a deliberate connection rather than two unrelated animations.

Add another .srt-item block in the HTML with data-side set to "left" or "right" and it is automatically picked up — the reveal() selectors target the data-side attribute generically, so no JavaScript needs to change when the timeline grows.

reset: false (the default passed at ScrollReveal({ reset: false })) means each entry reveals once and stays visible on scroll-up. Setting it true would re-hide and re-animate every entry each time it leaves and re-enters the viewport — appropriate for a hero section you want to replay, but distracting on a long timeline someone might scroll past repeatedly.