This component creates an animated effect where images continuously float upward from the bottom of your frame, moving in a zigzag pattern as they rise and fade out at the top. Think of it like bubbles or emojis floating up in a live stream or celebration screen.
This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click here to see the full library
Copy the Bubble Up component and paste it into your Framer project file
In the properties panel, add your images (you can add up to 20 different images that will randomly appear)
Customize all settings in one go: adjust Image Size (20-200px) to control bubble size, set Speed (2-20s) for how fast bubbles rise, change Randomness (0-1) to control how much they sway side to side, modify Zigzag Frequency (1-10) for the zigzag pattern tightness, and set Concurrency (1-20) for how many bubbles float simultaneously
The component works by continuously generating images that animate from bottom to top with a natural zigzag motion. You control everything through the property panel: add your images (up to 20), adjust how big they appear, set how fast they float up, control how much they zigzag side to side, change the zigzag pattern frequency, and decide how many bubbles appear at once. The bubbles automatically fade in when they appear and fade out before disappearing at the top.
When you purchase this component, you'll receive:
The Component Itself - Full access to the component all future updates
Remix File with Component Setup - A complete Remix file with the component pre-configured and ready to integrate into your project.
Setup Instructions - Clear, step-by-step instructions to help you implement the component quickly and correctly.
Dedicated Support - Direct access to our team for assistance if you encounter any issues during setup or implementation.
For any queries and help setting up the component, contact hello@segmentui.com
If a component does not function as advertised and the issue cannot be resolved, you are eligible for a full refund under our quality guarantee. Refunds will not be provided for any other reasons, including change of mind, accidental purchase, lack of use, or expectations of features not explicitly advertised.
Nabeel
