Open victorlaforga opened 3 years ago
do yo uhave the same problem if you use https://github.com/airbnb/lottie-web ?
How can I use the plugin in react?
I think you would need to manually server the json then, and manually play the lottie
Could you help me out with this, I am a newbie to react
I believe this could be related to #35
can you try with lodash.clonedeep
e.g. animationData={cloneDeep(animationData)}
alternatively upgrade to 1.3.2 (no need for clone)
Since you said it doesn't work after upgrading, then this issue is different from #35. I cannot even make the animation you linked show at all. any chance you could make a codesandbox with the issue?
Hi Mifi,
Yes, see this link: https://codesandbox.io/s/spring-architecture-bum5m?file=/src/App.js:94-158
Hi @mifi
Did you got any updates?
your sandbox is using @lottiefiles/react-lottie-player, which is different from this module (react-lottie-player
)
Hi @mifi ,
import * as React from "react"
import "../../styles/styles.scss"
// import { Player } from '@lottiefiles/react-lottie-player';
import Lottie from 'react-lottie-player'
import { AccessContext } from '../../contexts/access'
import lottieJson from '../../assets/Laforga-mainsection.json';
const MainSection = () => {
const [isFirstAccess] = React.useContext(AccessContext);
return (
<div className="main-section">
<Lottie
loop
// src="https://assets10.lottiefiles.com/packages/lf20_ou1uzijz.json"
animationData="https://assets10.lottiefiles.com/packages/lf20_ou1uzijz.json"
play
/>
{/* <Player autoplay={true} play loop speed="1" background="transparent" src="https://assets10.lottiefiles.com/packages/lf20_ou1uzijz.json" > </Player> */}
<div className={`intro-text ${isFirstAccess && 'intro-text-animated'}`}>
<h1>Wij zetten <br /> merken & bedrijven <br /> <span className="yellow-detail">om in legendes op het web.</span></h1>
<p>wees de concurrentie voor en creëer samen met ons een <br className="hide-media" /><span className="yellow-detail small">echte digitale ervaring.</span></p>
</div>
</div>
)
}
export default MainSection
This also does not work. I would really appreciate if you could make a sandbowx with my lottie src that works, so than I can implement it in my react project.
If you can make a sandbox that reproduces the problem ,then I can look into it
This is the sandbox link: https://codesandbox.io/s/spring-architecture-bum5m?file=/src/App.js:94-158
It doesnt even show the animation
@victorlaforga I think your lottie json file is wrong. when I tested https://codesandbox.io/s/spring-architecture-bum5m?file=/src/App.js:94-158 with my json file it performed well.
@zerone2 Could you send me a sandbox link where it works with your json file?
https://lottiefiles.com/share/i5eriina
This is the official lottie source.
@victorlaforga I don't know exact reason but, maybe it should be caused by your lottie source version. You can try with this lottie. just download it and change path.
Hello,
I have a problem with the lottie animation on : https://pensive-gates-96535d.netlify.app/
If you watch closely the animtion is lagging after 8 seconds for a bit. On the other side, the lottie preview is not lagging, does someone know how to fix this? https://lottiefiles.com/share/i5eriina
Thanks!