Rive animations freezing after initial few seconds and not correctly receiving pointer [Flutter]

[sakshitporwal]

Rive Animation Freezing Issue Report

Issue Summary

Title: New Files created on editor v0.8.3243 are freezing in a few seconds on Android and Windows & on window resize on Windows

Environment Information

Flutter & Dart Version

[√] Flutter (Channel stable, 3.32.7, on Microsoft Windows [Version 10.0.26200.5710], locale en-IN)
[√] Windows Version (11 Home Insider Preview Single Language 64-bit, 25H2, 2009)
[√] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
[√] Chrome - develop for the web
[√] Visual Studio - develop Windows apps (Visual Studio Build Tools 2022 17.14.2)
[√] Android Studio (version 2022.3)
[√] VS Code (version 1.102.1)
[√] Connected device (4 available)
[√] Network resources

Dependencies

• Rive Version: ^0.14.0-dev.3 (Latest dev version)
• Flutter UI Framework: Fluent UI ^4.12.0
• Target Platforms: Android, Windows

Rive Editor Version

• Editor Version: v0.8.3243

Problem Description

Symptoms

1. Android Platform: Rive animations freeze after a few seconds of running
2. Windows Platform:
   • Animations freeze after a few seconds of running
   • Additional freezing occurs on window resize events
3. Timing: Issue appears consistently within seconds of animation start
4. Scope: Affects new files created with Rive editor v0.8.3243

Current Implementation

The issue occurs in the StoreStage widget which loads a Rive animation:

// File: lib/screens/windows/store_module/store_stage.dart
final fileLoader = rive.FileLoader.fromAsset(
  'assets/rive/dash.riv',
  riveFactory: rive.Factory.rive,
);

return rive.RiveWidgetBuilder(
  fileLoader: fileLoader,
  builder: (context, state) => switch (state) {
    rive.RiveLoading() => const Center(child: ProgressRing()),
    rive.RiveFailed() => Center(/* Error handling */),
    rive.RiveLoaded() => rive.RiveWidget(
        controller: state.controller,
        fit: rive.Fit.fill,
      ),
  },
);

Steps to Reproduce

Prerequisites

1. Install Flutter 3.32.7 (stable channel)
2. Add rive: ^0.14.0-dev.3 to pubspec.yaml
3. Create a new Rive file using Rive editor v0.8.3243 with align taget on pointer move
4. Set up a Flutter project targeting Android and/or Windows

Reproduction Steps

For Android:

1. Setup:

   flutter create rive_test_app
   cd rive_test_app

2. Add Rive dependency:

   # pubspec.yaml
   dependencies:
     flutter:
       sdk: flutter
     rive: ^0.14.0-dev.3

3. Create assets folder:

   mkdir assets
   mkdir assets/rive

4. Add Rive asset created with editor v0.8.3243 to assets/rive/

5. Update pubspec.yaml:

   flutter:
     assets:
       - assets/rive/

6. Implement the widget:

   // Create a widget similar to StoreStage with RiveWidgetBuilder
   // Load the animation using FileLoader.fromAsset
   // Use RiveWidget with Fit.fill

7. Run on Android device:

   flutter run -d android

8. Observe: Animation plays for a few seconds then freezes

For Windows:

1. Follow steps 1-6 from Android setup

2. Run on Windows:

   flutter run -d windows

3. Test scenarios:

   • Launch app and observe animation freezing after few seconds
   • Resize window during animation playback
   • Observe additional freezing on window resize events

Expected Behavior

• Rive animations should play smoothly and continuously
• Window resize events should not cause animation freezing
• Animations should maintain consistent performance across platforms

Actual Behavior

• Animations freeze after 2-5 seconds of playback
• Windows platform shows additional freezing on resize
• Issue is consistent across different devices and emulators

Additional Information

Project Structure

lib/
├── screens/
│   └── windows/
│       └── store_module/
│           └── store_stage.dart  # Widget containing the Rive animation
assets/
├── rive/
│   ├── weather.riv              # Main problematic animation file
│   ├── bg_test.riv
│   ├── dash.riv
│   ├── interactive_blur_waves.riv
│   ├── number4.riv
│   └── untitled.riv

Workarounds Attempted

• Tried different Fit options (cover, contain, fill, etc.)
• Tested with different Rive file formats
• Attempted manual controller management
• Tested on multiple devices/emulators

