Real native animations for any element on your native mobile page, targeted by nothing more than the element's ID Attribute. Add one Animation element to the page, give the elements you want to move an ID Attribute, and animate them from any workflow. No conditions, no wrapping groups, no extra fields on your elements, and nothing visible on the page until an animation plays.
These are true native animations, driven by the device itself rather than by a web view, so they stay smooth even on busy pages. Thirty-two animations, eight easing curves, an optional repeat count and full control over timing, all driven straight from your workflows. Every animation plays its movement and hands the element back exactly as it was, so you never have to manage visibility or worry about an element being left hidden or out of place. Set the animation and the easing from a dropdown or feed them in dynamically from your own data. If you have wanted to animate native mobile elements the way you can on the web, this brings it to your Bubble app.

PLEASE READ BEFORE BUYING:

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 web-style animations that finish with the element hidden, such as fade out, slide out or zoom out, and it does not include their entrance counterparts like fade in. If you are coming from the web version of Bubble's animations, this is the one thing to be aware of: these animations never leave an element hidden or moved out of place. This is a deliberate choice. On native mobile pages there are real technical limits to controlling an element's visibility cleanly from the outside, so rather than ship animations that could leave an element stuck hidden or behaving oddly, this plugin focuses on the animations it can do beautifully and reliably. If you need to genuinely show or hide an element, use Bubble's own Show and Hide actions for that, and use this plugin for the motion. I would rather be upfront about this than have it be a surprise after you buy.

HOW IT WORKS:

- Add one Animation element to the page. It does all the work and does not need to be visible to your users.
- Give any element you want to animate an ID Attribute, the standard Bubble field in the Layout tab.
- Run the Animate action from any workflow, set the target's ID Attribute, choose an animation, and that element animates.
- No conditions, no per-element setup, no wrapping groups, and no visible change to the element until the animation plays.
- Every animation returns the element to its resting state, so you can run any animation on anything as often as you like.
- Animate any element type, including groups. Animating a group animates everything inside it.
- One Animation element drives as many different elements as you like, anywhere in your app.

THE ANIMATIONS:

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 ongoing effect.
- Pick the animation and the easing from a dropdown, or set them dynamically from your own data.
- The dynamic fields take precedence over the dropdowns, so you can build your own controls and let your users choose their own animations at runtime.

NATIVE AND SMOOTH:

- True native animations on both iOS and Android, drawn by the device, not squeezed into a web view.
- Built for the New Architecture (Fabric).
- Motion timed to the display refresh for clean, judder-free animations.
- Opacity, movement, scale and rotation, combined per animation for rich, lively effects.

WORKFLOW INTEGRATION:

- An is animating state, yes while an animation is playing, for loading indicators and to guard against repeat taps.
- A last animation state, holding the animation that ran most recently, and a last target state, holding the element that was animated.
- An animation started event and an animation completed event, to chain steps or react to motion.
- Use the animation completed event to run the next thing at the exact moment an animation finishes, and the last target state to act on the right element when you animate several.

TROUBLESHOOTING:

- A Debug mode toggle that records exactly what the plugin is doing as animations run.
- A readable debug logs state, with timestamps and clear, plain messages.
- A Copy debug logs action, so you can grab the log with a single tap and send it over if you ever need a hand.

This plugin is an active, well-supported project that is added to over time, with more animations and features added regularly.
Any issues with it, please reach out to me and I will help resolve any problems asap.

Paul