WaveGallery lets you showcase image galleries in a continuous, fluid wave motion. Two synchronized tickers move in opposite or matching directions with fully customizable waveforms, speed, spacing, and orientation. This highly versatile component allows you to achieve a broad variation of visual effects. Simply upload your images and tweak the visual rhythm with intuitive property controls.
Same component was used in the examples below:
See it in action → https://wavegallery.framer.website/
Mirrored TickersThe component displays two synchronized image tickers with mirrored waveforms. You control images separately for each one, allowing you to add the same images to both for enhanced mirrored effect or choose to emphasize variation.
Smooth Wave AnimationThe images repeat seamlessly, and you control everything from speed and movement direction to wave height and frequency for organic motion and varying visual effects.
Image UploadsUpload images directly or provide external URLs. Supported file types include jpg, jpeg, png, gif, webp, svg. You can choose from common aspect ratios and adjust image size, corner radius and image gap.
Custom BackgroundSet any background color for the component container.
Horizontal or vertical orientationYou can choose the tickers to run horizontally or vertically within the component container by adjusting the Orientation property.
ResponsivenessThe component dynamically adapts to its container when Image Size property is set to Relative. When fixed image size is selected, responsiveness can be controlled by changing image count for each breakpoint.
Code ComponentWaveGallery is a code component. Most variables can be easily adjusted through the component properties panel, with an option to further customize with Framer Workshop or directly in the code editor.
WaveGallery is great for hero sections, visual scroll breaks, motion-rich backgrounds and logo showcases.
No support for interactive elements inside the gallery (pointer events disabled by default).
Max 20 images per ticker (can be changed with Workshop or in the code editor).
Not ideal for large high-resolution images due to continuous animation (optimize for web).
Slower devices may experience frame drops if too many images are used with high frequency/speed.
For the full documentation of this component and to share your feedback, please visit https://wavegallery.framer.website/
Alla Bielikova