[HayesGordon]

HI @sakshitporwal, thanks for the detailed issue.

Just to confirm, it's only the graphic that is pausing? It's not freezing the whole application/window?

If it's the former, this is resolved and should be fixed in the next release!

[sakshitporwal]

HI @sakshitporwal, thanks for the detailed issue.

Just to confirm, it's only the graphic that is pausing? It's not freezing the whole application/window?

If it's the former, this is resolved and should be fixed in the next release!

@HayesGordon Sorry to be that guy but is the update gonna be released anytime soon? I have some major development on hold.

[HayesGordon]

@sakshitporwal, could you try version 0.14.0-dev.4 and let us know if that resolves the issue for you?

[sakshitporwal]

@sakshitporwal, could you try version 0.14.0-dev.4 and let us know if that resolves the issue for you?

@HayesGordon
Unfortunately, Still having the same issue with animation pausing after initial few seconds. I am not having this issue on older riv files for some reason.
In the attached video the toggle button runs setState() and sets controller.active = true which enables animation again until pointer stops moving
i have attached my .rev file as zip

https://github.com/user-attachments/assets/34975c84-5f8a-4ff1-b7d1-a62feb17f040
https://github.com/user-attachments/assets/5e00ebf8-df5b-484f-93d5-cb409d108689

store_stage.zip

[HayesGordon]

I see! Sorry for the wild goose chase. This is a known issue. There is a small part of this that I can fix soon, which I believe will fix the issue for you.

But there is bigger work that we need to do to automatically restart our render loop when any data changes in Rive. We're actively discussing this and trying to decide the best way to do this!

It's one of our highest priorities, but it requires input from a wide team, and might take time.

You can also solve this by doing riveWidgetController.scheduleRepaint() when you expect the graphic is paused, but it's not advancing when it should be.

[sakshitporwal]

I see! Sorry for the wild goose chase. This is a known issue. There is a small part of this that I can fix soon, which I believe will fix the issue for you.

But there is bigger work that we need to do to automatically restart our render loop when any data changes in Rive. We're actively discussing this and trying to decide the best way to do this!

It's one of our highest priorities, but it requires input from a wide team, and might take time.

You can also solve this by doing riveWidgetController.scheduleRepaint() when you expect the graphic is paused, but it's not advancing when it should be.

@HayesGordon
I am now calling controller.scheduleRepaint() in a timer function. Certainly it's not optimal but is there any better way to do this?.

 r.RiveWidgetBuilder(
            fileLoader: riveFile,
            builder: (context, state) {
              switch (state) {
                case r.RiveLoading():
                  return const Center(child: ProgressRing());
                case r.RiveFailed():
                  return ErrorWidget.withDetails(
                    message: state.error.toString(),
                    error: FlutterError(state.error.toString()),
                  );
                case r.RiveLoaded():
                  {
                    controller = state.controller;
                    controller.scheduleRepaint();
                    final vm = controller.file.viewModelByName('themeData')!;
                    timer = Timer.periodic(const Duration(seconds: 1), (timer) {
                      if (mounted) {
                        setState(() {
                          controller.scheduleRepaint();
                        });
                      }
                    });
                    if (vmi == null) {
                      vmi = vm.createInstanceByName('light')!;
                    }
                    vmi!.number('width')!.value =
                        MediaQuery.of(context).size.width;
                    vmi!.number('height')!.value =
                        MediaQuery.of(context).size.height;
                    vmi!.number('maxHeight')!.value = 500;
                    vmi!.color('backgroundColor')!.value =
                        theme.micaBackgroundColor;
                    vmi!.color('scaffoldColor')!.value =
                        const Color.fromARGB(8, 0, 0, 0);
                    vmi!.color('textColor')!.value =
                        theme.typography.title!.color!;
                    vmi!.string('name')!.value =
                        appwriteController.licence['businessName'] ??
                            'SwarnaBook';
                    controller.artboard.bindViewModelInstance(vmi!);
                    controller.dataBind(r.DataBind.byInstance(vmi!));

                    return r.RiveWidget(
                      controller: controller,
                      fit: r.Fit.layout,
                      hitTestBehavior: r.RiveDefaults.hitTestBehaviour,
                    );
                  }
              }
            },
            onLoaded: (state) {
              controller = state.controller;
              controller.active = true;
            },
          ),

