Lottie PRO Control turns simple animations into powerful UI components. Designed for professionals who need total control over their app's micro-interactions.
Why go Pro? Unlike standard players, this plugin gives you full programmatic control via Workflows and exposed states.

🔥 Pro Features:

📍 Smart Triggers: Trigger Bubble workflows exactly when the animation hits a specific Frame (e.g., 50, 100) or an internal Marker defined in After Effects.

🔊 Audio Sync: Use the "Play Sound" action to trigger sound effects that automatically synchronize with the animation's playback speed (even at 2x!). Optimized for Mobile (iOS/Android).

🖱️ Smart Hover: Enable "Play on Hover" with one click. Automatically plays forward on enter and stops/resets on exit.

✂️ Play Segments: Play only a specific part of the animation (e.g., "Frame 0 to 30"). Perfect for multi-state icons (Menu/Close, Like/Unlike).

🎮 Full Playback Control: Actions to Play, Pause, Stop, and Reverse animations dynamically.

⏩ Speed Control: Change playback speed in real-time (slow motion or fast forward).

📊 Exposed States: Access Is Playing and Current Speed states to build reactive logic.

  - Includes all Free features:

  - Smart URL handling (Bubble S3 compatible).

  - Tapped & Finished events.

  - Lightweight & Responsive.

🆕 Visual & Layout:

Added "Fit Mode": Choose between Contain, Cover (perfect for backgrounds), or Stretch.

Auto-Resize: Animation now adapts perfectly if the element is resized dynamically.

🎵 Audio Engine 2.0:

iOS/Mobile Ready: Implemented "Audio Unlock" strategy to bypass browser autoplay restrictions on mobile.

Pitch & Speed Sync: Audio playback rate now syncs perfectly with animation speed (0.5x, 2x, etc.).

Smart Sync: Audio pauses, stops, and resumes in perfect harmony with the animation state.

⚡ New Actions & Data:

New Action Go to Frame: Jump to specific frames (and choose to play or stop).

New Action Set Loop: Toggle looping dynamically without reloading.

Improved Play Segment: Now supports instant cuts (ignores queue) and reverse playback.

New States: Duration (seconds) and Total Frames.

New Event: Loaded (fires when metadata is ready).

📦 .dotLottie Support: Paste .lottie URLs directly. This new standard compresses animations up to 80% more than traditional JSON, drastically improving page load times.

⚡ Dual Engine (SVG / Canvas): You now have full control over browser rendering. Use SVG for pixel-perfect UI icons, or switch to the new Canvas renderer to draw heavy, complex animations (like confetti or detailed illustrations) in a single HTML tag, saving massive CPU power.

Change any color inside a running Lottie animation directly via Bubble Workflows in real-time!
Pass the original HEX color you want to replace and the new HEX color you want to inject. Our "Chameleon Engine" does a deep JSON swap and reloads the animation instantly without freezing.


✨ What's new in V5.0:

📜 Native Scroll Sync: Lock your Lottie animation frames directly to the user's page scroll. The animation will magically play forward as the user scrolls down, and reverse as they scroll up.

🎛️ Cinematic Scroll Offsets: Total control over the viewport. Set a Start Offset (e.g., 30%) so the animation freezes at frame 0 until it reaches the perfect spot on the screen before animating.

🖱️ Smart Hover Playback: Say goodbye to laggy Bubble workflows for hover effects! The engine now natively handles Play on Hover and beautifully rewinds the animation using Reverse on Mouse Out with 0ms latency.

Perfect for:

🏢 SaaS & White-labeling: Let your users choose their own primary brand color in your app, and watch all your loading icons and success animations adapt to their brand automatically!

🌗 Dark / Light Mode: Effortlessly switch a black animation to white when the user toggles dark mode, using just one single Lottie file.

Demo Test: https://demo-app-56978.bubbleapps.io/version-test/lottiepro_test/1764439795952x843511980232525000

Editor: https://bubble.io/page?id=demo-app-56978&tab=Design&name=lottiepro_test&ai_generated=true&type=page