Scroll Image Reveal

Cinematic Image Reveals for Framer

Transform static images into dynamic scroll experiences. Four organic reveal effects with full control over timing, easing, and visual impact.

Built for designers who need portfolio-grade animations without touching code.

Features

Four Reveal Effects Circle, Circle Morph, Circle Blur, or Wave Path—each creates a unique organic reveal as users scroll.

Complete Animation Control Set when reveals start and end, adjust smoothness, choose from 30+ easing curves, and add optional delays.

Advanced Visual Effects Customize displacement intensity, blur amounts, morphology, and brightness transitions for your exact vision.

Transform Animations Add position shifts, scaling, or rotation at the start and end of your reveal for extra dimension.

Performance First GPU-accelerated animations run smoothly at 60fps. Lazy loading ensures fast page loads.

Use Cases

Portfolio Hero Sections — Make striking first impressions with images that reveal as visitors scroll

Product Photography — Showcase products with cinematic reveals that feel premium and polished

Case Study Pages — Draw attention to key visuals with dynamic scroll-based reveals

About Pages — Add personality with images that come alive as users explore your story

Landing Pages — Elevate conversion rates with engaging scroll interactions that feel modern

How to Use

Installation

After purchasing from FramerHub:

1. Log in to your account at framerhub.io
2. Navigate to framerhub.io/dashboard
3. Find Scroll Image Reveal in your Recent Purchases
4. Click the "Copy" button
5. Open your Framer project
6. Paste the component anywhere on your canvas (Cmd/Ctrl + V)

Customization

All settings are in Framer's properties panel:

Image & Display

• Upload your image or paste an image URL
• Set image dimensions and object fit (cover, contain, fill)

Reveal Effect

• Choose from 4 effects: Circle, Circle Morph, Circle Blur, Wave Path
• Adjust final reveal size and displacement intensity
• Control blur amount and morphology for enhanced effects

Animation Timing

• Set start and end scroll triggers
• Adjust smoothness (lower = smoother scrubbing)
• Choose from 30+ easing options
• Add optional animation delay

Transform (Optional)

• Set starting position, scale, and rotation
• Define ending position, scale, and rotation
• Create complex multi-dimensional animations

Quick Tips

Timing Matters — Start reveals early (top bottom) for gradual builds, or late (center bottom) for impact

Easing Choice — Use "none" for smooth linear reveals, or "power2.out" for snappier finishes

Image Size — Larger images need higher final radius values (800+) for complete reveals

Layering — Place text or overlays above the component for rich, layered compositions

License

Single Use License — Use in unlimited client projects with full commercial rights. No redistribution.

Why Designers Choose This

Four ready-to-use effects give you a professional starting point, then every parameter is yours to control. From subtle reveals to dramatic transformations, you get the exact animation you envision—all through Framer's familiar properties panel.

Perfect for designers building portfolio sites, agencies delivering premium client work, and freelancers who want standout scroll experiences.