[HayesGordon]

A better approach would be to make some loop in your graphic in the Rive Editor, so that the state machine doesn't settle. For example, a new animation timeline set to loop.

An even better option would be to conditionally schedule a repaint if a pointer event hit something. You can override the RiveWidgetController with this to create a custom one that you can use:

base class MyBetterController extends RiveWidgetController {
  MyBetterController(super.file);

  @override
  void pointerEvent(PointerEvent event, HitTestEntry<HitTestTarget> entry) {
    final stateMachine = this.stateMachine;
    final position = localToArtboard(
      position: event.localPosition,
      artboardBounds: artboard.bounds,
      fit: fit,
      alignment: alignment,
      size: lastSize / lastPaintPixelRatio,
      scaleFactor: layoutScaleFactor,
    );

    HitResult hitResult = HitResult.none;
    if (event is PointerDownEvent) {
      hitResult = stateMachine.pointerDown(position);
    } else if (event is PointerUpEvent) {
      hitResult = stateMachine.pointerUp(position);
    } else if (event is PointerMoveEvent) {
      hitResult = stateMachine.pointerMove(position);
    } else if (event is PointerHoverEvent) {
      hitResult = stateMachine.pointerMove(position);
    }

    if (hitResult != HitResult.none) {
      scheduleRepaint();
    }
  }
}

[sakshitporwal]

A better approach would be to make some loop in your graphic in the Rive Editor, so that the state machine doesn't settle. For example, a new animation timeline set to loop.

An even better option would be to conditionally schedule a repaint if a pointer event hit something. You can override the RiveWidgetController with this to create a custom one that you can use:

base class MyBetterController extends RiveWidgetController {
  MyBetterController(super.file);

  @override
  void pointerEvent(PointerEvent event, HitTestEntry<HitTestTarget> entry) {
    final stateMachine = this.stateMachine;
    final position = localToArtboard(
      position: event.localPosition,
      artboardBounds: artboard.bounds,
      fit: fit,
      alignment: alignment,
      size: lastSize / lastPaintPixelRatio,
      scaleFactor: layoutScaleFactor,
    );

    HitResult hitResult = HitResult.none;
    if (event is PointerDownEvent) {
      hitResult = stateMachine.pointerDown(position);
    } else if (event is PointerUpEvent) {
      hitResult = stateMachine.pointerUp(position);
    } else if (event is PointerMoveEvent) {
      hitResult = stateMachine.pointerMove(position);
    } else if (event is PointerHoverEvent) {
      hitResult = stateMachine.pointerMove(position);
    }

    if (hitResult != HitResult.none) {
      scheduleRepaint();
    }
  }
}

@HayesGordon
This solves it for me. Thank you!

Just wondering if this might be computationally expensive?

[HayesGordon]

A better approach would be to make some loop in your graphic in the Rive Editor, so that the state machine doesn't settle. For example, a new animation timeline set to loop.
An even better option would be to conditionally schedule a repaint if a pointer event hit something. You can override the RiveWidgetController with this to create a custom one that you can use:
base class MyBetterController extends RiveWidgetController {
MyBetterController(super.file);

@OverRide
void pointerEvent(PointerEvent event, HitTestEntry entry) {
final stateMachine = this.stateMachine;
final position = localToArtboard(
position: event.localPosition,
artboardBounds: artboard.bounds,
fit: fit,
alignment: alignment,
size: lastSize / lastPaintPixelRatio,
scaleFactor: layoutScaleFactor,
);

HitResult hitResult = HitResult.none;
if (event is PointerDownEvent) {
  hitResult = stateMachine.pointerDown(position);
} else if (event is PointerUpEvent) {
  hitResult = stateMachine.pointerUp(position);
} else if (event is PointerMoveEvent) {
  hitResult = stateMachine.pointerMove(position);
} else if (event is PointerHoverEvent) {
  hitResult = stateMachine.pointerMove(position);
}

if (hitResult != HitResult.none) {
  scheduleRepaint();
}

}
}

@HayesGordon This solves it for me. Thank you!

Just wondering if this might be computationally expensive?

The only additional expense is the conditional call to scheduleRepaint which is much better than requesting scheduleRepaint each frame, or having an infinite loop. We might implement the above change in the core code, but still chatting about an alternative solution where we can more conditionally request frames.