New Release: Lottielab to Framer Plugin
Give your site an edge with interactive Lottie animations from Lottielab. This plugin lets you effortlessly integrate interactive Lottie animations and assign specific animation states directly within Framer.
Link Framer interactions to specific animation states, creating dynamic and engaging user experiences that make your Framer sites stand out. No need to leave Framer or manually re-upload animations. Stay in sync with any changes from your Lottielab animation with just one click, without ever needing to leave Framer.
Search 'Lottielab' on the Framer Marketplace or click here to try it out.
New Release: Blur
Blur is LIVE on Lottielab! ✨
🌌 Add depth, movement and focus to your animations.
🔍 Highlight what matters, soften the rest.
New Release: Drop Shadow
Drop Shadow has officially launched on Lottielab! ✨
🌒 Add depth and dimension to your animations with fully customisable shadow effects.
🌒 Adjust the distance, blur, colour, and direction to create standout designs that pop.
🌒 Animate your shadow effects.
New Release: Export as Telegram Stickers
You can now export your animations from Lottielab directly as Telegram Stickers! Simply click ‘export as telegram sticker’ and download—no extra conversion needed. 🎨✨
New Release: Rename and Search
🔖 Stay in the flow. Rename files without leaving the editor.
🔍 Find the file you need, when you need it.
We’ve added search functionality and in-editor and dashboard file renaming for improved asset discovery. So now, you can rename your assets without interrupting your creative flow and find the files you're looking for by name — keeping your focus where it matters most: designing.
New Release: Blend Modes
You can now stylise your animations on Lottielab with Blending Modes!
Add depth, dimension, and visual flair to your designs. Play with subtle glows, captivating textures and unique color combinations by fine-tuning how layers interact.
Whether you're aiming for delicate shadows or bold overlays, Blend Modes offer endless creative possibilities.
2D/ vector animations can sometimes be perceived as flat. However, leveraging properties like gradients, blend modes, effects and more makes creating natural and fluid designs and motion super easy.
Aug 22, 2024
New Release: Preview Playground.
You can now experience your animations in their final form and test the interactions you've added just like your user would. It’s like having your personal design staging environment!
Playground mirrors your animation's look and feel. Simply click the new ‘preview’ button in the top right corner of the editor to view your finished work and see how the states and events play out.
Invite teammates to test and share feedback, share publicly via link or jump back into the editor without interrupting your creative flow!
New Release: 4K Video export is now LIVE.
🎁 Just launched: 4K Video export is now LIVE on Lottielab!
Whether you’re creating animations for high-definition displays, marketing materials, or just want the crispiest visuals possible, our new 4K export feature has got you covered. 📹
So not only can you export your animations as super optimised Lottie files for your websites and apps, but now, create with no limits with high-res 4K videos for all your content needs! ✨
New Release: Interactivity
✨ Introducing the world's first lottie animation editor.
Design, animate and add interactivity all within Lottielab’s design editor.
💥 Create, animate, add interactions and handoff (or export) all within one design editor.
💥 Add clicks, hovers, scrolls and more, enabling experiences that engage and respond to users.
💥 Import existing lotties, Figma designs and SVGs to bring them to life.
💥 Interactive lotties maintain their signature small file sizes, ensuring smooth performance and fast loading times on any device.
New Release: Text and Kinetic Typography, fixes and improvemnts.
🎁 Just launched: Text and Kinetic Typography is now live on Lottielab!
Create and edit dynamic text animations easily using a wide range of fonts directly in the Lottielab editor.
This update also includes:
🚀 Improved Selection and Permissions: Updated selection logic for stroke joints and caps, and simplified permissions for Livelink with more granular access for viewers.
🗂️ Bulk Actions on Dashboard: Support bulk deleting, exporting multiple files as a zip, opening multiple files simultaneously, and duplicating/moving files across teams and folders.
✨ Smarter Transform Handles: Hide small transform handles to avoid accidental drags.
✨ Design Mode Enhancements: Hide motion paths in design mode and improve trackpad responsiveness for panning and zooming.
New Release: Livelink CDN and more
It's our most exciting release since our Figma plugin, enabling you to ship optimized animations to your websites and apps in only ONE CLICK with Livelink CDN!
🌐 Publish Lottie Animations Instantly: One-click hand-off to production/developers for seamless integration.
⚡ Optimize Lottie Animations: Reduce file sizes by up to 100x, achieving the smallest Lottie files ever.
👥 Collaborative Hosting: Shared source of truth for managing Lottie animations collaboratively.
🌟 Live Updates: Make changes and update asset versions directly from the editor.
This update also includes:
🚀 Lottie to dotLottie Converter: Instantly convert Lottie animations to the dotLottie format for free.
🚀 Telegram Sticker Export: Export animations as Telegram stickers.
Multi-select keyframes, Shape tool, SVG to Lottie converter, and more
Custom easing is now live on Lottielab! 🎢
This release includes a simple but powerful easing panel that allows you to:
⭐ Customise your easing curves to achieve natural motion, anticipation and overshoot!
⭐ Use a range of Lottielab presets, and tweak them to your preference.
⭐ Infinite easing possibilities: Copy easing values from various easing libraries such as Google Material design, Easings(.net) and more.
Lottielab Docs: Paths, gradients, masks and more
We've just launched Lottielab's official Docs! 🎉
Although Lottielab is so easy that you can dive straight in, this documentation goes through the A to Z of the editor to help you create even more compelling animations faster!
From getting started and collaborating with your team, to various tools and advanced properties that speed up your animation workflow.
We're continuously adding more pages, so your feedback is always welcome!
Check it out at docs.lottielab.com.
Improvements and Bug fixes
We've just shipped a ton of quality of life updates to help you speed up your animation workflow!
Copy/ paste layer animations, keyframes and reverse animations
Enabling you to effortlessly create even more precise animations, at scale.
Lets you add more polish to your paths and shapes.
✨ Size badge info on canvas.
✨ Add a mask layers option in the canvas context menu.
🗂️ Team management improvements (Remove users from teams)
🗂️ Dashboard performance improvements and general bug fixes
🐛 Fix layer label not to prevent entering path edit mode.
🐛 Fix shape to canvas distance calculation.
🐛 Fix corner scale handle hitbox .
🐛 Fix on not being able to deselect layers with 0 scale.
🐛 Fix on playhead autoplay.
🐛 Fix line segment bug.
🐛 Preserve non-keyframed trim path end.
🐛 Double transform due to duplicated selected entities on canvas.
🐛 Fix on Figma import, now omits alpha on solid colours.
🐛 Exclude locked layers from canvas interactions.
🐛 Fix size badge visibility when there is no text.
🐛 Fix scrolling to selected layer in the layer panel.
Performance and stability updates
In the past month, we’ve been heads down making a number of major improvements to the editor’s performance and stability. This update provides a smoother editing experience, especially for complex files.
We’ve also extended our tutorials and given them a new home. Check them out to discover various Lottielab features!
Figma to Lottielab Plugin
We’re launching our Figma to Lottie plugin soon. Click ‘Notify me’ on our Product Hunt page to be updated when it goes live!
Improvements and Bug fixes
✨ Remove unnecessary opacity slider in background colour picker.
🐛 Copy and pasting layers in correct order.
🐛 Avoid shape switching crash in path edit mode.
🐛 Fix keyframes not merging.
🐛 Fix for Origin-keyframes being created when grouping.
🐛 Prevent crashing when motion path is deleted.
🐛 Fix glitches when animating the last frame.
🐛 Fix invalid undo state when pasting SVGs.
Here’s our latest update with a number of tiny improvements and fixes, and some exciting upcoming announcements:
Improvements
🚀 Improved stability for Multi-player collaboration and file syncing.
🚀 You can now select deeply nested layers more easily by holding CMD on mac, or CTRL on windows or using the context menu.
🚀 Improved colour batching for gradients.
🚀 Layer selection on the canvas is now more precise, especially for layers with overlapping bounding boxes.
🚀 Number of colours in the file are now displayed.
Bug Fixes
🐛 Fix for the motion path of a layer being displaced once the layer is grouped.
🐛 Upload button for asset import now works as expected.
🐛 Fix for panning to the left triggering ‘back to previous page’ on trackpad.
🐛 Resolved issue on Lottie not showing/playing with older versions of lottie-web.
Our Figma plugin release is around the corner. This will be a game-changer for your Figma to Lottie workflow!
Lottielab beta went live just under a month ago. Firstly, we’d like to thank you for your support and feedback during our launch!
Now for some updates, check them out below or login to start playing with new features:
Edit motion path curves more precisely with draggable tangent handles.
You can now drag and drop your files from your drafts or a folder to another team or folder.
Easily scale your layers with the the scale tool in the toolbar to edit the scale property.
Lottie animations on our examples page can now be imported and edited.
Lottielab is the
‘Design tool of the month’
We were Product Hunt’s Product of the week and Design tool of the Month. Thank you for you support!