add motion one

README.md

@@ -1,3 +1,9 @@
+# Animation
+[Motion One](https://motion.dev/) will be used to handle component transition
+
+[View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/) will be used between page transition
+
+
 # Tested Library / Functionality
 ## UI
 - [x] Tailwind

package.json

@@ -73,6 +73,7 @@
     "focus-visible": "^5.2.0",
     "heroicons": "^2.0.13",
     "lodash": "^4.17.21",
+    "motion": "^10.16.2",
     "postcss-focus-visible": "^7.1.0",
     "prettier-plugin-tailwindcss": "^0.2.1",
     "tailwind-merge": "^1.8.1",

src/integrations/motionOne.tsx

@@ -0,0 +1,37 @@
+import { component$, useVisibleTask$ } from '@builder.io/qwik'
+import { animate } from 'motion'
+
+export default component$(() => {
+  useVisibleTask$(() => {
+    animate(
+      '#animation-target',
+      {
+        scale: [1, 2, 2, 1, 1],
+        rotate: [0, 0, 270, 270, 0],
+        borderRadius: ['20%', '20%', '50%', '50%', '20%'],
+        backgroundColor: [
+          '#ff008c',
+          '#d309e1',
+          '#9c1aff',
+          '#7700ff',
+          '#ff008c',
+        ],
+      },
+      {
+        duration: 2,
+        easing: 'ease-in-out',
+        repeat: 2,
+        direction: 'alternate',
+      }
+    )
+  })
+  return (
+    <div
+      id="animation-target"
+      // Some tailwind styling for sizing and initial color
+      class="m-auto mt-24 h-52 w-52 bg-slate-500"
+    ></div>
+  )
+})
+
+function yuval() {}