From 404809025d41a76542c82c88c5b4325839038129 Mon Sep 17 00:00:00 2001
From: Raghu <raghu6004@gmail.com>
Date: Thu, 3 Apr 2025 23:06:50 -0400
Subject: [PATCH] add slideIn and wobble animations

---
 src/app/animations/animations.ts | 42 ++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 src/app/animations/animations.ts

diff --git a/src/app/animations/animations.ts b/src/app/animations/animations.ts
new file mode 100644
index 0000000..5d43156
--- /dev/null
+++ b/src/app/animations/animations.ts
@@ -0,0 +1,42 @@
+import { animate, keyframes, query, stagger, style, transition, trigger } from '@angular/animations';
+
+export const slidInAnimations = [
+  trigger('slideIn', [
+    transition(':enter', [
+      style({ overflow: 'hidden' }),
+      query('p, h1, h2, h3, h4, h5, h6, span, a', [
+        style({ opacity: 0, transform: 'translateY(20px)' }),
+        stagger(100, [animate('800ms ease-out', style({ opacity: 1, transform: 'translateY(0)' }))]),
+      ]),
+    ]),
+  ]),
+];
+
+export const wobbleAnimation = [
+  trigger('wobble', [
+    transition('* => *', [
+      animate(
+        '5s',
+        keyframes([
+          style({ borderRadius: '50%', offset: 0 }),
+          style({ borderRadius: '80% 10%', offset: 0.2 }),
+          style({ borderRadius: '60% 30%', offset: 0.3 }),
+          style({ borderRadius: '50%', offset: 0.5 }),
+          style({ borderRadius: '30% 60%', offset: 0.7 }),
+          style({ borderRadius: '10% 80%', offset: 0.8 }),
+          style({ borderRadius: '50%', offset: 1 }),
+        ])
+        // keyframes([
+        //   style({ borderRadius: '50%', offset: 0 }),
+        //   style({ borderRadius: '10% 20%', offset: 0.15 }),
+        //   style({ borderRadius: '30% 10%', offset: 0.3 }),
+        //   style({ borderRadius: '20% ', offset: 0.45 }),
+        //   style({ borderRadius: '30% 10% ', offset: 0.6 }),
+        //   style({ borderRadius: '30% ', offset: 0.75 }),
+        //   style({ borderRadius: '70% 20%', offset: 0.9 }),
+        //   style({ borderRadius: '50%', offset: 1 }),
+        // ])
+      ),
+    ]),
+  ]),
+];