WaveGallery

WaveGallery lets you showcase image galleries in a continuous, fluid wave motion.

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/ ✅ Key Features Mirrored Tickers The 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 Animation The 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 Uploads Upload 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 Background Set any background color for the component container. Horizontal or vertical orientation You can choose the tickers to run horizontally or vertically within the component container by adjusting the Orientation property. Responsiveness The 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 Component WaveGallery 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. 🎯 Use Cases WaveGallery is great for hero sections, visual scroll breaks, motion-rich backgrounds and logo showcases. ⚠️ Limitations 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. 💬 Support & Feedback For the full documentation of this component and to share your feedback, please visit https://wavegallery.framer.website/

mirrored wave animation