[NEW PLUGIN] Lottie - Animated JSON

Hey everyone,

We’re excited to introduce our groundbreaking plugin on the Bubble.io Marketplace that’s designed to offer you unprecedented control and customization over your animations. We invite you to try it out, and we’re confident you’ll fall in love with its extensive set of features!

Demo link: https://dignicyplugins.bubbleapps.io/version-test Editor link: Dignicyplugins | Bubble Editor
Marketplace: Lottie - Animated JSON Plugin | Bubble

Our plugin provides a wide array of functions to elevate your animation experience:

  1. Dynamically Control Animation Playback Speed: Modify the speed of your animation in real-time to fit your desired pace.
  2. Change SVG Color: Personalize your animation by customizing the color of the SVG elements.
  3. Set Freeze Frame: Define a specific frame to freeze the animation, giving you precise control over its flow.
  4. Get Duration in Seconds: Obtain the total duration of your animation in seconds for better time management.
  5. Get Total Frames: Access the total number of frames in your animation for improved control.
  6. Change Animation Background: Customize the background of your animation to better match your design aesthetics.
  7. Play a Sequence of Animation: Select and play specific sequences of your animation for increased flexibility.
  8. Autoplay, Loop, Speed, and Direction: Enable or disable autoplay, control looping, adjust speed, and change the direction of your animation for a dynamic and interactive experience.
  9. Change Animation Direction: Switch the direction of your animation to create unique visual effects.
  10. Play, Stop, and Pause: Easily control your animation with play, stop, and pause functionalities.
  11. Get Animation Duration and/or Number of Frames: Retrieve information about the duration and frame count of your animation for better planning.
  12. Render Type (SVG, Canvas, or HTML): Choose the preferred rendering method for your animation to ensure optimal compatibility.
  13. Event Listeners: Manage various events, such as Complete, onLoopComplete, DOMLoaded, and All Loops Completed, allowing you to respond to specific events in real-time.
  14. States: Monitor the status of your animation, including Playing, Paused, Completed, Loop Completed, and All Loops Completed, for better control.
  15. Dynamically Specify Looping: Decide whether to loop your animation, and set the number of loops dynamically.
  16. Dynamically Play [from] - [to]: Flexibly play a specific range of frames in your animation for precise control.

With these powerful features at your fingertips, our plugin will empower you to create impressive and interactive animations like never before.

We’ve developed an advanced demo showcasing the plugin in action. Feel free to explore it and get inspired by the possibilities:

Demo link: https://dignicyplugins.bubbleapps.io/version-test

If you’re eager to start experimenting with our plugin, you can access the editor by following this link:

Editor link: Dignicyplugins | Bubble Editor

We encourage you to give our plugin a try and share your feedback with us. Your thoughts and suggestions are invaluable for our continuous improvement. We’re confident that you’ll love the unparalleled control and customization it offers, and we can’t wait to see the incredible animations you create!

Elevate your animation game with our revolutionary plugin!

Happy animating!

1 Like

Hey, I’m enjoying the plugin, but I’m having trouble with responsive UI. What is the best way to make the animation responsive (fill parent container width) while maintaining the aspect ratio? Thanks!

Hey! I’m glad to hear you’re enjoying the plugin. I’d suggest you to use Canvas rendering mode to keep the aspect ratio. Additionally you can use “Fit height to content” I’ve also made quick changes to the plugin, added { preserveAspectRatio: 'xMidYMid slice' } attribute there.

Thanks for the fast fix! Unfortunately, I had to roll back to 1.4.0. It appears that the canvas is being cropped instead of sized to fit.

That’s true it was “fast” fix that’s why there is still a bug, as we can see :smiley: , I’ve sent you a message, please send me the JSON. I will implement a fix.