diff --git a/doric-demo/src/AnimationsDemo.ts b/doric-demo/src/AnimationsDemo.ts
new file mode 100644
index 00000000..36563f3f
--- /dev/null
+++ b/doric-demo/src/AnimationsDemo.ts
@@ -0,0 +1,40 @@
+
+import { Group, Panel, Color, LayoutSpec, View, layoutConfig, flexlayout, image, ScaleType, Align, FlexDirection, Wrap, stack, vlayout, text, hlayout, modal, Gravity, TranslationAnimation } from "doric";
+import { icon_refresh } from "./utils";
+
+@Entry
+class Animations extends Panel {
+    build(root: Group) {
+        const animation = new TranslationAnimation
+        animation.fromTranslationX = 0
+        animation.toTranslationX = 100
+        animation.duration = 5000
+        let view: View
+        vlayout(
+            [
+                view = stack([], {
+                    layoutConfig: layoutConfig().just(),
+                    width: 20,
+                    height: 20,
+                    backgroundColor: Color.BLUE,
+                }),
+                text({
+                    text: "Start",
+                    onClick: () => {
+                        view.doAnimation(context, animation)
+                    }
+                }),
+                text({
+                    text: "Cancel",
+                    onClick: () => {
+                        view.cancelAnimation(context, animation)
+                    }
+                }),
+            ],
+            {
+                space: 10,
+                layoutConfig: layoutConfig().most(),
+                gravity: Gravity.Center
+            }).in(root)
+    }
+}
\ No newline at end of file