OneTaskBy Tim King · Updated
CSS Image Reveal on Scroll
Scroll-Triggered Image Wipe or Circle Reveal With clip-path, No JavaScript
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Image Reveal on Scroll works
A CSS image reveal uncovers a picture as it scrolls into view, wiping in from one side, opening from the centre or growing out of a circle. Pick an effect and copy a few lines of CSS with no JavaScript at all.
Reveals give long pages rhythm and draw the eye to key images such as project shots, product photos and case study heroes, without slowing the page down.
How the CSS image reveal works
The animation changes the image's clip-path from a fully clipped shape to the full image. Instead
of running on a timer, it is tied to a scroll-driven view() timeline, so the reveal progresses
as the image moves up the screen and reverses if you scroll back. The range starts when the image
first enters and finishes at the point you choose, so it is always complete before the image
reaches the middle of the screen.
Fallback and accessibility
The animation sits inside @supports (animation-timeline: view()) and a reduced motion check.
Browsers without scroll-driven animations, and visitors who prefer less motion, simply see the
image with no effect, so nothing is ever left hidden.
FAQ
Which browsers support scroll-driven reveals?
Chrome, Edge and other Chromium browsers support scroll-driven animations, and Safari has added them in recent versions. Anywhere they are missing the image shows normally, so it is safe to use the effect today as a progressive enhancement.
Can I make the reveal play once instead of following the scroll?
Yes, but that needs a few lines of JavaScript. Use an IntersectionObserver to add a class when the image enters the screen, and run the same keyframes as a normal timed animation on that class instead of the view timeline.
Does clip-path hurt performance?
Animating clip-path is cheap on modern browsers, because the image is decoded once and only the visible area changes. Keep the image a sensible size and set its width and height so the layout does not jump as it loads.
Will the hidden part of the image affect SEO?
No. The image is a normal img element with alt text in the HTML, so search engines see it the same way whether the reveal runs or not. Write alt text that describes the picture.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Parallax Builder
Build a layered CSS parallax section with scroll-driven animations.
Fade-In Generator
Generate a CSS fade-in animation with delay, easing and blur.
Clip-Path Generator
Build clip-path shapes — polygons, stars, circles, chevrons — visually.
Reading Progress Bar
Make a scroll progress bar for articles and copy the CSS and JS.
Before / After Slider
Build a drag-to-compare before and after image slider.