fix: minor fixes on animations

deco-sites · Jan 7, 2024 · 7b53881 · 7b53881
1 parent dc746df
commit 7b53881
Show file tree

Hide file tree

Showing 4 changed files with 708 additions and 170 deletions.
diff --git a/animations/timelines/editor.ts b/animations/timelines/editor.ts
@@ -1,14 +1,89 @@
 import { AnimationTimeline } from "deco-sites/starting/animations/utils.ts";
 
 const COMPONENT_LIBRARY_SEQUENCE: AnimationTimeline = [
+  [
+    "#library-cursor-muriel",
+    {
+      opacity: [0, 0, 1],
+      x: ["300px", "520px"],
+      y: ["800px", "530px"],
+    },
+    {
+      at: 0.08,
+      duration: 1,
+      easing: "ease-out",
+    },
+  ],
+  [
+    "#library-cursor-muriel",
+    {
+      x: "270px",
+      y: "250px",
+    },
+    {
+      at: 1.08,
+      duration: 1,
+      easing: "ease-out",
+    },
+  ],
+  [
+    "#library-cursor-augusto",
+    {
+      opacity: [0, 0, 1],
+      x: ["300px", "640px"],
+      y: ["800px", "530px"],
+    },
+    {
+      at: 1,
+      duration: 1,
+      easing: "ease-out",
+    },
+  ],
+  [
+    "#library-cursor-augusto",
+    {
+      x: "670px",
+      y: "180px",
+    },
+    {
+      at: 2,
+      duration: 1,
+      easing: "ease-out",
+    },
+  ],
+  [
+    "#library-cursor-tiago",
+    {
+      opacity: [0, 0, 1],
+      x: ["800px", "850px"],
+      y: ["800px", "530px"],
+    },
+    {
+      at: 1.2,
+      duration: 1,
+      easing: "ease-out",
+    },
+  ],
+  [
+    "#library-cursor-tiago",
+    {
+      x: "690px",
+      y: "400px",
+    },
+    {
+      at: 2.2,
+      duration: 1,
+      easing: "ease-out",
+    },
+  ],
   [
     "#library",
     {
       opacity: [0, 1],
       scale: [0.3, 1],
     },
     {
-      at: 1.05,
+      at: 0.58,
       duration: 0.5,
       easing: "ease-out",
     },
@@ -23,7 +98,7 @@ const COMPONENT_LIBRARY_SEQUENCE: AnimationTimeline = [
       transformOrigin: "0 0",
     },
     {
-      at: 2.0,
+      at: 1.08,
       duration: 1,
     },
   ],
@@ -35,7 +110,7 @@ const COMPONENT_LIBRARY_SEQUENCE: AnimationTimeline = [
       scale: [0.5, 0.6],
     },
     {
-      at: 3.0,
+      at: 2.08,
       duration: 0.2,
     },
   ],
@@ -49,10 +124,11 @@ const COMPONENT_LIBRARY_SEQUENCE: AnimationTimeline = [
       transformOrigin: "201px 188px",
     },
     {
-      at: 3.2,
+      at: 2.7,
       duration: 0.5,
     },
   ],
+
   [
     "#library-product-description",
     {
@@ -63,7 +139,7 @@ const COMPONENT_LIBRARY_SEQUENCE: AnimationTimeline = [
       transformOrigin: "0 0",
     },
     {
-      at: 2.2,
+      at: 2,
       duration: 1,
     },
   ],
@@ -75,7 +151,7 @@ const COMPONENT_LIBRARY_SEQUENCE: AnimationTimeline = [
       scale: [0.5, 0.6],
     },
     {
-      at: 3.2,
+      at: 3,
       duration: 0.2,
     },
   ],
@@ -89,7 +165,7 @@ const COMPONENT_LIBRARY_SEQUENCE: AnimationTimeline = [
       transformOrigin: "182px 110px",
     },
     {
-      at: 3.4,
+      at: 3.2,
       duration: 0.5,
     },
   ],
@@ -103,7 +179,7 @@ const COMPONENT_LIBRARY_SEQUENCE: AnimationTimeline = [
       transformOrigin: "0 0",
     },
     {
-      at: 3.0,
+      at: 2.2,
       duration: 1,
     },
   ],
@@ -115,7 +191,7 @@ const COMPONENT_LIBRARY_SEQUENCE: AnimationTimeline = [
       scale: [0.5, 0.6],
     },
     {
-      at: 4.0,
+      at: 3.2,
       duration: 0.2,
     },
   ],
