Scroll Reveal / Fade-Up on Scroll

Elements remain hidden until they enter the browser viewport, then smoothly fade in and slide up into position. Makes scrolling feel like an active discovery process.

Use

Feature sections on long marketing landing pages

Avoid

Critical navigation or header elements

Safer Alternative

No safer default listed.

Risk Level

Low risk

Live Demo

Scroll down to reveal elements

Keep scrolling...

What It Is

Elements remain hidden until they enter the browser viewport, then smoothly fade in and slide up into position. Makes scrolling feel like an active discovery process.

✓When to Use

Feature sections on long marketing landing pages
About pages introducing team members or values
Article content to pace the reading experience
To prevent the user from being overwhelmed by a dense page

✕When NOT to Use

Critical navigation or header elements
Dense data dashboards or tables
Content that requires immediate reading upon fast scroll

Configuration Tips

01Set viewport margin to trigger somewhat before the element is fully visible (e.g., once 20% is in view)
02Add slight stagger delay (0.1s) to adjacent elements revealing simultaneously
03Only run the animation once (triggerOnce: true) so it doesn't re-trigger when scrolling up

You've Seen It In

AppleStripeLinearArc Browser

AI Implementation Prompts

Move from a fast scaffold to production details, then tune timing and edge states.

Make my landing page sections fade in and slide up smoothly as I scroll down the page.

Code Example (Tailwind CSS)

A focused implementation sketch you can adapt to your product state.

'use client';
import { motion } from 'framer-motion';
import { ReactNode } from 'react';

export function ScrollReveal({ 
  children, 
  delay = 0 
}: { 
  children: ReactNode;
  delay?: number;
}) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 30 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-100px" }}
      transition={{ 
        duration: 0.7, 
        delay: delay,
        ease: [0.21, 0.47, 0.32, 0.98] "text-stone-400 italic">// custom smooth ease out
      }}
    >
      {children}
    </motion.div>
  );
}

Related Effects

Staggered Item Load

List items or grid cards appear one after another with a small delay between each, creating a cascading reveal effect. Adds rhythm and polish to content-heavy pages.