lottie animation is playing too fast

Question

I added demo animation to the web using lottie, but the playback speed is too fast. How do I get to normal speed? The link below is a problem animation.

problem animation link : https://saybgm.github.io/Lottie_example/

My animation : https://youtu.be/CcHT7VgUF38

After Effect aep file : https://drive.google.com/file/d/1YGqgiuU-hU5Raq2WXu3r1ZrCANXB_Gw9/view?usp=sharing

my code

var animate = lottie.loadAnimation({
container: document.getElementById("hello"),
renderer: 'svg',
autoplay: true,
loop:true,
path: 'animation2.json'})

https://github.com/SayBGM/Lottie_example This is github link. — SayBGM, May 24 '18 at 03:41

score 19 · Accepted Answer · edited Jul 14 '23 at 16:41

I think the problem is inside the animation file, tried with the Lottiefiles preview, it looks the same as your code runs: https://www.lottiefiles.com/share/TNdLkQ

If you want to make it slower, call setSpeed (1 is the current speed, < 1 will make it slower):

var animate = lottie.loadAnimation({
  container: document.getElementById("hello"),
  renderer: 'svg',
  autoplay: true,
  loop:true,
  path: 'animation2.json'
});
animate.setSpeed(0.1);

From the document: http://airbnb.io/lottie/web/getting-started.html

score 12 · Answer 2 · edited Sep 08 '19 at 11:29

12

Also you can handle it on XML file. Go to the Lottie tag, then implement

app:lottie_speed="any number"

edited Sep 08 '19 at 11:29

marc_s

732,580
175
1,330
1,459

answered Aug 27 '19 at 07:34

A.R.B.N

1,035
2
10
20

Michael Brenndoerfer · Answer 3 · 2022-06-01T02:26:12.977

2

You can also set the speed directly on the component if you are using react

<LottieView
  speed={0.2}
  ref={animation}
  loop={true}
  autoPlay={true}
  ...
/>

edited Jun 01 '22 at 02:26

answered Mar 19 '22 at 21:59

Michael Brenndoerfer

3,483
2
39
50

score -1 · Answer 4 · edited Jul 15 '23 at 22:31

-1

If you are following the new way of implementing Lottie in React you can use it like this(similar to Michael's answer who got my upvote):

<Lottie
    options={defaultOptions}
    height={'100%'}
    width={'100%'}
    isStopped={false}
    isPaused={false}
    speed={0.25}
/>

edited Jul 15 '23 at 22:31

roapp

530
6
17

answered May 31 '22 at 18:15

Ian

41
5

lottie animation is playing too fast

4 Answers4