Using the Lottie module Semplice 5+

  • Written
  • Updated

For those not familiar, Lottie is a powerful web tool library that allows animations created in After Effects to easily be exported to and rendered on the web. You can now export these animations right from After Effects directly into Semplice.

An example of a Lottie animation:

 

The primary benefits of using Lottie over traditional animation methods such as video or GIF:

  1. Renders animations perfectly and smoothly on both desktop and mobile devices
  2. Higher quality than traditional video, at a significantly lower filesize and higher framerate
  3. More control over how the animation is played, such as animation playthrough on scroll
  4. Wider browser support than traditional web video

We'll start with how to export your animations from After Effects into Semplice. Then we'll get into all the ways to experiment with your animation in combination with Semplice's built-in animation features.

Adding your After Effects animation to the Semplice Lottie module

Install the Bodymovin plugin

To get started, you will need the Bodymovin plugin (you can download it here) in order to export your animations from After Effects to Lottie. 

bodymovin_install.png

 

You can create animations as you normally would in After Effects. We recommend you read the Lottie documentation to know best practices for when creating animations to be used with Lottie. 

Exporting the animation

To export your animation, you will need to go to the export options of After Effects under Windows > Extensions and select Bodymovin. You will then need to select the composition to be exported, as well as the export directory. 

bodymovin_export.png

IMPORTANT:   if you plan on including raster images in your animation, be sure to select "embed images in JSON" under the image options, otherwise your raster images will not show in the animation and will display as missing. We also recommend compressing your images in the options.

bodymovin_json_export.png

With your export directory and composition set, you can now click the Render button to render the animation. The animation will then be exported as a JSON file, which is what Semplice requires.

Uploading and displaying the animation

With your animation exported, you can now upload the JSON file into Semplice in the Lottie module options. Once the JSON file is uploaded, you can now set parameters for your animation such as the duration, width of the animation, or the animation trigger type.

add_json.gif

Preview the animation

To preview the animation right in the Semplice editor, you can click the "Preview All" button in the top right corner.

preview_lottie.gif

And that's it! It's that simple to bring high-quality, lossless and mobile-supported animations right into Semplice.

Next step: Experiment! 

Now that you know how to use the Lottie module, you can experiment with all kinds of effects on your page.

Create a scroll-based Lottie animation

You can have your animation play through based on your scroll position. Just set the trigger type to scroll, and then you can customize the scroll position and duration. 

scrolling-lottie.gif

Creating an image sequence

You can also create an animation comprised of a sequence of image frames.

image-sequence.gif

To do so, have all of your image frames in a folder with their filenames named according to the order of the frames.

Next, open up After Effects and go to File > Import and select all of the frames you want to include in your sequence. Be sure to check "Create as Composition" and uncheck "Import JPEGSequence" in the import options.

In the New Composition From Selection options, make sure "Single Composition" is selected along with "Sequence Layers". Make sure "Overlap" is not selected.

creating-sequence-animation.gif

Pro Tip:

You can export any video as a sequence of frames in Photoshop by going to File > Export > Render Video and setting "Adobe Media Encoder" to "Photoshop Image Sequence." You can designate a lower framerate to save on filesize. 

Combining effects

You can combine your Lottie animation with Semplice's custom animations. Just select the COLUMN or SECTION your Lottie module is located in and apply effects as needed.

 

Troubleshooting

My animation is missing images

You need to include any raster images into the single JSON export file. To do so, select "include images in JSON" in the image export options

I do not see the Lottie module

  1. Be sure you have Semplice 5 and your theme is updated to at least 5.2.1.
  2. Ensure that the "Scroll Reveal" feature is DISABLED in the Look & Feel options. Otherwise, Lottie animations will not show.
  3. Check that your Lottie JSON file is not too large. If the file is too large, it may take a long time to load on the page.

My Lottie animation is not displayed as expected

Be sure to read the Lottie/Bodymovin documentation as well as help forums to learn more about common issues when exporting Lottie.

Related articles