Add effects & animations to any Bubble element — 2 clicks, no plugins, no codeode, no plugins

Tips
1

Hey everyone :waving_hand:

Quick question — have you ever tried adding a simple hover effect to a card in Bubble? Like a lift with shadow, or a scale on hover?

If you have, you know the options are: use a plugin (heavy, limited), write custom CSS in the page header (works but not beginner-friendly), or just… don’t.

I built a Chrome extension called Reflow that adds animations to Bubble — among other things. No code. No plugins. Fully customizable.

HOW IT WORKS

Select an element in the Bubble editor, pick an animation from the Reflow panel, tweak the controls, and it’s applied.
Every animation has its own settings — duration, delay, intensity, colors — with live preview right in the editor.

27 ANIMATIONS AND COUNTING

Hover effects:
• Hover Lift — card rises with growing shadow
• Scale Pop — smooth zoom on hover
• Tilt 3D — perspective rotation
• Hover Glow — color glow behind the element
• Border Draw — border appears on hover

Entrance animations:
• Fade In Up / Down
• Slide In Left / Right
• Zoom In with elastic bounce
• Reveal Up — curtain reveal effect
• Bounce In

Loop animations:
• Glow Pulse — pulsing outline
• Float — gentle up and down
• Shimmer — light sweep effect
• Pulse Scale — for CTAs and buttons

Text effects:
• Blur Reveal — text unblurs left to right
• Color Shift — animated gradient across text
• Typewriter
• Wave — letter by letter

All of them are fully customizable per element.

REFLOW DOES MORE THAN ANIMATIONS

This is actually one of three main features:

Responsive automation (free)
Switch to any breakpoint, edit your elements normally, and Reflow captures every change as a conditional. No more writing responsive rules by hand. Also includes copy styles between siblings, undo all changes, and session tracking.

CSS Animations
27+ animations applied visually with per-element controls. What I described above.

AI responsive (Pro)
Click one button and AI analyzes your entire page, takes real screenshots to verify the layout, and generates all responsive conditionals automatically. Apply or discard with one click.

WANT TO TRY IT?

Reflow is on the Chrome Web Store:

Or visit reflow.website for more info.

Responsive mode and some animations are completely free.

Would love your feedback — which animations are most useful, what’s missing, what would make this better.

Happy to answer any questions :folded_hands:

11 Likes
2

This is absolutely epic! Thank you for making this and sharing!

1 Like
3

Thanks for your feedback! A new version is pending approval from Google, and soon you’ll be able to enjoy a free trial of the Pro features and more effects.

4

Very interesting. How it works, it adds extra CSS on the page level? Did you test the performance: page load speed with it? Happy to test it though.

1 Like
5

Great question! The animations are pure CSS that runs on the browser’s GPU, not on Bubble’s engine. Reflow adds the styles to the Page HTML Header — same place you’d put custom CSS manually. No plugins, no JavaScript, no external dependencies.

To put it in perspective: a single Google Font like Inter weighs around 20-50KB. All 27 Reflow animations combined weigh less than 3KB of CSS. You could add effects to every element on your page and it would still be lighter than one font file.

Browsers are built to handle CSS animations natively — properties like transform and opacity don’t even trigger repaints. So zero impact on your Bubble performance, workflows, or page load.
Everything Reflow adds is visible in your page settings under HTML Header. Nothing hidden, nothing you can’t remove.

4 Likes
6

Cool thanks, I’ll give it a test.

1 Like
7

Looks neat, gonna try now.

1 Like
8

This is cool, I will try it asap!

9

hey, does it work for mobile devices and is it possible to put conditions like “when this button is pressed” ?