Bubble animation (without bounce)

casheets123 · 2020-08-07T20:39:54.796Z

Looking to achieve exactly what the native bubble animation Transition Bounce does, but without the bounce. (The Transition Slide animation has a fade and doesn’t slide in from off page like the TransitionBounce does.)

It’s easy enough to re-create a sliding animation with the CSS transform property. But I can’t get the element to be dynamic. The native bubble animation seems to keep the dynamic width of the animated element and stops/aligns to the edge of the page. In other words… it just works

Has anyone come across a solution to this, or perhaps a plugin with animations that works exactly like the native bubble ones? I was only able to find unanswered questions about this in the forum. And the animation plugins I have seen all seem to have a few spins and twirls that were more useful in the early aughts

@keith Did you start a mad scientist experiment with an animation plug in at some point?

@eve @josh I know this is a looooong shot. But any chance of a transition slide without bounce being added to the animation list? Basically… the exact same animation, but with the bounce curve taken off.

deadpoetnsp · 2020-08-07T20:49:45.382Z

Not in front my of computer but can you make the bounce time like 5 ms or some small number?

casheets123 · 2020-08-07T21:35:17.069Z

Unfortunately we don’t have access to set the bounce time individually from the transform.
Lowering the animation time too low just creates a flickering/broken effect since the bounce curve becomes too compressed.

J805 · 2020-08-07T22:03:44.361Z

I wish, that would be so much better than the fade in slide. I hope they will somehow do this.

@j805 www.NoCodeMinute.com

For All Your No-Code Education Needs:

One-on-One Tutoring
eLearning Hub
Video Tutorials
No-Code Classes

keith · 2020-08-08T08:33:33.338Z

@casheets123, yep, I do have an animation plugin, called “Reanimator”. It’s an implementation of anime.js and it enables some very wild procedural animation effects (as well as more pedestrian fare).

Unfortunately, it’s not quite ready for prime time as it needs a lot of interface polish and the learning curve is quite steep. (Ironically, anime.js is ULTRA SUPER EASY to use in JavaScript. But designing an interface to it in a point-and-click environment like Bubble is seriously hard.) But like most of my plugins, it offers many additional features such as:

support for inline svgs (a new element plugin type that has some absolutely bonkers features – like grid layout, “sketch” mode, etc. all of which is animateable with Reanimator)
element hovers that trigger an event (run a workflow on element hover)
and other stuff I’ve forgotten
EDIT: now I remember…
** Reanimator has a very novel feature: You can drop a Reanimator in a group and then the elements in the group are addressable by Reanimator. And you can nest animations in this way. For example, imagine that Group A contains Group B. You can drop a Reanimator in Group A and animate all the elements in Group A including Group B. But you can then drop another Reanimator in Group B and separately animate the elements in Group B. And the elements in Group B are then animating under the influence of Group A but also animating per the instructions in Group B. In this way, you can make very “natural” simulations of natural phenomena (like Group B “orbits” Group A) or just wild psychedilic freakouts.
** ALSO: Reanimator has a really cool preview icon (a zombie hand reaching up from the grave) that hints at its occult power. <-- this is the best feature by far

You can get a taste of it here: https://timezoner.bubbleapps.io/version-test/reanimator1?debug_mode=true

(Just click around. But things to try: After loading the page click “disk animate”. Once you get tired of watching that, click “set stagger” and then click “disk animate” again.)

Also, a more sane use of the same plugin can be seen in this page:

List-shifter-demo

Scalar Values as Magic Custom States

Bubble introduces a new way to build a web application. It’s a point-and-click programming tool. Bubble hosts all applications on its cloud platform.

(When you click the checkboxes to change the truth-tests and the values change, the change is indicated by a spring animation.)

One reason I haven’t put more effort into this plugin is that I sense that Bubble users want a replacement for the (seriously shitty) Animate In/Animate Out stuff that’s available in Bubble.

Unfortunately, it is very hard for a plugin to give you easy access to emulations of these features as we don’t have access to certain parts of Bubble. The big thing is that we can’t - from a plugin - properly “animate in” and “animate out” an element and change its visibility. I could go into more detail, but basically we don’t have an API to element visibility in plugins. (Specifically, if an element is not yet visible, it does not exist in the page. And we cannot tell Bubble to instantiate it. So “animate in” is right out the window. There are similar problems with “animate out”.)

So, what I need to do with Reanimator is make it easy to do other stuff so that people won’t ask for better implementations of the jQuery Animation crap that’s in there now.

(The reason the Bubble animations suck so bad, BTW, is that what’s being used are the jQuery animations that are built into jQuery. While at one time these were “useful”, they are not very performant and Bubble’s implementation is very poor. You might notice that the ones that use 3d transforms pretty much NEVER finish properly and that there’s no way to RESET the transform to default. So the only useful ones are fade in / fade out really. And even these are very choppy.)

But all the above being said: Reanimator is seriously awesome once you learn to control it and maybe someday I will release it.

keith · 2020-08-08T10:15:32.220Z

Also: Does not working as expected on mobile.

image1125×2436 1.11 MB

casheets123 · 2020-08-09T18:28:21.548Z

That’s pretty damn cool @keith. A anime.js or velocity.js plug-in would be really, really cool. But as you point out, making it user friendly in a bubble kind of interface is a pretty big undertaking. And it’s a whole different beast, opening the door for some really cool landing page stuff. But I’m more looking to do subtle interface animations. It’s especially needed when doing mobile stuff I find, to make interfaces feel more modern and fluid.

keith:

Unfortunately, it is very hard for a plugin to give you easy access to emulations of these features as we don’t have access to certain parts of Bubble. The big thing is that we can’t - from a plugin - properly “animate in” and “animate out” an element and change its visibility.

Right, that might explain why there aren’t any good animation plug ins available, even for simple stuff.

I don’t know much about the jquery anim library, it might be horrible from a technical stand point? But as far as the bubble animations go, I don’t think they’re all that bad. With a bit of trickery and patience I’ve been able to get some pretty cool interface animations going. But an extra slide animation without bounce would take UX to a whole other level. And it’s soo soo close already.

@josh and @emmanuel
I’m not even going to pretend I know what I’m talking about here. And even thinking about messing with the anim lib might break all things Bubble. But is it remotely possible to take the slide and bounce anims, duplicate them and take off the bounce curve? and bada-bing-badaboom we now have a pretty cool animation library in bubble for doing UX animations.

system · 2020-10-16T20:40:00.648Z

This topic was automatically closed after 70 days. New replies are no longer allowed.