fix: animation order

deco-sites · Jan 8, 2024 · d08b677 · d08b677
1 parent 6fe1c95
commit d08b677
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 16 deletions.
diff --git a/animations/timelines/editor.ts b/animations/timelines/editor.ts
@@ -128,7 +128,7 @@ const COMPONENT_LIBRARY_SEQUENCE: AnimationTimeline = [
       duration: 0.5,
     },
   ],
-  
+
   [
     "#library-product-description",
     {
@@ -953,13 +953,15 @@ const CONTENT_MODELING_SEQUENCE: AnimationTimeline = [
   ],
 ];
 
-export const EDITOR_TIMELINES: AnimationTimeline[] = [
-  COMPONENT_LIBRARY_SEQUENCE,
-  REALTIME_EDITOR_SEQUENCE,
-  DESIGN_SYSTEM_SEQUENCE,
-  FULL_CODE_SEQUENCE,
-  APPS_INTEGRATIONS_SEQUENCE,
-  DESIGN_SYSTEM_SEQUENCE,
-  ANALYTICS_SEQUENCE,
-  CONTENT_MODELING_SEQUENCE,
-];
+export const EDITOR_TIMELINES: {
+  [key: string]: AnimationTimeline;
+} = {
+  "component-library": COMPONENT_LIBRARY_SEQUENCE,
+  "no-code-editing": REALTIME_EDITOR_SEQUENCE,
+  "design-system": DESIGN_SYSTEM_SEQUENCE,
+  "full-code-editing": FULL_CODE_SEQUENCE,
+  "integrate-extend": APPS_INTEGRATIONS_SEQUENCE,
+  "multivariate-testing": DESIGN_SYSTEM_SEQUENCE,
+  monitoring: ANALYTICS_SEQUENCE,
+  "content-modeling": CONTENT_MODELING_SEQUENCE,
+};
diff --git a/islands/NRF/Editor.tsx b/islands/NRF/Editor.tsx
@@ -41,8 +41,6 @@ const AnimationComponents = {
 };
 
 export default function Editor({ title, features }: Props) {
-  const currentFeature = useSignal<number | null>(null);
-
   useEffect(() => {
     let lastScrollY = window.scrollY;
     let isScrollingDown = true;
@@ -116,7 +114,7 @@ export default function Editor({ title, features }: Props) {
         { duration: 0.3 }
       );
 
-      timeline(EDITOR_TIMELINES[index]);
+      timeline(EDITOR_TIMELINES[target.id]);
 
       animate(
         `#feature-title-${index}`,

diff --git a/sections/NRF/Hero.tsx b/sections/NRF/Hero.tsx
@@ -29,15 +29,15 @@ export default function Hero({ title, subtitle, cta, alert }: Props) {
       id="hero"
       class="relative bg-black min-h-screen space-y-16 lg:space-y-20"
     >
-      <div class="mt-36 lg:mt-48 max-w-fit mx-auto flex flex-col items-center gap-16 lg:gap-20">
+      <div class="max-w-fit mx-auto flex flex-col items-center gap-16 lg:gap-20">
         {alert?.text && (
           <div class="rounded-[56px] border border-white/15 bg-white/5 py-2 px-4">
             {alert.text}
           </div>
         )}
         <div class="flex flex-col items-center gap-6 lg:gap-12">
           <div
-            class="mx-6 lg:mx-0 inline-block text-[36px] lg:text-[104px] text-center leading-[110%] lg:leading-[100%] font-medium text-white max-w-lg lg:max-w-none"
+            class="mt-36 lg:mt-48 mx-6 lg:mx-0 inline-block text-[36px] lg:text-[104px] text-center leading-[110%] lg:leading-[100%] font-medium text-white max-w-lg lg:max-w-none"
             dangerouslySetInnerHTML={{
               __html: title,
             }}