react-native-animated-loader icon indicating copy to clipboard operation
react-native-animated-loader copied to clipboard

Animation not playing fully through

Open lucidprojects opened this issue 3 years ago • 1 comments

I've created my own Lottie file which works as desired when tested on lottie files preview -https://lottiefiles.com/share/fpzibff0

But for some reason when I call it within my code it only plays part of the animation.

I read a few issues related to total size of the json file but mine is on 30kb

code

<AnimatedLoader
        visible={visible}
        overlayColor="rgba(255,255,255,0.75)"
        source={require("../../assets/logo_drop_loopout.json")}
        animationStyle={styles.lottie}
        speed={1.5}
        >
</AnimatedLoader>

Versions:

react-native: 0.63.2 
"lottie-ios": "3.1.8",
"lottie-react-native": "4.0.3",
"react-native-animated-loader": "^0.0.9",

desired full animation, where it spins 3 times after

https://user-images.githubusercontent.com/50380056/139960385-838b775c-cff1-442c-b582-89d04b1d9e59.mov

vs partial animation

https://user-images.githubusercontent.com/50380056/139960392-5659fac2-ffec-4438-886e-0cac8b4a65a3.mov

Any help appreciated.

lucidprojects avatar Nov 02 '21 22:11 lucidprojects

For anyone that ends up here, per this reddit It looks like Lottiefiles don't handle After Effects expressions well.

Sure enough, taking out the expressions fixes the issue. Kind of a bummer but at least it is working.

Also, useful link for AE features supported

Cheers ✌️

lucidprojects avatar Nov 03 '21 17:11 lucidprojects