Lottielab Interactivity

Lottielab Interactivity

Create and export interactive Lottie animations easily

#Lottie#Animation#InteractiveAnimation#AnimationEditor#WebDesign#UserExperience#UxDesign#DesignTools#Figma#AfterEffects#WebDevelopment#MobileDevelopment#Front-endDevelopment#WebAnimation#AnimationSoftware#Lottielab#InteractiveDesign#DesignWorkflow#DesignCollaboration#UiDesign#MotionDesign#DesignTrends

We're excited to launch Lottielab Interactivity - the world's first interactive Lottie animation editor.

Create and export animations that react to clicks, hovers, scrolls and more enabling experiences that engage and respond to users like never before.Hey everyone,

My name is Drew. I'm a designer and one of the co-founders of Lottielab.

We are super excited to be launching one of our biggest releases till date into beta - Lottielab interactivity.

Lottielab interactivity enables you to easily create and export interactive lottie animations that react to user actions, to your websites and apps.

This includes creating states for your animation (state machine), and adding events and triggers such as hover, click, scroll, custom events that can be hooked up with user actions in code, and more.

Since founding Lottielab, our mission has been to empower design and product teams to create engaging animated user experiences more easily, and we set out to build the easiest and most powerful Lottie animation editor to accomplish this.

Today, Lottielab is the best-in-class animation editor enabling thousands of leading design and development teams such as OpenAI, Google, Monzo, Microsoft and more to create delightful animated experiences.

One of the most requested features since our launch has been interactivity.

Designers wish to not just create designs or animations, but to also craft the entire user experience by adding interactive elements (events and triggers) that respond to user actions themselves.

This was a world that was limited only to developers before and done in code, with designers relying on handing off static files and notes to explain interactions, which has become a frustrating process for both sides.

Lottielab makes this entire process seamless, enabling designers to leverage a familiar Figma-like interface to create interactive animations without limit.

  • Add states and advanced transition properties such as 'blends' to blend the transition between states, easing types and more.
  • Add triggers to any layer or artboard to set them as a target for interaction.
  • Select from a range of pre-defined events such as clicks, hovers, scrolls and more, or add custom events and formulas that can be hooked up by developers to custom user actions in code.
  • Preview, test and share your animations easily without the Lottielab preview playground.
  • Publish/ Embed your animations across various platforms from E.g Framer, Webflow, Wordpress, React apps, and various other web and mobile platforms.
  • Import designs from Figma, animations from After Effects, or SVGs into Lottielab to bring them to life with interactivity.

This means that design and product teams can explore improve user experiences across a multitude of use cases such as onboarding animations, website hero and product showcases, micro-animations and icons, success animations, interactive charts and more...

We are looking forward to seeing you all take it for a spin and let us know your thoughts.

We are continuously improving Lottielab and our interactivity features, so if you have any feedback, questions or further suggestions, please don't hesitate to share them with us.

Happy hunting!@drewosophy does it support adding custom interactions beyond clicks and hovers like gestures or multi touch for mobile apps?@dash4u Yes, even if the events are not out of the box in Lottielab, you can set up custom events that your developers can hook into other types of interactions directly in code. You can check out our docs over here: https://docs.lottielab.com/edito...@drewosophy You guys are killing it! I never looked at After Effects and Jitter Video after I started using LottieLab. It's been four weeks since I've started using the editor, and I can tell you that this reminds us of the OG motion design tool we've grown up with, Flash 😄. Lottielab is easy to use, and it doesn't have any learning curve at all. Not to mention these new interactivity features, and this is something I'm going to try. Good job, and keep cooking 👏Hey Andrew! Definitely loved it. It may be cause I'm a former designer, but I deeply feel it goes beyond. The tool is super cool but it also gives 'engagement' to web sites. Hope all the makers feel the same and wish you all the best here! Congrats team!this is great i use Lottie a lot in my web app, i love it it's so lightweight and animated. always thought if I could easily create an interactive lottie that would really help a lot with the UX.Lottie animations work really when you are trying to build something interactive. These are just eye-catching. I have tried this out and built a few animations and they work well. I will surely use it in my next launch

Recent Publications