@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:
(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. 