🌈 How to Use Lottiefiles in Zuuvi
🌈 How to Use Lottiefiles in Zuuvi
Add smooth animations to your designs with lightweight Lottie magic
Want to bring your brand to life in a stylish way? Lottiefiles are perfect when your brand guidelines include specific animated elements - like a logo that spins, pulses, or draws itself. You can create those animations as Lottiefiles and add them directly into your Zuuvi banners for a professional, on-brand look that doesn’t weigh down your file size.
Let’s Get Started
Zuuvi supports Lottie files – a format perfect for adding sleek and lightweight animations to your banners. Here’s how you can use them inside Zuuvi:
🪄 Step-by-Step Guide
Export from Lottiefiles
Once your animation is ready, export it as a “Lottie JSON” file from the Lottiefiles platform.
Upload to Zuuvi
Drag and drop the Lottie JSON file directly onto your canvas
OR go to your Asset Library and upload it from there
Once uploaded, you’ll find your Lottiefiles under the “Videos” tab in the asset bank (yes, even though they’re not technically videos 😉)
What if it looks invisible? 👻
If the first frame of your animation is transparent, the file will appear invisible in your canvas preview
Just hit play, and your animation will come to life
Heads up on file size ⚖️
Lottie files are usually tiny, but to run them, Zuuvi loads a Lottie script (approx. 54 KB)
So, make sure to count the script weight + animation weight when considering file size limits
Uploading Transparent Videos
Uploading Transparent Videos
How to add transparent videos to ads that work in Safari and Chrome. This guide covers uploading, key tips, and verifying functionality.
Adding transparent videos to your ad? Zuuvi supports both WEBM and MOV file types, so your video plays beautifully in Chrome and Safari.
This guide walks you through how to upload the right formats, what to be careful of, and how to check everything works.
No stress - even your little cousin could follow this. 💃
Step-by-Step: Upload Transparent Videos
1. Drag & drop your WEBM or MOV file
As soon as you do this, the pop-up window below appears with two upload boxes.
One box is for WEBM (Chrome), and one is for MOV (Safari).
2. Upload matching files
If your video has transparent elements, upload both MOV and WEBM files.
You’ll need to match them up in the pop-up window. When it’s green, it’s a match.
Zuuvi checks based on video length and dimensions.
When both files match, the Upload button turns blue. Click it!
3. Multiple video matches?
Once one matched pair is uploaded, it disappears from the screen.
Got more? Just keep matching and uploading one by one.
Done? Click ❌ and find your uploads under Assets.
Important Notes & Tips
☝ Only uploading a WEBM file?
Make sure your video doesn’t contain transparency.
Why? Safari doesn’t support transparency in WEBM. Transparent areas will show up as black 🫣
Test your video here: 🔗 Transparent Video Tester
Tip - Use Rotato’s Converter Tool on Mac to compress MOVs and generate WEBM versions easily.
💾 MOV files are heavier
Safari might block your ads if the MOV videos included are heavier than 3.5 MB.
Compress as much as you can before uploading.
On a Mac, you can use Rotato Converter Tool to:
Compress your MOV
Generate your WEBM
On PC? This tool doesn’t work, so you’ll need an alternative.
After Uploading
If your video starts with transparency, it may be invisible on canvas at first.
Just hit play to see the magic happen! 🪄
See weight and file info:
Click the video on the layer or canvas.
In the top-right corner, you’ll see the file type + weight.
Uploaded both? You’ll see MOV + WEBM info.
Uploaded only one? Only that file’s info is shown.