Animate transition between reuseable groups on single page app

Need help App Organization
1

Hi,

I am building a single page app and using parameters to show/hide groups that represent modules or features within a module. Everything works fine but the client has now asked for animations instead of the show and hide transition.

I have never found the bubble animations to look that great and I find with dynamic content, they look a bit glitchy. I have spent a bit of time today trying to get some working code with chatgpt to run the animation but haven’t quite managed it.

What i am trying to achieve is a nice looking slide and slide in that looks like one seemless motion.

Has anyone got any recommendations? Plugins, code?

Thanks
Robbie

2

If the client is OK with Bubble’s animation, then just use that. Otherwise, you may need to use JS/CSS to achieve the desired animation.

3

Hey Robbie,

Totally get you — Bubble’s built-in animations can be kinda clunky, especially with dynamic stuff.

A couple of things that might help:

  • Custom CSS: You can add slide-in/out effects with simple CSS and trigger them using the Toolbox plugin (via “Run JavaScript”). Looks way smoother than native animations.
  • Transitions Plus plugin: Super handy for better slide/fade effects between groups. (Examples: Transitions Plus, Motion Library and Classify)
  • Overlap groups + delays: If you’re sticking to Bubble-only, try overlapping groups and using “animate in/out” with small delays to fake a sliding effect.

Hope that helps! Let me know if you want a quick example.

– Bruno