How do I make elements responsive?

[jordanlambrecht]

I'd like to use my json as a background element with object-fit:cover. I'm a little stuck. Currently running tailwind, nextjs, and react(duh)

[mifi]

Im not sure what you mean by json as a background element. I think you should be able to set style={{width:’100%’}} and it will be responsive

[jordanlambrecht]

Im not sure what you mean by json as a background element. I think you should be able to set style={{width:’100%’}} and it will be responsive

Doesn't work for me =[ It's still locking to the width of the json file. Forgot to mention I'm using typescript, but the linter throws this:

Type '{ width: any; 100: number; }' is not assignable to type 'Properties<string | number, string & {}>'.

  Object literal may only specify known properties, and '100' does not exist in type 'Properties<string | number, string & {}>'.ts(2322)
index.d.ts(1847, 9): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & PropsWithChildren<LottieProps>'

Here's my code:

const PatternBlue = () => {
  return (
    <Lottie
      loop
      animationData={animationData}
      play
      renderer={'svg'}
      style={{ width: '100%', height: '100%' }}
    />
  )
}
function LogoAnimation() {
  return (
    <main>
      <section className='bg-blue lander my-4'>
        <PatternBlue />
      </section>
    </main>
  )
}
export default LogoAnimation

Here's what I mean when I say background element:

[mifi]

Maybe something like this could help you:

• Feature: "containing" images airbnb/lottie-web#1046
• https://github.com/airbnb/lottie-web/wiki/Renderer-Settings#preserveaspectratio
• https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

Btw if you could make a codesandbox that reproduces the problem it would be very helpful!

[jordanlambrecht]

Yes! That worked. Simply needed to figure out how to get the render settings to work. Humbly suggesting you add something like this to your demos.

Here's my new code in case anyone else has this issue:

import React from 'react'
import Lottie from 'react-lottie-player'
import Patterns_DarkBlue from '../data/Patterns_DarkBlue.json'

function PageHeader_VariableHeight({ header, subheader }) {
  const PatternBlue = () => {
    return (
      <Lottie
        loop
        animationData={Patterns_DarkBlue}
        play
        rendererSettings={{ preserveAspectRatio: 'xMidYMid slice' }}
        style={{ height: '100%' }}
      />
    )
  }
  return (
    <main>
      <section>
        <div id='lottie'>
          <PatternBlue />
        </div>
      </section>
    </main>
  )
}
export default PageHeader_VariableHeight
 

[mifi]

thanks. I'll add it to readme first. then maybe later to the examples. I don't consider it a feature of react-lottie-player, but rather lottie-web, as it's just an option passed on to that library.

[fukemy]

Yes! That worked. Simply needed to figure out how to get the render settings to work. Humbly suggesting you add something like this to your demos.

Here's my new code in case anyone else has this issue:

import React from 'react'
import Lottie from 'react-lottie-player'
import Patterns_DarkBlue from '../data/Patterns_DarkBlue.json'

function PageHeader_VariableHeight({ header, subheader }) {
  const PatternBlue = () => {
    return (
      <Lottie
        loop
        animationData={Patterns_DarkBlue}
        play
        rendererSettings={{ preserveAspectRatio: 'xMidYMid slice' }}
        style={{ height: '100%' }}
      />
    )
  }
  return (
    <main>
      <section>
        <div id='lottie'>
          <PatternBlue />
        </div>
      </section>
    </main>
  )
}
export default PageHeader_VariableHeight
 

not working to me, the width does not fill the parent