How do I add a Lottie animation to my Rocketspark website?

Lottie is an open-source animation file format that's small in size, high quality, interactive, and can be manipulated at runtime. It's easy to add a Lottie file to your Rocketspark website that will make the browsing experience much more fun.

It's recommended to create animations and vector graphics using LottieFiles, a platform created by the Airbnb design team as a faster way for their design team to create fast-loading vector animations for their products. Illustrating and animating your own illustrations will help create a polished, consistent brand vibe for you and your client's site. Even if you're not much of an illustrator, you can access free (or paid) animations from LottieFiles.

Here are the steps of adding a Lottie animation to a Rocketspark website. 

Convert SVG to Lottie

If you are not ready just yet to tackle After Effects and you think animation might be beyond you, this will be the option for you. By following the following steps, you can not only create animations but static vector graphics.

1. Sign up for a free LottieFiles account at https://lottiefiles.com/.
2. Go to https://lottiefiles.com/svg-to-lottie and upload an SVG file to Lottie.
   
3. Click the Upload to Preview button.
4. You'll be taken to your previewed animations. Select the animation you want to embed and click Expand, then switch to Handoff at the top.
   
5. On the right-hand side, click the pencil icon underneath Embed.
   
6. You can now generate and edit the code. Recommended settings are below:
   • Adjust Width to 100%.
   • Get rid of the Height value (if you know how tall you want your animation, put it in as pixels and remove the Width value instead).
   • Hide Controls and Hover by unticking the checkboxes.
   • You can also switch the Play Mode, change the Background Colour, and adjust the Animation Speed.
     
7. Copy and paste the code to a code block on a Rocketspark website, then click Publish.
   
   

NOTE: For platforms that don't support Lottie like social media, presentations etc, you can export Lottie to GIF from https://lottiefiles.com/lottie-to-gif. 

Converting After Effects to Lottie 

If you want to embed your own designed animation on your Rocketspark website, you need to convert an After Effects SVG to Lottie file. Not all transform options in After Effects are compatible with Lottie: When I render my animation in the plugin it doesn't look like how I've designed it in After Effects.

Converting After Effects to Lottie requires this plugin: https://lottiefiles.com/plugins/after-effects.

Full-width Lottie

Adding a Lottie animation to a full-width stack allows you to utilise full, edge-to-edge bespoke vector illustration or animation.

You can add this in the same way as the above. If you want the animation to take up the whole stack vertically as well you'll need to add the code in bold below to the style section of your Lottie code.

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets7.lottiefiles.com/packages/your_lottie.json" 
mode="bounce" background="transparent"  speed="1"  style="width: 100%; height: ;
margin-top:-1.2rem;margin-bottom:-1.2rem;"  loop autoplay></lottie-player>

Lottie Interactions (Experts Only)

There are several other things you can do with Lottie animations. One popular technique is to change the point that the animation is at depending on the scroll level of the page.

This set-up is a bit more involved, so make sure you're comfortable with the code before you attempt this.

1. Set up your animation as before, but ensure that controls and autoplay are unticked. Copy only the code between the <lottie-player> tags. Paste this into an HTML block and add an id attribute with a unique name for your animation (this name can only have letters, numbers, or dashes and underscores). Click Publish. Your code should look similar to the below:

   <lottie-player id="my-animation" src="https://assets7.lottiefiles.com/packages/lf20_adg8g2sd.json"
   background="transparent"  speed="1"  style="width: 100%; height: ;"></lottie-player>

2. Next, you'll need to add the below code once per page (you can put it in an HTML block or in the Custom <body> tracking code section in Get Found (SEO)). This code must be pasted before the code for your animations (i.e. earlier on the page).

   <script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>
   <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

3. Now, you'll need to add another script tag to the HTML block from before. This is where you put your keyframes for the animation. An example of a scroll-based animation that's offset is below:

   <script>
   LottieInteractivity.create({
       mode:"scroll",
       player: "#my-animation",
       actions: [
        {
          visibility: [0, 0.4],
          type: "stop",
          frames: [0]
        },
        {
          visibility: [0.4, 1],
          type: "seek",
          frames: [0, 200]
        }
       ]
   });
   </script>

   There are several parts to this code:

   • mode: "scroll" sets the animation to be synced with the scrolling of the window.
   • player: "my-animation" is the animation you are controlling (this must match the id from earlier).
   • actions: are where the various keyframes of your animation are defined.
   • visibility: [0, 0.4] sets the keyframe to take effect from when the animation is not visible to when it's 40% up the page. In this case, the type is stop, which sets the animation to be paused at a particular frame, is set in the frames: [0] part of the code. This part of the code pauses the animation at frame 0 until it is 40% up the page.
   • The next keyframe takes effect from 40% up the page to 100% up the page and will play the animation from frames 0 to 200. seek means the animation will sync with the scrolling (alongside this and stop, there are two other types: play, which plays the animation without syncing to the scroll; and loop, which loops the animation between the frames you define).

Altogether, this code sets the Lottie animation to change depending on scroll position, but only when it's between 40% and 100% of the page.

This help guide only scratches the surface of what you can do with Lottie. If you're comfortable with Javascript, there is some documentation outlining what's possible here.

Final Notes

Lottie files are small, so won't have much impact on your page speed. If you have text in your animations, however, Google won't pick it up so use it sparingly if SEO is important to you.

Too many looping Lotties can also make the animations jumpy. Keep an eye on it as you add more to a page. Any movement you add should feel smooth and enhance the page; it shouldn't feel jarring or overwhelming to the visitor. In particular, for looping animations try to keep the loop point smooth, rather than having a jarring jump. Lottie offers the Bounce effect which can help with this (Bounce plays the animation forwards and then backwards).