AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |
Back to Blog
Protopie loading animation12/26/2023 ![]() ![]() Quite the opposite! This practice has become essential to catch user attention.Īnimation in UI goes far beyond just being an eye-catcher. However, designing animated interfaces or elements in motion is no longer impressive. So go on – pick out animations you love, customize them and create beautiful prototypes.Animations make our activities more exciting and less boring. Or just start by exploring the thousands of free animations in our library. To learn more about Lottie, check out LottieFiles’ free tutorials and courses. We hope the examples above have inspired you to try out Lottie animations in your prototypes. On the development side, implementing scroll animations with Lottie is as easy as enabling the ‘scroll’ mode in JavaScript. In ProtoPie, you can use the Chain, Detect or Range triggers to programmatically control the playback of a Lottie animation. When designing with them, it’s useful to include them in your prototypes, as it can be hard for developers or clients to imagine what they should look like otherwise. Want to make use of scroll animations in your designs? They can make a site or app more interactive, engaging and most of all: memorable. Just take a look at this landing page for the iPad Pro, where animations and product images slide in and out of view as you scroll down the page. ![]() They feature punchy copy, gorgeous visuals and great use of product storytelling.īut one thing in particular stands out – the use of scroll animations. No matter what you think of Apple products, it’s hard to deny that their landing pages are amazing. To set these up in your prototypes, use the Tap trigger in ProtoPie to trigger the playback of your Lottie animation. Or take the example of an e-commerce app – when you add something to your cart, an empty cart icon may animate into a filled cart.Īpart from indicating that an action has happened, these animations add small moments of delight as users interact with your site. For example, when you ‘like’ a Twitter tweet, the heart icon turns red, accompanied by an explosion of confetti. Loading animationsĪnimation signals to a user if an interaction has successfully (or unsuccessfully) taken place. Once you’re familiar with adding Lottie animations, check out these five ways you can use them in your prototypes. Watch this video to learn more about adding and using Lottie animations in ProtoPie. Alternatively, you can click Insert > Layers > Lottie. To import a Lottie animation, just drag and drop your file into ProtoPie. The great news is that ProtoPie natively supports Lottie animations. Your developers won’t need to code them from scratch. They can be implemented with Lottie libraries available for Web, iOS and Android. Since Lottie animations are JSON-based formats, you’d just need to hand off a single asset file for each animation.
0 Comments
Read More
Leave a Reply. |