p/lottielab
Create and export Lottie animations to sites and apps easily
Andrew Ologunebi
Lottielab Interactivity — Create and export interactive Lottie animations easily
Featured
46
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.
Replies
Tony Han
The demo video is super cool - tons of out of box interaction designs and states. I can see the collab power between dev and design to use this to go full circle on designs they are creating. When will the lab be smart enough to have ready made or AI generated assets that non-designers can play around with as well? That'd be an amazing way for someone who's an indie maker to create awesome animations a well! Congrats on the launch @drewosophy and team!
Chris Frantz
congrats on the release
Andrew Ologunebi
@frantzlight Thanks Chris!
Germán Merlo
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!
Andrew Ologunebi
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!
Andrew Ologunebi
@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...
Abinash Mohanty
@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 👏
Artem Luko
I will give a shot 😀
Güven Sözmen
❤️
Gilbish Kosma
Rive got a competitor now
Daniel W. Chen
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.
Thushaan Rajaratnam
🚀🚀🚀
Nice launch, guys! Couldn't not notice how the logo looks oddly similar to Shipfast.AI 🤨
Ayaan Gill
Super excited after playing around with this a bit! Definitely beats After Effects for the simpler animations with the intuitive interface.
Yash
This sounds groundbreaking! Excited to see how Lottielab will change the game for designers. What projects do you envision using this tool for first?
Alexander Okonji
very nice congrats with your launch,when is mobile creativity and editing is gonna ve available
ma
Wow, Drew! This sounds like a game changer for designers. The ability to add interactivity directly within an easy-to-use Lottie editor is going to take animated UX to the next level. No more endless handoffs and static files—just pure creativity unleashed! 🚀 Can’t wait to see how teams leverage Lottielab Interactivity in their projects. Plus, integrating with Figma and other tools makes this even more seamless. Eager to jump into the beta! Anyone else excited to test drive this? #MVP #UX #Animation
Elke
Congrats on the launch, Drew! Lottielab Interactivity sounds like a game-changer for designers looking to enhance user experiences. The features you mentioned, like state machines and the ability to add triggers without needing to dive into code, really will bridge the gap between design and development. It's impressive to see how Lottielab is evolving to meet user needs. The mention of integrations with platforms like Figma and the ease of embedding animations makes it a must-try for many teams. Excited to see how it enables more engaging interactions in our projects! I can't wait to put Lottielab Interactivity to the test and explore the potential it unlocks. Kudos to you and the team for addressing a critical need in our industry! Looking forward to more updates and continuous improvements. Happy hunting!
Ema Elisi
This sounds intriguing! How does Lottielab Interactivity make creating interactive animations user-friendly and accessible? I can't wait to see the possibilities this tool offers!
Immanuel Varghese
Lottie is the best
Sumeet Pannu
You are going to make a designer out of all of us! Really great demo. Looking forward to trying the export functionality to see how easy it is to integrate with my existing large code base.
Alex
Excited to see Lottielab Interactivity launch, @drewosophy! This is a game-changer for designers. The seamless integration of interactive elements is what we’ve been waiting for! Can't wait to explore. #Upvote
Kyrylo Silin
Hey Andrew, I'm curious, how easy is it to integrate the interactive animations into existing projects? Congrats on the launch!
Andrew Ologunebi
@kyrylosilin It's super easy. If you already have an animation in Lottielab, you simply need to click the interactivity tool (⚡) in the toolbar. Then add some states, and some interactions (super similar to how Figma works). You can also check out our detailed docs here to get started: https://docs.lottielab.com/edito...