Creating Video-Based Lottie Files For WordPress and Elementor Websites
This tutorial will teach you how to create video-based Lottie animations for use in your WordPress and Elementor websites.
Trimming Your Video Clip
Open the file in Premier or any movie editor and clip the video down between 2-4 seconds. You can also speed it up a little if needed since the speed of a Lottie can be controlled in the end. Get the movie down to 480px at this time to make smaller files.
Creating An Image Sequence
To animate a video as a Lottie, we need to first change it to an image sequence. We need to turn that into images very similar to making a GIF. Use Adobe Media Encoder and tell it to export all frames as JPG. Set the quality levels down to about 30% or as low as you can tolerate. You may also adjust the framrate down to as low as 15fps. We need to get these file sizes down. The final images in this example are 11k each. Lottie will add the files back together in the assets so the only way to reduce Lottie output is to shrink anything before it gets moved to Ae. Render the movie to a new folder. Depending on your clip, it will generate a bunch of images in that folder.
Import The Image Frames To After Effects
Now open After Effects. Start a new project and open your new images folder. Drag all the selected images to your project folder. While the images are still all highlighted, right-click and create a new composition.
Setting The Time Frames
On the next screen box, set the image time at 1 frame per image. This will put all the frames back together as the movie at one image per frame.
Testing The Animation
We now have the animation ready. You can click the spacebar to see the animation.
Export As JSON Using BodyMovin Extension
Export the JSON using BodyMovin extension. Make sure to include all the asset files images to the JSON in the settings. This will now render as the final Lottie. Depending on your computer and RAM, it will take 30 seconds to a few minutes. The final file size of this demo is 1MB. Ideally, this needs to go down a bit more to make for a fast site.
Upload Lottie To Elementor Widget
Upload to your Lottie Widget and enjoy it. Do not try to put more than one on a page, use wisely, and where it will make the most impact for your visitors.
