Wix Editor: Importing Lottie Animations to Your Site
3 min read
Lottie animations are high-quality animated files you can add to your site. By importing the animation directly from your LottieFiles account, you can create unique, lively pages without needing to add any code.
Before you begin:
In order to import an animation, you need have a LottieFiles account.
Step 1 | Add a Lottie Animation
Get started by adding the Lottie Animation element to your site from the Add Elements panel.
To add a Lottie Animation to your site:
- Click Add Elements
on the left side of the Editor.
- Select Embed Code.
- Scroll down to Animation.
- Click Lottie to add it to your site.
Step 2 | Copy the animation URL
After saving an animation to your workspace in LottieFiles, you can copy the URL and paste it directly. Choose from your own design, or import one of the hundreds of free-to-use animations available on LottieFiles.com.
To retrieve and copy the animation's URL:
- Log in to your LottieFiles account.
- Select your chosen animation.
- Click Save to workspace to generate.
- Click the Copy icon under Asset link.
Did you know?
Lottie animations are Vector files, so they retain their quality on both your desktop and mobile site.
Step 3 | Import the file to your Wix site
Once you've copied the animation's URL, paste it in the element on your Wix site to create a fun, unique experience for your visitors.
To import the file to your site:
- Select the Lottie Animation element in your Editor.
- Click the Settings icon
.
- Paste the URL into the field under What's the animation's URL?.
- Press Enter on your keyboard.
What's next?
- Click Preview animation on the top of the panel to see how the animation plays.
- Use the settings to adjust how the animation plays. Learn more about adjusting your Lottie animation
You should know:
Lottie animations are automatically converted to JSON files when you import them to a Wix site. For technical reasons, not all of the file fields can be contained. Lottie animations may therefore look slightly different on a live Wix site (e.g. displaying a reduced range / amount of motion).
Did this help?
|