@@ -129,14 +205,15 @@ const COMPONENT_LIBRARY_SEQUENCE: AnimationTimeline = [
       transformOrigin: "182px 110px",
     },
     {
-      at: 4.2,
+      at: 3.5,
       duration: 0.5,
     },
   ],
 ];
 const REALTIME_EDITOR_SEQUENCE: AnimationTimeline = [
   [
-    "#realtime-cursor-tiago", {
+    "#realtime-cursor-tiago",
+    {
       opacity: [0, 0, 1],
       x: ["300px", "450px"],
       y: ["800px", "590px"],
@@ -148,9 +225,10 @@ const REALTIME_EDITOR_SEQUENCE: AnimationTimeline = [
     },
   ],
   [
-    "#realtime-cursor-tiago", {
+    "#realtime-cursor-tiago",
+    {
       x: "350px",
-      y: "400px"
+      y: "400px",
     },
     {
       at: 1.08,
@@ -159,7 +237,8 @@ const REALTIME_EDITOR_SEQUENCE: AnimationTimeline = [
     },
   ],
   [
-    "#product-frame", {
+    "#product-frame",
+    {
       opacity: [0, 1],
       x: ["100px", "0px"],
       y: ["190px", "0px"],
@@ -170,39 +249,43 @@ const REALTIME_EDITOR_SEQUENCE: AnimationTimeline = [
     },
   ],
   [
-    "#realtime-cursor-muriel", {
+    "#realtime-cursor-muriel",
+    {
       opacity: [0, 0, 1],
       x: ["400px", "540px"],
-      y: ["0px", "120px"]
+      y: ["0px", "120px"],
     },
     {
       at: 0.2,
       duration: 0.8,
-    }
+    },
   ],
   [
-    "#realtime-cursor-augusto", {
+    "#realtime-cursor-augusto",
+    {
       opacity: [0, 0, 1],
       x: ["700px", "800px"],
-      y: ["700px", "360px"]
+      y: ["700px", "360px"],
     },
     {
       at: 0.2,
       duration: 0.8,
-    }
+    },
   ],
   [
-    "#realtime-cursor-augusto", {
-      x: "750px"
+    "#realtime-cursor-augusto",
+    {
+      x: "750px",
     },
     {
       at: 1.28,
       duration: 0.8,
-    }
+    },
   ],
   [
-    "#product-form, #button-frame-br, #button-frame-bl, #button-frame-tr, #button-frame-tl", {
-      x: ["50px", 0]
+    "#product-form, #button-frame-br, #button-frame-bl, #button-frame-tr, #button-frame-tl",
+    {
+      x: ["50px", 0],
     },
     {
       at: 1.28,
@@ -265,9 +348,9 @@ const REALTIME_EDITOR_SEQUENCE: AnimationTimeline = [
   ],
   [
     "#realtime-cursor-muriel",
-    { 
+    {
       x: "830px",
-      y:"120px"
+      y: "120px",
     },
     {
       at: 1.8,
@@ -335,8 +418,8 @@ export const DESIGN_SYSTEM_SEQUENCE: AnimationTimeline = [
     "#cursor-design-system",
     {
       opacity: [0, 0, 1],
-      x: ["-115px", "171px"],
-      y: ["200px", "414px"],
+      x: ["-115px", "187px"],
+      y: ["800px", "631px"],
     },
     {
       at: 0.08,
@@ -348,8 +431,6 @@ export const DESIGN_SYSTEM_SEQUENCE: AnimationTimeline = [
     "#cursor-design-system",
     {
       scale: ["1.0", "1.2", "1.0"],
-      x: "171px",
-      y: "414px",
     },
     {
       at: 1.08,
@@ -383,8 +464,8 @@ export const DESIGN_SYSTEM_SEQUENCE: AnimationTimeline = [
   [
     "#cursor-design-system",
     {
-      x: "187px",
-      y: "631px",
+      x: "171px",
+      y: "414px",
     },
     {
       at: 2.28,
@@ -561,7 +642,7 @@ const APPS_INTEGRATIONS_SEQUENCE: AnimationTimeline = [
     },
   ],
   [
-    "#apps-mask circle" ,
+    "#apps-mask circle",
     {
       // @ts-ignore svg property
       r: ["0px", "250px"],
@@ -572,11 +653,7 @@ const APPS_INTEGRATIONS_SEQUENCE: AnimationTimeline = [
       easing: "ease",
     },
   ],
-  [
-    "#cursor-apps",
-    { x: "395px", y: "450px" },
-    { duration: 1, at: 1.28 },
-  ],
+  ["#cursor-apps", { x: "395px", y: "450px" }, { duration: 1, at: 1.28 }],
   [
     "#cursor-apps",
     {
@@ -633,11 +710,7 @@ const APPS_INTEGRATIONS_SEQUENCE: AnimationTimeline = [
       easing: "ease",
     },
   ],
-  [
-    "#cursor-apps",
-    { x: "185px", y: "530px" },
-    { duration: 1, at: 2.48 },
-  ],
+  ["#cursor-apps", { x: "185px", y: "530px" }, { duration: 1, at: 2.48 }],
   [
     "#cursor-apps",
     {