Articles in this section

See more

Adding an animated JSON logo to your site

  • Updated

We do not provide support for hacks, so use them at your own risk. If you're not comfortable with coding, we recommend against using this workaround.

To export your animated logo, we recommend using the Bodymovin plugin. Bodymovin is an After Effects extension that allows you to export animations to HTML. You can install the plugin from here. 

To add your animated JSON logo to your site, follow these instructions:

1. Go to "Settings" > "General" > "HTML Head" and add the following code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.3/lottie.js"></script>

 

2. Now go to "Customize" > "Navigations". Open your navigation and Select "Image" for the logo type. Click "SVG Code" and add the following code:

<div id="logo-bm"></div>

 

3. Next, go to "Customize" > "Advanced" > "Custom Javascript" and paste the following JS code:

var logoSvgData = 
  // Paste Your JSON Bodymovin Code Here
;

const animation = bodymovin.loadAnimation({
  container: document.getElementById('logo-bm'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  animationData: logoSvgData
})

 

4. Paste the JSON code outputted by AE Bodymovin plugin between the brackets as indicated in the code below. 

5.  Finally, add this code to "Customize" > "Advanced Styling" > "Custom CSS" (Global). Replace the "width" with the desired width of your logotype:

#logo-bm {
  width: 100px;
  height: auto;
}

 

Troubleshooting

The animation doesn't work when you navigate from another page

This can happen if you have Single App mode enabled under Semplice > Settings. Because Single App mode is a seamless site experience, scripts will not be loaded with every page load if placed globally.

To ensure scripts fire on each page load with Single App mode enabled, place your scripts in a Code module. You can place these Code modules in a global footer if you want the scripts to load on every page.

Related articles