Lottie-Interactivity lets you load animations via a URL, meaning all public Lottie animations on LottieFiles are available and easy to integrate into your interactive scenarios. If you remove the cursor, the animation pausesĦ) Seek: Sync the animation to the horizontal movement of the cursor to move to the next animation/segment in your interaction chainħ) onComplete: The transition will occur when the animation/segment has finished playing Additional features If you remove the cursor, the animation plays in reverseĥ) pauseHold: Hold the cursor on the animation for X amount of frames or until completion to move to the next animation/segment in your interaction chain. Available interaction chains and eventsĬurrently, we have seven different ways to interact with Lottie animations within the interaction chaining system, which allow you to move between different segments of animations.ġ) Click: Click to move to the next animation/segment in your interaction chainĢ) Hover: Hover to move to the next animation/segment in your interaction chainĬlicking and hovering can be defined to be performed a certain amount of times for a transition to occur.ģ) Repeat: Play the animation X number of times to move to the next animation/segment in your interaction chainĤ) Hold: Hold the cursor on the animation for X amount of frames or until completion to move to the next animation/segment in your interaction chain. Interaction chaining allows you to easily set up scenarios like displaying a success animation when a user clicks or hovers X number of times on a button, looping an animation X number of times and then showing another, holding down on a Lottie until it finishes, or simply autoplay a few animations one after the other without having to stitch them all together manually.Īs Lottie-Interactivity works by defining a list of actions, you can define as many interactions as you like. This new feature lets you easily set up interactive scenarios where parts or whole Lottie animations can be played in a sequence, depending on many available interactions and player-related events. Interaction chaining is a new way to interact with Lottie animations when using Lottie-Interactivity. In this blog post, I want to share what's now possible. With our open-source library Lottie-Interactivity, we're aiming to change the way you can interact with Lottie animations and make it as easy as possible. Look for a validation check to ensure the URL is accurate and valid.Up until now, if a Lottie animation was interactive, it was usually with a single interaction (playing on click, hover, seek, loop, toggle, etc.).

Opt for the 'URL' option and enter your self-hosted URL.Choose the media type to upload to your Pie in the 'Source' option.Here's a simple guide to using this feature: Whether you opt for an image, video, or Lottie file, ProtoPie lets you seamlessly integrate it into your projects. Other common platforms that can be used here are Unsplash, Pexels, and Pixabay. For example, you can utilize Lorem Picsum as an illustration of this convenient integration. Instead, you can effortlessly insert the API request URL directly into the Media response, making the process even more streamlined. Integrating APIs into your design workflow allows you to dynamically incorporate images into your projects, obtaining a dynamic and flexible approach.įurthermore, with certain straightforward image APIs, there's no need for an additional API plugin.

This feature gains even greater versatility when combined with APIs.

Remember, these URLs must be self-hosted for compatibility. Incorporating self-hosted media into your prototypes ensures faster loading times, enhanced privacy, and a seamless user experience. ProtoPie is proud to make available the ability to import self-hosted media via URL using the new Media response. Let's explore the new features in this latest release. ProtoPie brings new improvements for your prototypes' media animations and more. From improved control over media elements to a step forward into 3D effects and the potential for real-time interactivity.

Protopie lottie