Lottie animation with panoramic loop did not work correctly on Flutter

[el-thangle]

We have a Lottie animation with a panoramic loop that runs well on the web editor, but when we run it on Flutter, the animation is not working as on the web. The Penguins only have movement at the beginning but then are frozen after a few seconds.

Here is the recorded error: https://drive.google.com/file/d/1j_snUcKKm4VQoG_Vc_0gfuXDPRYZk8BX/view

This is the Lottie file: https://app.lottiefiles.com/share/7dcded65-b95c-43e0-b82f-6156b728afc4

Here is my Flutter code:

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: [
            Lottie.asset(
              'assets/static/v2wide.json',
              height: double.infinity,
              width: double.infinity,
              fit: BoxFit.cover,
              frameRate: FrameRate.max,
            ),
          ],
        ),
      ),
    );
  }
}

My pubspec:

environment:
  sdk: '>=2.16.2 <3.0.0'

dependencies:
  lottie: ^2.1.0

Kindly help us to explain the reason why this happened and how we can fix it. Thank you very much

[xvrh]

@thangle255 I quickly tried your animation in Lottie-Android previewer and I see the same problem.

I think this is because the animation uses expressions (Javascript code) which are not supported.

[el-thangle]

Thank you @xvrh for taking a look into this and response my issue.

Yes, I think so as I found "loopOut('cycle', 0)" inside the JSON file. I don't have any experience in creating Lottie files so do you have any suggestions or alternative solutions for doing the loop inside the JSON file? as I don't have any solution to implement the panoramic effect from the Flutter code so requested our animation designer implement the loop from JSON.

[xvrh]

I'm not an expert but I think you can convert expressions to keyframe: https://www.youtube.com/watch?v=ZyrvDFHNI9Y

Hope that helps

[el-thangle]

Thanks @xvrh, let me pass it to our designer and see if that solves the issue