2. Lottie vs GIF: Which one is better?
You might still be wondering why you should switch to Lotties, especially since GIFs are already so easy to use (plus they’ve been around forever). So let’s look at Lottie vs. GIF and break it all down:
- Smaller file size: While GIFs can be huge and slow to load, Lottie animations are tiny and load instantly.
- Scales perfectly: GIFs get blurry when resized, compared to Lottie files that stay crisp at any size.
- Smoother performance: Lottie animations play seamlessly, but GIFs can lag or stutter.
- Interactive: Lottie can react to clicks, scrolls, or hovers, while GIFs just loop endlessly.
- Supports transparency: Lottie files work with transparent backgrounds, while GIFs often need a solid background.
When using GIFs still makes sense
So now that we’ve compared Lottie vs. GIF, there must be times when GIFs have the advantage. Well, GIFs are great for quick social media posts, reaction memes, and short looping animations where file size and interactivity don’t really matter. And you can learn to make creative GIF animations in After Effects as well.
What about converting a Lottie to GIF?
Now that we’ve established when to use GIFs and compared Lottie vs. GIF, you might be wondering, “Is there ever a time when converting a Lottie to a GIF makes sense?” While Lottie is the better choice for most situations, there are a few cases where a GIF is actually the more practical option. Let’s take a look at a few times where converting a Lottie to a GIF is a good idea:
- Sharing on social media: Platforms like Instagram, Twitter, and Facebook don’t support Lottie files. If you want to share an animation as a post, a GIF is the easiest format to use.
- Sending animations in chat apps (like Slack & WhatsApp): Most messaging apps don’t support Lottie, but they do support GIFs. If you want to send a quick animated reaction or a fun UI mockup, a GIF works better.
- Using animations in email marketing: Lottie animations remain unsupported by most email clients, whereas GIFs are supported. So converting Lottie to GIF can be a good workaround.
- Embedding animations in PowerPoint or Keynote: There is no support for Lottie files in presentation software. So using GIFs is one of the only ways to add animations to your slides.
How to convert Lottie to GIF
If you ever need to convert a Lottie animation into a GIF, you can use:
- LottieFiles Converter: Upload your Lottie and download it as a GIF.
- After Effects: Export the Lottie animation as a video, and then convert it to a GIF in Photoshop.
3. Why are Lotties used?
Nowadays you’ll see Lottie animations everywhere, from the Duolingo app’s fun animations to smartwatch interfaces, and even messaging apps like Telegram.
Animations can be added to projects in so many ways, but Lotties are definitely my favourite. Here’s a quick look at some of the main reasons why they work so well:
- They’re super lightweight and fast: Lotties are tiny in file size but still high quality. Whether it’s a small button animation or a full-screen effect, it stays smooth and fast.
- They scale without losing quality: Since they’re vector-based, they stay crisp no matter how big or small you make them. Whether it’s a tiny loading icon or a full-screen background animation, it always looks sharp.
- They work anywhere: Examples include websites, apps, and even UIs for games. Lotties are supported by major platforms like iOS, Android, and React, so you can create an animation once and use it in different projects. This means you don’t need to export tons of different file types.
- They are interactive: You can trigger cool animations for your mouse clicks, hovers, or scroll actions. Popular examples include a button that gently pulses when you hover over it, or an animation that plays when a user completes an action. It’s such a simple way to add character and personality to a design.
- They make UI design feel alive: A static website can be boring. By adding subtle Lottie animations, such as a floating icon or a pulsing button, you can make it feel so much better, enhancing the user experience.
4. How to use Lottie files
Lottie animations are everywhere, so you’ve probably seen them without even realizing it! They pop up in apps, websites, digital ads, and even games, making interfaces feel smooth and engaging. Here are some of the best ways to use Lottie files:
UI animations
I love it when an app or website feels good to use. Lottie animations help with that by adding subtle motion to things such as:
- Loading animations
- Button effects
- Menu transitions
- Success messages
Websites
Static websites are fine, but animated websites are unforgettable. Lottie files help designers add movement without making pages heavy or slow. Some great examples include:
- Hero sections: A stylish animated intro grabs attention right away.
- Illustrations that move: Backgrounds, icons, or page elements with subtle motion.
- Scroll-based animations: Elements that fade in, move, or change as you scroll.
Mobile apps
Ever used an app that just feels better than the rest? That’s probably because of great micro-animations. Lottie is huge in mobile apps, especially for:
- Onboarding screens: Animated walkthroughs that make learning the app a bit more fun.
- E-commerce interactions: Like adding items to a cart with a smooth animation.
- Notifications: Instead of just a boring popup, you get a cool animated alert.
Game UI and HUD elements
Lottie isn’t just for websites and apps—it’s also a great tool for game UI animations. For game developers, Lottie is a lightweight way to add motion without overloading the game engine. Examples of this include things like:
- HUD elements: Animated health bars, experience meters, and ability cooldowns.
- Achievement popups: A slick animation when you unlock something.
- Menu transitions: Smooth scrolling and expanding menus.
5. What software is used to create Lottie animations?
The best part about Lottie animations is that you don’t need a complicated setup to create them. There’s a tool out there for every kind of workflow, whether you’re an industry professional or just a beginner looking to have some fun. So let’s check out some of the best ways to make them.
Adobe After Effects + Bodymovin
If you want full creative control, Adobe After Effects is the tool to use for Lottie animations. However, you will need to install the Bodymovin plugin. It’s what most professionals will likely use because it allows for:
- Advanced animations: Smooth motion, complex transitions, and detailed effects.
- Layer-based editing: Perfect for working with vector shapes and keyframes.
- Exporting as Lottie files: Using the free Bodymovin plugin, you can export animations as JSON files for Lottie.
Why I love it: It gives you complete freedom to create anything you can imagine. The only downside? There’s a bit of a learning curve if you’re new to motion graphics.
LottieFiles Creator
If you want a beginner-friendly option, LottieFiles Creator is the way to go. It’s an online tool that lets you edit existing Lottie animations or create simple ones from scratch without installing any software.
- No need to install an app (like After Effects)
- Works right in your browser
- Perfect for tweaking animations quickly
Why I love it: It’s really easy to use! You can just upload an existing Lottie file, tweak colors, speed, or layers, and export it. Great if you just need quick edits without diving into complex software.
Figma + Lottie Plugin
If you already use Figma for UI/UX design, you’ll love the LottieFiles plugin. It lets you import, preview, and tweak Lottie animations directly inside Figma, which helps smooth out your workflow.
- Great for UI motion design: Such as animated icons, buttons, and loaders.
- Works with design systems: Keep animations consistent with your branding.
- Fast and lightweight: No heavy software needed.
Why I love it: If you’re designing for the web or apps, this is the easiest way to integrate Lottie into your workflow.
Haiku Animator
Haiku is a great option for creating Lottie animations without needing After Effects. It lets you create them directly within a design tool, making the process smoother and more intuitive.
- Designed for developers and designers
- Exports straight to Lottie (JSON)
- Works with React, iOS, and Android
Why I love it: If you’re working on app animations and want something more lightweight than After Effects, Haiku is worth checking out.
Jitter
Jitter is another easy, beginner-friendly, browser-based tool that lets you create motion graphics. It’s not as powerful as After Effects, but if you just need simple text or UI animations, it’s a great option.
- Drag-and-drop interface
- Perfect for social media animations
- Can export as Lottie files
Why I love it: If you don’t want to spend hours learning animation software, Jitter makes it fast and fun!
So which software should you use?
- Want full creative freedom: After Effects + Bodymovin
- Need a quick browser-based tool: LottieFiles Editor
- Work in UI/UX design: Figma + Lottie Plugin
- Creating app animations: Haiku Animator
- Need fast, simple motion graphics: Jitter
6. How to create a Lottiefiles animation
Step 1: Open LottieFiles Editor
Go to LottieFiles Creator (you’ll need to sign in or create a free account). Click Create Animation or select an existing template to edit.
Step 2: Add a star shape
In the editor, click the Shape Tools dropdown box and choose the Star shape. Resize the star to your liking by dragging the corners to make it bigger or smaller, and place it in the middle of your canvas.
Step 3: Adjust the color
In the Property panel, go down to the Appearance section where you can change/adjust the color and even the fill opacity.
Step 4: Animate the star shape
Animating in Lottie Creator is simple. Just add a keyframe to the scene from the Property panel (here we’ll use the scale transform as an example). Move forward in the timeline, adjust the scale values, and add more keyframes along the way (make sure you use constrain proportions).
- Start with a scale value at 0%.
- Move forward in the timeline and change the value to 125%.
- Move forward in the timeline and change the value to 110%.
- Move forward in the timeline and change the value to 120%.
- Move forward in the timeline and change the value to 100%.
Press Spacebar to preview your animation, and move the keyframes along the timeline to adjust.
Step 5: Add easing
Select all the keyframes and then select Smooth for both in and out to ease the keyframes.
Step 6: Animate the sparkle animation
Now create a smaller star with a lighter color and place it on top of the main star shape. Create a keyframe for the scale and rotation (make sure that these keyframes are placed after the animation of the larger star is complete).
- Start with a scale value at 0% and a rotation value at 0°.
- Move forward in the timeline and change the value to 100%.
- Move forward in the timeline and change the scale value to 0% and the rotation value to 180°.
Step 7: Duplicate the sparkle animation
Press Control-D to duplicate the sparkle star animation and place it on other areas around the main star. You could also stagger the animation on the timeline to make the sparkle animation more interesting.
Step 8: Adjust keyframes if needed
If you find that the animation is not working as you like (or if it’s too slow/fast), feel free to move the keyframes along the timeline to adjust the timing and the look and feel of the Lottie animation. If you bring the keyframes closer together, the animation will appear faster. If you spread them further apart, the animation will appear slower.
Step 9: Create a shrinking animation
Go back and select the main star, and move forward in the timeline just after the sparkle animations with the small stars are finished. Create a new keyframe for the scale (making sure it’s still set at 100%), and then move forward in the timeline again. Make a new keyframe in this position and set the scale to 0%. This will create a nice looping animation as the star appears and disappears every few seconds. Also, remember to select and ease the keyframes as we did previously.
Step 10: Export your Lottiefiles animation
Click the Export button located on the top right.
This will take you to a new window where you can choose to download a selection of different formats. Choose the recommended Optimized dotLottie or Optimized Lottie JSON for the best results for your Lottiefiles animation.
Once you’ve downloaded your Lottie animation, you can then use it for your projects!
Create more detailed Lottie animations
Making simple animations like these is a great way to get started. If you’re looking to create more detailed custom Lottie animations using Lottiefiles, check out this awesome video for a step-by-step guide on how to do that:
7. Where to find Lottie animations
So that’s how to make a Lottie animation! But if you need Lottie animation examples right now, these are the best places you can find them:
Envato (unlimited downloads for a single fee)
Envato is one of the biggest digital asset libraries out there, and their Lottie animation collection is huge! A subscription will give you unlimited access to Lottie animations, stock videos, fonts, templates, and more. If you need a variety of digital assets regularly, this is the place to be!
- Unlimited downloads with a subscription
- Thousands of premium Lottie animations
- Perfect for websites, apps, marketing, and presentations
- Comes with additional assets like UI kits, templates, and motion graphics
LottieFiles (the best all-in-one platform)
LottieFiles is one of the best places to find, download, and customize Lottie animations. If you need something quick, just search their free animations, and you can even tweak them in the LottieFiles Editor!
- Thousands of free & premium animations
- Easy customization tools (change colors, speed, loop settings, etc.)
- Direct integrations with Figma, Adobe, and more
Icons8 Lottie (high-quality animated icons)
Icons8 is another great source, especially if you need animated icons for UI/UX design.
- Perfect for websites, apps, and digital products
- Sleek, modern designs
8. Best practices for creating Lottie animations
Keep it lightweight
One of the biggest advantages of Lottie is its small file size, but that only works if you optimize your animations.
- Stick to vector shapes (avoid raster images like PNGs or JPEGs).
- Use fewer layers (complex animations with too many objects can get heavy).
- Don’t go overboard with effects (some After Effects effects aren’t supported in Lottie).
Pro Tip: Before exporting, optimize your file using the LottieFiles Optimizer to reduce file size without losing quality.
Use supported After Effects features
Not every effect in After Effects translates well to Lottie. To avoid issues:
- Use shape layers instead of imported images (vectors scale better).
- Stick to simple animations (position, scale, rotation, opacity).
- Avoid 3D layers, masks, and certain blurs (Lottie doesn’t always support them).
Pro Tip: Check the Bodymovin plugin preview before exporting. This will tell you if any part of your animation won’t work in Lottie.
Always test before going live
Nothing’s worse than an animation that looks great in the app but breaks online. Before finalizing:
- Upload and preview your Lottie animation on LottieFiles.com.
- Test it in web, mobile, and app environments to make sure it works smoothly.
- If something looks off, tweak and export again until it’s perfect.
Conclusion
So now you know what a Lottie file is, as well as how to create and use it! Lottie animations make it easy to add smooth, high-quality animations without slowing anything down. No more clunky GIFs or heavy video files—just clean, scalable animations that work everywhere. Whether it’s a fun button effect, a slick loading screen, or a tiny detail that makes an app feel polished, Lottie just does it better.
If you’re new to Lottie, now’s the perfect time to jump in and play around. Browse and download animations on LottieFiles or Envato, tweak them in the Lottie Editor, or try making your own. It’s seriously one of the best ways to bring your designs to life. And once you start using it, you won’t want to stop!