Vibedex.io
Back to gallery
scrollsBeginnerscroll

Scroll Reveal Sections

Sections fade and lift in as they enter the viewport, using IntersectionObserver.

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a scroll-reveal pattern: each <section class="r"> starts with opacity:0 and translateY(40px). Use IntersectionObserver with threshold 0.2 to add an 'is-in' class when the section enters the viewport, transitioning opacity and transform over 0.8s.

Code

html
<!--
  Source: Una Kravets
  https://github.com/una
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/scroll-reveal
-->
<main><section class="r"><h2>One</h2></section><section class="r"><h2>Two</h2></section><section class="r"><h2>Three</h2></section><section class="r"><h2>Four</h2></section></main>