Back to Dictionary
Scroll & Navigation
●●○Customize
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.
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
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Make my landing page sections fade in and slide up smoothly as I scroll down the page.
Code Example (Tailwind CSS)
'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>
);
}