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.
- Sign up for a free LottieFiles account at https://lottiefiles.com/.
- Go to https://lottiefiles.com/svg-to-lottie/convert and upload an SVG file to Lottie.
- Click the Upload to Preview button.
- 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.
- On the right-hand side, click the pencil icon underneath Embed.
- 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.
- 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.
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.
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 code before you attempt this.
- 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>
- 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).
- 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:
visibility: [0, 0.4],
visibility: [0.4, 1],
frames: [0, 200]
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, which is set in the
frames: 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.
seekmeans 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.
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).