fix: make starting build at index 1 optional

src/AnimationConfig.ts

@@ -7,6 +7,8 @@ export interface AnimationConfig {
   duration?: number
   interval?: number
   transformOrigiin?: string
+  start?: number
+  end?: number
 }
 
 export interface Animations {
@@ -88,16 +90,18 @@ export function applyInAnimations(el: any, config: ConfigItem) {
 
 export function applyStepAnimation(
   animation: AnimationConfig,
-  to: number,
-  target: any,
+  target: Record<string, number>,
   prop: string,
+  to: number,
 ) {
-  target[prop] = 1
+  if (animation.end) {
+    target[prop] = animation.end
+  }
   const config: any = {
     duration: animation.interval ? animation.interval * to - 1 : (animation.duration ?? 0.1 * to),
     ease: `steps(${to})`,
     delay: animation.delay,
   }
-  config[prop] = to
+  config[prop] = animation.end ?? to
   gsap.to(target, config)
 }

src/LCARSCustomLayout.ts

@@ -49,7 +49,6 @@ export class LCARSCustomLayout extends HTMLElement {
 
   set cards(cards: Array<any>) {
     haCards.value = cards
-    console.log(cards)
   }
 
   setConfig(config: any) {

src/components/RecursiveComponent.vue

@@ -126,7 +126,7 @@ function triggerAnimations() {
     if (props.childrenAnimation) {
       const animation = props.childrenAnimation as AnimationConfig
       if (animation.type === 'build') {
-        applyStepAnimation(animation, children.length, animated, 'children')
+        applyStepAnimation(animation, animated, 'children', children.length)
       }
     } else {
       animated.children = children.length
@@ -137,7 +137,7 @@ function triggerAnimations() {
     if (props.topChildrenAnimation) {
       const animation = props.topChildrenAnimation as AnimationConfig
       if (animation.type === 'build') {
-        applyStepAnimation(animation, topChildren.length, animated, 'top')
+        applyStepAnimation(animation, animated, 'top', topChildren.length)
       }
     } else {
       animated.top = topChildren.length
@@ -148,7 +148,7 @@ function triggerAnimations() {
     if (props.bottomChildrenAnimation) {
       const animation = props.bottomChildrenAnimation as AnimationConfig
       if (animation.type === 'build') {
-        applyStepAnimation(animation, bottomChildren.length, animated, 'bottom')
+        applyStepAnimation(animation, animated, 'bottom', bottomChildren.length)
       }
     } else {
       animated.bottom = bottomChildren.length
@@ -159,7 +159,7 @@ function triggerAnimations() {
     if (props.leftChildrenAnimation) {
       const animation = props.leftChildrenAnimation as AnimationConfig
       if (animation.type === 'build') {
-        applyStepAnimation(animation, leftChildren.length, animated, 'left')
+        applyStepAnimation(animation, animated, 'left', leftChildren.length)
       }
     } else {
       animated.left = leftChildren.length
@@ -170,7 +170,7 @@ function triggerAnimations() {
     if (props.rightChildrenAnimation) {
       const animation = props.rightChildrenAnimation as AnimationConfig
       if (animation.type === 'build') {
-        applyStepAnimation(animation, rightChildren.length, animated, 'right')
+        applyStepAnimation(animation, animated, 'right', rightChildren.length)
       }
     } else {
       animated.right = rightChildren.length