Skip to content
🎤 Builder Talk: The Story Behind Lady Gaga’s Digital Experience – Register now
Get help on Slack

Lottie Animations Error - Please update the Following Components: Lottie

3 replies
Last updated: Mar 11, 2021
I have a massive challenge! The client I am working with uses Lottie animations on their old site. This all gets added as part of the CMS (now Sanity). I have added a custom upload of Lottie JSON files in the blockContent and I know the file is there but when I call it into the lottie-react hook nothing happens. The serializer currently looks like this:

lottieFile: (_props_)  => {

const data = _props_.node.document.url

const styles = {

width: 500,

height: 500

}

return (

<Lottie _animationData_={data} _style_={styles} />

)
Mar 10, 2021, 4:53 PM
Are you getting anything returned at all (including errors)?
Mar 10, 2021, 8:51 PM
I am getting a warning:

Warning: componentWillUpdate has been renamed, and is not recommended for use. See <https://fb.me/react-unsafe-component-lifecycles> for details.

* Move data fetching code or side effects to componentDidUpdate.
* Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: Lottie
Mar 11, 2021, 8:56 AM
I’m now thinking this is a Next.js issue and probably the react-lottie package. 😢
Mar 11, 2021, 8:57 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?