CustomScrollMaskHero

Scroll-reveal media with SVG masks

Transform images and videos into immersive scroll experiences using any uploaded SVG as a custom reveal mask. Animate the mask from a precisely defined starting size to a fully revealed background while controlling its scale, position, scroll range, duration, and easing. Independently scale and position the background media to create subtle zoom and parallax effects. Additional controls include element- or viewport-based sizing, sticky scrolling, media fit and focus, video looping, poster images, canvas previews, and reduced-motion support. Videos automatically pause when the component leaves the viewport for better performance.

Scroll-reveal media with SVG masks