Design in Motion

Blog

Team insights and updates on anything and everything about Lottie from the Lottielab team.

Fable Alternatives | Online Animation Tools

Alternatives to Fable.app. A list of animation tools for creating lottie and mp4 files.

Lottielab vs LottieFiles: Which Animation Tool is Best for Your Needs?

While Lottielab and LottieFiles both cater to designers working with Lottie animations, Lottielab has emerged as a game-changer, offering a more intuitive, powerful, and designer-friendly experience. Our tool is perfect for teams who value collaboration, real-time feedback, and getting things done efficiently. 

Building Design Systems with Lottielab: A Tide Business Case Study
Building Design Systems with Lottielab: A Tide Business Case Study
Building Design Systems with Lottielab: A Tide Business Case Study
Building Design Systems with Lottielab: A Tide Business Case Study

Building Design Systems with Lottielab: A Tide Business Case Study

This case study highlights how Lottielab’s seamless integration with tools like Figma and After Effects, along with its intuitive UI and thriving community, transformed Tide's approach to animation and design systems. Learn how Lottielab streamlined workflows, enhanced efficiency, and empowered every designer at Tide Business.

Introducing the World's First Interactive Lottie Editor

Design, animate, and add interactivity directly in one design editor. Engage your audience with animations that respond to clicks, hovers and more.

Livelink CDN - how we serve Lottie animations to millions of users monthly
Livelink CDN - how we serve Lottie animations to millions of users monthly
Livelink CDN - how we serve Lottie animations to millions of users monthly
Livelink CDN - how we serve Lottie animations to millions of users monthly

Livelink CDN, how we serve Lottie animations to millions of users monthly

Lottielab's Livelink helps you ship animations faster, optimize file sizes, and update them live with one-click publishing.

How We Make Lotties 10x Smaller

A technical deep dive on the technology powering Livelink, Lottielab's Lottie optimization and hosting tech.

The State of Lottie in 2024: Powering a New Era of Web & App Animations
The State of Lottie in 2024: Powering a New Era of Web & App Animations
The State of Lottie in 2024: Powering a New Era of Web & App Animations
The State of Lottie in 2024: Powering a New Era of Web & App Animations

The State of Lottie in 2024: Powering a New Era of Web & App Animations

A Deep Dive into GIFs

A comprehensive guide to GIFs for product designers and developers. Understand how GIFs work, explore their use cases for UX, prototyping, and marketing. Learn about Lottie animations as a potential alternative.

How to Create Lottie Animations on Figma?

Here is how you can create lightweight, interactive animations directly within Figma.

Beyond the Name: What is Lottie Short For?

Confused by "Lottie"? It's not an abbreviation! Discover what Lottie is and how it empowers designers and developers to create stunning, lightweight animations for mobile apps, web, and more.

What Does Lottie Mean? A Guide to Understanding Lottie

What exactly is Lottie and why it's the secret weapon of designers and developers for creating lightweight, captivating animations that enhance user experiences

Design in Motion: Lottielab's Motion Design Tutorial Series

Dive into the world of motion with Lottielab, where we believe that motion is the heartbeat of design. It's not just about creating movement; it's about crafting experiences that resonate, compel, and transform.

Lottie is now a part of the Linux Foundation

Announcing a new committee under Linux Joint Development Foundation to develop Lottie as a web standard and open community project.

OpenAI uses Lottielab for delightful micro-animations on the ChatGPT app

OpenAI uses Lottielab to delight 100s of millions of users with Micro-animations in their latest ChatGPT update

"Reveal" the Magic: What's Behind the Parameters on Reveal Path?

The Reveal Path feature is commonly used in shape layers to create dynamic animations by revealing or hiding portions of a shape over time. Let's break down the key parameters associated with Trim Paths: Start, End, and Offset.

Lottielab to Canva - Canva now supports Lottie imports!

Amazing news! Canva now supports Lottie imports natively. This means you can now export your Lottielab animations and import them as Lottie to Canva, for all your Canva usecases from social media posts to presentations and more.

Lottielab - An easier alternative to After Effects for 2D animations and Lotties

Tired of figuring out complex animation tools like After Effects and want a much easier alternative? Lottielab is built from the ground up to be the easiest and fastest way to create animations for websites and apps. Here are 7 ways Lottielab makes animating easy and fun: Skip starting from scratch: With millions of Lottie animations and templates out there to get you started, Lottielab offers the most complete Lottie import workflow in an animation tool, and an easy way to copy your designs over from Figma as SVG, getting you as close as possible to the finish line! Design mode vs Animate mode: Lottielab makes switching between designing and animating your asset seamless. Simply press ‘A’ on your keyboard or use the toggle at the top of the editor. Auto-animate by default: Once in animate mode, drag your shape or edit any property, and boom, you’ve created your first animation in a couple of clicks. Lottielab saves you the stress of finding obscure diamond icons to set keyframes, or remembering which properties you set them for, so you can be free to be creative. Motion path and onion skin: Once you drag your shape/ animate its position, Lottielab gives you immediate feedback of this change and the trajectory of your shape with motion path and onion skin. You can also curve the motion path to achieve some slick movements in seconds. Easing is eas-y!: Easing allows you to adjust how your animation transitions between keyframes, and Lottielab provides the easiest interface for this. Simply click on the transition(s) between your keyframes or on your motion path to add some cool easing presets. PS: Custom easing is coming very soon! Keyframe thumbnails/ preview: Keyframe thumbnails lets you easily discover changes across your animation with a quick glance, and is an easy way to visualise how keyframes work. And if you need more precision, you can easily hide it by pressing ‘T’. Export, Hand-off and managing your files is a breeze: Done with your animation? Sharing your file with your team is just a step away. Click share to invite your team to collaborate or provide feedback, or export your animation to Lottie, MP4 or Gif! There are many more features in Lottielab that really simplify the animation process, whilst keeping a high ceiling for what’s possible. Check out Lottielab.com to experience the joy of animating!Tweet | LinkedIn Post

Bring your products to life

Bring your products to life

Bring your products to life

Bring your products to life

Get started for free

Get started for free