Closed jordanlambrecht closed 2 years ago
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
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:
Maybe something like this could help you:
Btw if you could make a codesandbox that reproduces the problem it would be very helpful!
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
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.
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
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)