ScrollRevealImage

Sleek scroll animations for images

About

Scroll Reveal Image brings your visuals to life with smooth scroll triggered reveal effects. Instead of static photos, this component lets you add a layer of motion that grabs attention the moment an element enters the viewport. It is perfect for portfolios, landing pages, or any design where you want a premium, high end feel without touching a line of code.

What it does

It detects exactly when an image becomes visible as a user scrolls and triggers a polished reveal animation. You can set directions like top down or side to side, adjust the speed and delay, and even add a stagger effect if you are displaying a series of images. It also supports hover scaling and custom background overlays to ensure your media fits perfectly with your site’s aesthetic.

What you can customize

• Animation settings: Choose your reveal direction, set the exact duration and delay, and adjust the scroll threshold to control exactly when the movement starts.

• Visuals & Content: Toggle captions on or off, add direct links to your images, and enable background masks with custom hex colors.

• Interactions: Turn on hover scaling for extra depth and use the stagger feature to create a beautiful sequence when multiple images appear at once.

Great for

• Portfolio galleries and case studies

• Product feature sections

• Hero headers and landing pages

• Blog post covers

• Interactive "About Me" sections

Share your build

If you ship something cool with it, post it on X and tag me @Dulajweb, or send it over. I’d love to see what you create.

Need help?

Questions or feedback? Reach me anytime: [email protected] or on X @Dulajweb