You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm trying to play an animation alternating back and forth, also called play mode bounce.
The most straight forward way to do this, that I could think of was to alternate speed between 1 and -1, and having the change occur in onAnimationFinish.
In earlier versions of lottie-react-native (or rather, earlier versions of Expo) I think that this worked fine. But today, when using Expo SDK 49 and version 5.1.6 of this package, it does not.
(I'm currently working on an iOS only app, but from a quick glance at the Snack it seems like speed={-1} isn't working at all on the web)
Steps to Reproduce
Add a LottieView with a speed state variable initialized to 1
Add an onAnimationFinish handler that change the speed between -1 and 1
Observe that the animation does not play smoothly back and forth, but instead behaves erratic
Add a console.log to onAnimationFinish and see it being called a lot
Expected behavior:onAnimationFinish would only be called exactly once at each end of the animation
Actual behavior:onAnimationFinish is called multiple times, which makes the speed change more than once at each end, which sometimes also triggers the entire animation to flash to white and then restart
It would be really nice if there could be a alternate prop on LottieView that made the animation loop by playing it first forwards, then backwards, and so on 🙏
The text was updated successfully, but these errors were encountered:
Sorry, I didn't realise that there was a version 6 released.
5.1.6 is the version currently supported by Expo SDK 49, the latest sdk version.
It seems like PR 23843 updates this, so it should be a part of Expo SDK 50.
Apart from that, how do you feel about adding a alternate?: boolean or mode?: 'bounce' or similar prop to do this natively without having to keep track of state and re-rendering ourselves?
That's a good idea. I will try to add it when I find some time.
Are you using Expo Go? You can use Expo Prebuilt to use the latest version of the libraries.
Description
I'm trying to play an animation alternating back and forth, also called play mode bounce.
The most straight forward way to do this, that I could think of was to alternate
speed
between1
and-1
, and having the change occur inonAnimationFinish
.In earlier versions of lottie-react-native (or rather, earlier versions of Expo) I think that this worked fine. But today, when using Expo SDK 49 and version 5.1.6 of this package, it does not.
(I'm currently working on an iOS only app, but from a quick glance at the Snack it seems like
speed={-1}
isn't working at all on the web)Steps to Reproduce
LottieView
with a speed state variable initialized to1
onAnimationFinish
handler that change the speed between-1
and1
console.log
toonAnimationFinish
and see it being called a lotExpected behavior:
onAnimationFinish
would only be called exactly once at each end of the animationActual behavior:
onAnimationFinish
is called multiple times, which makes the speed change more than once at each end, which sometimes also triggers the entire animation to flash to white and then restartMinimal reproduction
https://snack.expo.dev/@linusu/lottie-alternate-animation
React Native Environment
Lottie Version
Version:
lottie-react-native@5.1.6
,lottie-ios@3.5.0
Extra request
It would be really nice if there could be a
alternate
prop onLottieView
that made the animation loop by playing it first forwards, then backwards, and so on 🙏The text was updated successfully, but these errors were encountered: