Hi all,
This is a native animations plugin available for mobile pages. It comes with 32 different animations that you can use against any element.
The editor link along with the instructions/documentation, can be seen here:
https://bubble.io/page?id=paul-testing-4&tab=Design&name=Home&type=page
Please note this is a native plugin so you won’t be able to view it directly through the browser, you’ll need to use the BubbleGo app once it’s installed.
The plugin link is here:
https://bubble.io/plugin/animation-native-mobile-1782528367037x708482951450198000
As of current, the details are as follows:
So, this pretty much brings real native animations to any element on your mobile page, drawn by the device itself rather than inside a web view, so they stay nice and smooth.
One thing I want to say upfront, because I know this question will get asked and I certainly don’t want anyone to buy it with this expectation in mind… this plugin is built around movement and emphasis animations, the kind that play and then return the element exactly to how it was. It does not include the web-style animations that finish with the element hidden, such as fade out, slide out or zoom out, nor their entrance counterparts. I’ve run into some technical limits on native mobile pages that control an element’s visibility cleanly from the outside, so rather than ship animations that could leave an element stuck hidden or behaving a bit strange, the plugin focuses on the ones it can do reliably. If you need to show or hide an element, then use Bubble’s standard show/hide element actions for that, and this plugin for the motion.
How it works
You add the Animation element to the page, then give any element you want to animate an ID Attribute. Note: If you can’t see this then you’ll need to enable the option called “Expose the option to add an ID attribute to HTML elements” which is in your App settings, under General, right at the bottom. This is a little mis-leading on mobile but it is available and is used by the plugin.
Run the Animate action from any workflow, set the target id value to the same as what you set on your element you’re going to animate, choose an animation and then it will animate when the action runs.
The animations
There are 32 animations in total, grouped under the following categories along with explanations on what each one does in the documentation. These are run using the ‘Animate’ action.
- Opacity effects: Pulse, Flash, Blink, Glow, Throb and Sparkle.
- Shake effects: Shake, Head Shake and Buzz.
- Vertical movement: Bounce, Float, Hop, Drop, Rise and Nod.
- Rotation and wobble: Wobble, Swing, Jello, Vibrate, Sway and Tilt.
- Scale effects: Pop, Rubber Band, Tada, Wiggle, Squash, Expand and Shrink Pulse.
- Flip and spin: Flip X, Flip Y, Spin Forward and Spin Back.
Timing, easing and repeat:
Set how long each animation runs, in milliseconds, for snappy or slow and deliberate motion. Eight easing curves: Linear, Ease In, Ease Out, Ease In Out, Ease Out Cubic, Back, Elastic and Bounce. An optional repeat count plays an animation several times back to back, for a stronger or more insistent effect. Pick the animation and the easing from a dropdown, or set them dynamically from your own data.
States and events:
is animating: Is yes while an animation is playing and no when an animation is not running.
last animation: A text value holding the internal name of last animation that ran.
last target: A text value holding the id attribute of the last element that was animated.
animation started: Fires the moment an animation begins.
animation completed: Fires when an animation finishes.
Troubleshooting
There’s a “Debug mode” option on the main element that allows the plugin to write a load of logs into the ‘debug logs’ state. I’ve included a “Copy debug logs” action too, so if you run into any issues then you can fire those logs over to me and I’ll help.
Hopefully it proves to be another useful plugin. Happy to tweak any of the animations if needed or add additional functionality if asked for.
Paul