Here, I introduce how to add the loop animation created in After Effects into Wix Studio using the Bodymovin plugin and LottieFiles.
What is LottieFIilles?
LottieFiles is an open-source animation file format developed by Airbnb. According to their official website, it offers remarkable lightness, being 600% smaller in file size than GIFs and loading approximately five times faster on web pages!
With the free plan, you can save up to 10 files to your dashboard and export animations.
If you're looking to incorporate small motion graphic designs or loop animations into your website, it's definitely a file format worth leveraging.
1.Install the Bodymovin plugin to After Effects
First, install the Bodymovin plugin in After Effects.
This plugin acts as a bridge between After Effects and LottieFiles.
It's available for purchase at $20 on aescripts, but it's also available directly through Adobe's applications!
You can install it for free from there.
The reviews on Adobe's side are rated at ★3.3, which is a bit low, and there are comments about it not working well...but so far, I haven't had any issues using it.
2.Making animation in AfterEffects
Next, create the animation whatever you like in After Effects.
This time, I made a simple loop animation like the below:
3.Exporting a JSON file for LottieFiles from After Effects using the Bodymovin plugin
Once you have set up your beautiful animation, export the JSON file using Bodymovin.
When you select the composition you want to export, a green circle will appear. Choose the Destination Folder and simply click the Render button.
In a few seconds, the JSON file will be exported!
※By the way, pressing the Preview button didn't display the preview correctly. It may be a bug?
4.Load the exported JSON file in LottieFiles to add the animation link for Wix Studio
Go to the LottieFiles dashboard and upload the JSON file you exported earlier using the "Upload Animation" button at the top right.
Once the upload is complete, it will automatically redirect you to the editing screen.
On LottieFiles' browser interface, you can adjust loop settings, change the animation speed, and modify colors from any color palette as desired. This is the fantastic features on Lottie!
However, since there's no need to adjust the speed or change colors this time, as I've set it to loop using keyframes in After Effects, all that's left is to export it.
Although the export option can be a bit tricky to find, you can export the necessary asset link from:
Share > Handoff & Embed
This time, I exported it in the Optimized Lottie JSON format for lighter data.
There was also a format called dotLottie, but it didn't load well in Wix Studio, so I opted for the JSON format.
5.Adding the Lottie asset link into Wix Studio
Finally, add the Lottie link in Wix Studio.
Select Embed Code > Lottie
Add it to your website and paste the asset link URL generated earlier into the Animation URL field.
I also referred to the official Wix Studio official help page.
One thing to note is that some effects like transparency or drop shadows may not convert perfectly from After Effects to Lottie, so moving forward, I'll explore what can be implemented and what may not work as smoothly, aiming to master it effectively.
Hope this helps someone:)
Comments