[UPDATE] LottiePlayer Pro 2.0 - Audio Sync, Fit Modes (Cover) & Mobile Support

Showcase Plugins
1

Hello Bubblers! :waving_hand:

I just released a major update (v2.0) for the LottiePlayer Pro plugin. The goal was to solve the most common frustrations with Lottie animations in Bubble: responsiveness, audio synchronization, and mobile compatibility.

Here is what’s new:

1. True Responsive Control (Fit Modes) :framed_picture: Finally, you can control how the animation fits the container.

  • Cover: Perfect for full-screen backgrounds (crops edges to fill).

  • Contain: Keeps the whole animation visible.

  • Stretch: Forces dimensions.

  • Bonus: Added a Resize Listener to prevent SVG glitches when resizing the browser.

2. Audio Engine Overhaul :musical_note: This is a game-changer if you use sound effects with your animations.

  • Speed Sync: If you set the animation speed to 2x or 0.5x, the audio automatically adjusts pitch and speed to match.

  • iOS Support: Includes a smart “Audio Unlocker” to ensure sounds actually play on iPhones/Safari (bypassing the strict autoplay policies).

  • Perfect Sync: Pausing/Stopping the animation instantly controls the audio.

3. Granular Control :control_knobs:

  • Go To Frame: Create interactive animations (e.g., “On click, jump to frame 50”).

  • Instant Segments: The Play Segment action now forces immediate playback, eliminating “lag” or queuing issues.

  • New Data: Access Duration (in seconds) and Total Frames directly in Bubble to build custom progress bars.

Why update? If you are building a high-end UI or a game-like experience, this update ensures your animations look good on any screen and sound perfect on any device.

Check it HERE!

You can also check the Free Version HERE!

Also i updated the price of the plugin.

Happy building! :rocket:

2

Hey Bubblers! :waving_hand:

We all love Lottie animations, but adding too many standard .json Lotties to a Bubble page can quickly hurt your app’s performance and cause DOM lag on mobile devices.

Today, I’m thrilled to announce V3 of the Lottie Motion Player Pro! We completely rebuilt the core engine to give you stunning animations without the performance tax.

What’s New in V3? :fire:

:package: Native .dotLottie Support The new animation standard is here! You can now paste .lottie links directly into the plugin. They are up to 80% lighter than traditional JSONs, loading instantly and drastically improving your Lighthouse speed scores.

:high_voltage: Dual Engine: SVG vs Canvas Renderer You now control how the browser draws the animation. Keep it on SVG for crisp UI icons, or switch the new dropdown to Canvas for heavy animations (like confetti, complex particles, or shadows). Canvas draws the entire animation in a single HTML tag, saving your users’ CPU and eliminating scrolling lag!

:hammer_and_wrench: Fully Rewritten Core

All your favorite Pro features from V1—like the Sound Sync Engine, Frame Triggers, Play on Hover, and Segment Playback—have been fully adapted to run flawlessly on this new, high-speed architecture.

If your app uses Lotties and you care about performance, this is the upgrade you’ve been waiting for. Check it out and let me know what you think! Happy building! :rocket::sparkles:

3

Hey Bubblers! :waving_hand:

We all love using Lottie animations, but let’s be honest: dealing with colors is a nightmare. If you build SaaS platforms, white-label apps, or support Dark/Light modes, you know the pain of having to manually edit Lottie files externally just to change a blue checkmark to a red one. :weary_face:

Today, I’m thrilled to announce the V4 “Brand Chameleon” Update for the Lottie Motion Player (Pro)! :lizard::sparkles:

What does it do? You can now change the colors of your Lottie animations dynamically via Workflows! Just use the new Change Color Palette action, pass the original HEX color, and feed it the new HEX color (hardcoded or from your database). The plugin’s engine safely clones the JSON, injects your new brand color, and reloads the animation in milliseconds—without breaking or freezing.

Awesome Use Cases:

  • :office_building: True SaaS Branding: A user picks #664de6 as their brand color in your dashboard? All your Lottie loading spinners and success icons instantly adapt to that exact hex code!

  • :last_quarter_moon: Dark Mode Magic: Seamlessly switch a black icon (#000000) to white (#FFFFFF) using a single workflow when Dark Mode is toggled. No need to upload two separate JSON files ever again!

Stop fighting with external editors and make your animations truly dynamic. :rocket:

I’d love to hear how you plan to use this! Drop your thoughts below. :backhand_index_pointing_down: