Lottie animation is lagging for 1 a 2 seconds

[victorlaforga]

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!

[mifi]

do yo uhave the same problem if you use https://github.com/airbnb/lottie-web ?

[victorlaforga]

How can I use the plugin in react?

[mifi]

I think you would need to manually server the json then, and manually play the lottie

[victorlaforga]

Could you help me out with this, I am a newbie to react

[mifi]

I believe this could be related to #35

can you try with lodash.clonedeep e.g. animationData={cloneDeep(animationData)}

[mifi]

alternatively upgrade to 1.3.2 (no need for clone)

[mifi]

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?

[victorlaforga]

Hi Mifi,

Yes, see this link: https://codesandbox.io/s/spring-architecture-bum5m?file=/src/App.js:94-158

[victorlaforga]

Hi @mifi

Did you got any updates?

[mifi]

your sandbox is using @lottiefiles/react-lottie-player, which is different from this module (react-lottie-player)

[victorlaforga]

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.

[mifi]

If you can make a sandbox that reproduces the problem ,then I can look into it

[victorlaforga]

This is the sandbox link: https://codesandbox.io/s/spring-architecture-bum5m?file=/src/App.js:94-158

It doesnt even show the animation

[zerone2]

@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.

[victorlaforga]

@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.

[zerone2]

@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.

https://lottiefiles.com/share/u2frshmo