Provide a ref

[mifi]

Although the goal of this is to be declarative, it would still be nice to provide a ref to the lottie object for fine control.

Maybe similar to https://github.com/react-native-community/lottie-react-native

PR welcome

[amardeepsingh20]

Any suggestion how this can be done?

[mifi]

I think like this: https://reactjs.org/docs/forwarding-refs.html#forwarding-refs-to-dom-components

[rheng001]

@mifi Any example of how this can be done to get the ref to the lottie object?

I have multiple lotti animations and need a reference for each to play each specific animation when hovering over them.

[mifi]

@rheng001 u can achieve this the React Way by setting state controlling the prop "playing"

[ivanjeremic]

@rheng001 u can achieve this the React Way by setting state controlling the prop "playing"

@mifi Would this also solve to click on a specific element in the svg? I have here a CodeSandBox demo of a different library I try and none of the libs for lottie-react I tired has an easy way that works for clicking an specific item inside the svg, has your lib the solution to this? https://codesandbox.io/s/lottie-react-hook-click-problem-qv4lt?file=/src/App.js

[mifi]

@ivanjeremic I don't think you can do that easily. Better use lottie-web directly then

[simonpkerr]

it would still be good to have a reference to the container, so that consumers can hook into events easily. 1 example I'm thinking of is the data_failed event. We've been asked to provide a static fall back if the lottie animation fails to load.
could you use forwardRef on your component to accept a ref and then just use that instead of creating it directly here

[mifi]

Sure, I'll try it when I have some time, PR welcome ofc

[michaelpersson-ux]

Hey, love the player. I would really appreciate some way to reach Lotties currentframe, and I suppose having a ref to the Lottie object would solve that. I have experimented with ways to use forwardRef, but sadly I am too novice with React to make much sense of it. If anyone has had more luck reaching the Lottie object (or another way to retrieve the currentframe prop), I would love to know about it.

[PavelZhuravlev]

+1 really need this feature!
Currently there is no way to access currentFrame

[mifi]

Can't the prop onEnterFrame be used for that?

[PavelZhuravlev]

@mifi onEnterFrame exposes durations and not the frames.
If you are working with segments(that are frame based) and you need to know the current frame you cannot use onEnterFrame

[ndimatteo]

Hey there @mifi, love what you've done! Any update on a solution for this?

I have a related need (and I'm sure many others do too), where Safari has significant performance issues, and the solution that @bodymovin repeatedly suggests is to call: anim.setSubframe(false)

It seems we're unable to do that using the react-lottie-player

It would be lovely if we could access the lottie ref somewhere, even just passing it along to the onLoad callback would be helpful so that we can call other methods on it like this.