What’s the most amazing thing people are doing with transitions

I’ve never used the transitions tab, to be honest I’ve barely looked into them.
I’ve found tho often the best way to be inspired is to see what cool things something can do.

If anyone has any interesting things, tips tricks or hacks involved transitions please sound off below

1 Like

Maybe im not the only one that’s never used transitions :thinking:

Assuming you mean the native ones, they suck to make in Bubble. There are a few posts on the forum addressing them, I’ve never seen anything compiled. Search to confirm but I think it boils down to: fade in out is mostly safe to use, animations using position/resizing effects toggle wierd and move the base positioning of elements around if you try to start a new animation before the current one finishes. Css or jquery animation is possible but limited due to the bubble rendering system. Individual elements work well, “groups” can be tricky depending on what you’re trying to accomplish.

IMHO: There’s not much “amazing” one can do with transitions as the most interesting and useful properties (like transforms) are (bafflingly) omitted. And it doesn’t support fancy newer CSS properties either.

So, conditions are mostly just pedestrian stuff like highlight an invalid input in red sorts of things… and animating a color change with a standard CSS easing isn’t super exciting. (You could do a lot more interesting stuff if Bubble let you design a custom easing curve.)

(This being said: I prototyped Calendar Grid Pro in Bubble and it had a rather amazing set of conditions to do what it needed to do. Mostly transition times were set to minimal values as it was already painfully slow due to the iteration required [which could only be done via very very very clever, complex, and computationally-inefficient search/filter operations]. So, perhaps there are other surprising things being done with transitions, but… ya know.)

I’m sure there ARE some nifty/surprising things one could do, but the answer set here is going to be pretty limited.

BUT… stay tuned for more soon on my REANIMATOR plugin, which enables some bomb-ass animation stuff.

2 Likes

Hey @duke.severn: I think the OP is talking about the CSS transitions tab on any element, and not the shitty jquery animate options, but point taken!)

I found out about them and used them when creating a form like keith mentioned, it is not very fancy or exciting but really does help make the form being filled a better UX.

As duke mentioned the workflow animate actions mostly don’t work or not consistently enough to implement into an app, although there are a few that work somewhat consistently, although those are pretty simplistic.

Here is an example of animation: I use only the bounce because it is the only one that works consistently.

animate

Here is an example of an input with the transitions being used:

input

3 Likes

I had spent some time a couple years ago working out some neat little UI tricks with them just to see if it could be done. I dug back in my archives :slight_smile: Here you go!

5 Likes

That’s brilliant how did you make the Caption text on the password input move?

with the transitions

There was a thread I put up explaining the whole process

1 Like

How did you do the spinning wheel in the save changes button?

I believe it’s [fa] fa-cog fa-spin [/fa] but it only works in text elements

Or you can select the cog fa-icon and there is a checkbox that makes it rotate, chuck it in a group with a text

2 Likes

Yep, it’s the fa spin option in a single text element

1 Like

Missed this. Sweet, @eli! (Want to beta test REANIMATOR?)

@keith, thanks! And sure, I’ll give it a whirl.

Ok cool. PM me the name of a project or projects you wanna use it in and I’ll authorize them soon. (Still working on a couple of ideas, but this is one that really needs feedback like, “It would be great if I could…” types of issues.)

Hey @eli

How did you make the toggle switch with the transitions?

Thanks a lot.

2 Likes