How to trim a Lottie file without After Effects

Question

I have a 95-frame Lottie file and I want to trim the beginning so it starts at the 15 frame mark. It seems like there should be an easy way to do this, but I don't have After Effects. Is there some online editor or other way I can get a new .json file that represents the animation starting at 15 frames?

I tried using LottieRef.current.play(15, 95) like this:

const lottieRef = useRef<LottieView>(null);

useEffect(() => {
    if (lottieRef && lottieRef.current) {
      lottieRef.current.play(15, 95);
    }
  }, [renderVideo, lottieRef]);

return (
    <LottieView
      ref={lottieRef}
      source={SUCCESS.keepReading}
      onAnimationFinish={game.onFinishAnimation}
      autoPlay
      loop={false}
      style={styles.animationContainer}
    />
  );

But when I added the onAnimationFinish prop it calls the animation finish function right away instead of waiting til the animation has played through. So I want to edit the actual .json file (but if there's a fix where I can use this method instead and not have the issue with onAnimationFinish that would be great too).

Vociferous

Answer 1

You can change the ip and op in the lottie file to whatever frame you want to start/end at.

In your example, change ip to 15 and op to 95

Angelo

There may be more than one "ip" and "op" in a JSON file. Mine had two. – Hypotaxis

Thank you, Tom! You spared me from manually removing a lot of keyframes. – Vastah

Answer 2

You can just go in the lottie json file and remove the frames from asset array. frames are have id like 'fr_1', 'fr_2'. Remove id from fr_0 to fr_15 and save it. Also make sure to update the final number of frames after you remove it. The total number of frames is indicated by op key.

Calaverite