slider controlling Lottie animation with Javascript

Question

I have a question:

Is there a way to control a Lottie animation using a slider in Javascript? I've tried triggering the animation using a simple button and that works. I'm using a physical slider (potentiometer) with an Arduino, so the slider gives me an input from 0-1023.

What I want to know is if I can translate the input from the potentiometer to the frames of the animation, so basically being able to play/reverse the animation frames using the slider.

I'm using JohnnyFive Javascript framework to communicate with my Arduino.

Answer 1

Yes, in theory that is perfectly possible. As lottie-web allows you to control exactly what frame is displayed. The tricky part might be first mapping the slider position with the animation frames.

You can get the duration in frames of an animation with getDuration(true). Then you could call the goToAndStop() function as the slider is moved.

You would need an event to be fired every time the slider position changes and catch it within your JavaScript code.

EDIT

You can read more about lottie here: https://www.npmjs.com/package/lottie-web