Guides

Use Lottie files

Add a hosted Lottie animation to a compatible Sprocket Rocket module.

Modules that support Lottie have a Media Type field with a Lottie option. Choose Lottie, then paste the animation's embed code into the Lottie Embed Code field.

The modules load LottieFiles' dotLottie web component, so the embed code is a <dotlottie-wc> tag that points at the animation file. Upload the .lottie or Lottie JSON file to HubSpot, or use a public file URL from LottieFiles, and use that URL as the tag's src. For example: <dotlottie-wc src="https://example.com/animation.lottie" autoplay loop></dotlottie-wc>.

Set an explicit width and height to reduce layout movement. In most cases, use autoplay, looping, no controls, and a transparent background. Check mobile performance and make sure the content still works when animation is disabled.

Lottie support varies by module. Many column modules support it, such as SR Two Col 01. Search the module library and check the editable fields on the module page before choosing a layout.