How to use Motion UI for Bubble
1. Drag the Motion UI for Bubble element onto your page.

2. Choose the Source Type:
- url = load a Lottie JSON file from a direct URL
- json = paste raw Lottie JSON into the Animation Source field

3. Enter your Animation Source.
- For url mode, enter a direct Lottie JSON URL
- For json mode, paste the full raw JSON

4. Configure behavior:
- Autoplay
- Loop
- Speed
- Direction
- Renderer Type

5. Choose a Trigger Mode:
- none = normal playback
- hover = play on hover
- click = play on click
- viewport = play when visible
- scroll = sync animation with page scroll

6. Optional performance settings:
- Enable Lazy Load to only load the animation when needed
- Adjust Lazy Load Margin to control how early loading begins

7. Optional scroll settings:
- Scroll Start = scroll position where animation begins
- Scroll End = scroll position where animation reaches the final frame

Useful notes:
- Scroll mode does not require workflows
- Source Type must match the kind of value placed in Animation Source
- If Source Type = json, invalid JSON will show an error message
- Use svg renderer for most cases unless canvas or html is specifically needed

Run mode demo:
https://pro-countdown-testing-app.bubbleapps.io/version-test/lottie_plugin

Demo editor:
https://bubble.io/page?id=pro-countdown-testing-app&test_plugin=1775474823919x194059068454993920_current&tab=Design&name=lottie_plugin&type=page&elements=bTHLL