Ever wondered how Twitch streamers – or your tech-savvy colleague on Google Meet – add animations to their video broadcasts?
Animated overlays are easy to create, especially when you’re working with Lotties. Today, we’re going to show you how to import Lottie animations into OBS so you can create your own animated overlays.
So, are you ready? Let’s get into it!
Watch the video: Adding Lottie animations in OBS
Prefer to learn by watching instead? No worries, we got you. In our video tutorial below, Dan from LottieFiles will take you through how to add Lottie animations in OBS. You can also follow along with these exercise files.
1. Get OBS
The OBS Studio (formerly Open Broadcaster Software) - or more commonly known as OBS - is a free and open-source software for recording video and live streaming. It works with Windows, Mac OS and Linux. What’s powerful about OBS is that you can add tons of audio and graphical elements to your video broadcast.
If you don’t already have OBS installed, head to the OBS homepage, download the right version for your computer, then install the program.
2. Add a video source
The first thing we need to do is to add a video source. In OBS, you can add a source by clicking the + icon.
Then click on “Video Capture Device”.
OBS will prompt you to name the source. You can give it any name you want. For example, in our case, we’re using a Blackmagic device, so we’ll name it 'Blackmagic'.
OBS will prompt you to choose a device. Here, you can choose the video device you’ll be using (for example, your webcam).
You should see a video preview appear. If you’re happy with the quality presets, you can hit ‘OK’ to confirm.
3. Search for a Lottie animation
Next, search the LottieFiles library for an animation you want to import into OBS.
In this example, we’re going to insert an animated LottieFiles logo, but you can choose anything you want. Once you’ve found the right animation, click on the “iFrame code” tab and copy the code.
4. Add a browser source in OBS
Head back to OBS and add another source by clicking the + icon. This time, choose ‘Browser’ as a source.
Again, you can name the source whatever you like. In our example, we’ll name it “LottieFiles logo”.
5. Insert the Lottie embed URL
Paste the iFrame code that you copied into the URL field. But here’s the key part – instead of pasting the entire code like this:
<iframe src="https://embed.lottiefiles.com/animation/64463"></iframe>Just paste the embed URL like so:
https://embed.lottiefiles.com/animation/64463Press ‘OK’ to confirm.
And there you have it! Your Lottie animation should appear. Move it by dragging it around, or resize it by clicking and dragging its corners.
6. Experiment with multiple Lottie animations
You don’t have to restrict yourself to one animation – add as many as you’d like by repeating steps 3 to 5. For example, if you’re broadcasting a live YouTube stream, you could also add a “live recording” animation or an animated subscribe button.
7. Show off your Lottie animations
Once you’re ready to broadcast to the world, click “Start Virtual Camera” on the bottom right of the OBS screen.
You should now be able to broadcast on any streaming platform, such as Zoom or Google Meet. Pro tip: don’t worry if your video appears flipped on Google Meet! Your viewers will be able to see an unmirrored version of your video.
Remember: OBS sources work like layers
Just like Adobe Photoshop or Figma, the sources in OBS work like layers. This means that if you place a video source on top of the animations, your animations will be hidden.
So if you’ve just imported a Lottie animation into OBS, but can’t figure out why it’s not appearing, try dragging your video source layer to the bottom.
And there you have it – everything you need to know to add your Lottie animation in OBS! Want to learn more? Level up your motion and design skills by checking out our blog and courses for more tutorials!
