Skip to content

component

ScrollRevealImage

By Dulaj dilshan

Details

Summary

Sleek scroll animations for images

Description

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: dulajdilshan766@gmail.com or on X @Dulajweb

Introduction

Sleek scroll animations for images

Rank history

Daily rank per list, from the first snapshot — lower is better.

125015001750181358/148/228/309/79/15
  • All · #8091