diff --git a/examples/lib/stories/effects/dual_effect_removal_example.dart b/examples/lib/stories/effects/dual_effect_removal_example.dart
new file mode 100644
index 000000000..9388ef095
--- /dev/null
+++ b/examples/lib/stories/effects/dual_effect_removal_example.dart
@@ -0,0 +1,68 @@
+import 'package:flame/components.dart';
+import 'package:flame/effects.dart';
+import 'package:flame/game.dart';
+import 'package:flame/input.dart';
+import 'package:flutter/material.dart';
+
+class DualEffectRemovalExample extends FlameGame with TapDetector {
+  static const String description = '''
+    In this example we show how a dual effect can be used and removed.
+    To remove an effect, tap anywhere on the screen and the first tap will
+    remove the OpacityEffect and the second tap removes the ColorEffect.
+    In this example, when an effect is removed the component is reset to
+    the state (the part of the state that was affected by the running effect)
+    that it had before the effect started running.
+  ''';
+
+  late ColorEffect colorEffect;
+  late OpacityEffect opacityEffect;
+
+  @override
+  Future<void> onLoad() async {
+    await super.onLoad();
+
+    final mySprite = SpriteComponent(
+      sprite: await loadSprite('flame.png'),
+      position: Vector2(50, 50),
+    );
+
+    add(mySprite);
+
+    final colorController = EffectController(
+      duration: 2,
+      reverseDuration: 2,
+      infinite: true,
+    );
+    colorEffect = ColorEffect(
+      Colors.blue,
+      const Offset(0.0, 0.8),
+      colorController,
+    );
+    mySprite.add(colorEffect);
+
+    final opacityController = EffectController(
+      duration: 1,
+      reverseDuration: 1,
+      infinite: true,
+    );
+    opacityEffect = OpacityEffect.fadeOut(opacityController);
+    mySprite.add(opacityEffect);
+  }
+
+  @override
+  void onTap() {
+    // apply(0) sends the animation to its initial starting state.
+    // If this isn't called, the effect would be removed and leave the
+    // component at its current state.
+    // Hence when you want an effect to be removed and the component to go
+    // back to how it looked prior to the effect, you must call apply(0) before
+    // you call removeFromParent().
+    if (opacityEffect.isMounted) {
+      opacityEffect.apply(0);
+      opacityEffect.removeFromParent();
+    } else if (colorEffect.isMounted) {
+      colorEffect.apply(0);
+      colorEffect.removeFromParent();
+    }
+  }
+}
diff --git a/examples/lib/stories/effects/effects.dart b/examples/lib/stories/effects/effects.dart
index 5f32f64f5..a4058b2f5 100644
--- a/examples/lib/stories/effects/effects.dart
+++ b/examples/lib/stories/effects/effects.dart
@@ -3,6 +3,7 @@ import 'package:flame/game.dart';
 
 import '../../commons/commons.dart';
 import 'color_effect_example.dart';
+import 'dual_effect_removal_example.dart';
 import 'effect_controllers_example.dart';
 import 'move_effect_example.dart';
 import 'opacity_effect_example.dart';
@@ -20,6 +21,12 @@ void addEffectsStories(Dashbook dashbook) {
       codeLink: baseLink('effects/move_effect_example.dart'),
       info: MoveEffectExample.description,
     )
+    ..add(
+      'Dual Effect Removal',
+      (_) => GameWidget(game: DualEffectRemovalExample()),
+      codeLink: baseLink('effects/dual_effect_removal_example.dart'),
+      info: DualEffectRemovalExample.description,
+    )
     ..add(
       'Rotate Effect',
       (_) => GameWidget(game: RotateEffectExample()),