gotta implement scroll offset

src/components/UI/index.vue

@@ -40,8 +40,7 @@
       <g
         v-for="(item, index) in renderArr"
         :key="index"
-        class="message"
-        id="cards"
+        class="test"
         transform="translate(0, 0)"
       >
         <transition

src/composables/anims/useUIindexAnims.ts

@@ -1,6 +1,5 @@
 import { inject, onMounted } from "vue";
 export default function useUIindexAnims() {
-  interface Done {}
   const anime: any = inject("animejs");
   const timeline = anime.timeline({ loop: true });
   const msgOffset = {
@@ -12,44 +11,45 @@ export default function useUIindexAnims() {
   let msg: any;
   let cardsDiv: any;
   let prevCardH = 0;
-
+  let totalHeight = 0;
   let messenger: any;
+  let currentCard: Element;
+  let renderList: NodeList;
+
   onMounted(() => {
     messenger = document.getElementById("messenger");
     winW = messenger.clientWidth;
   });
 
-  function getCardHeight(el: SVGSVGElement) {
+  function getCardHeight(el: any) {
     const cardHeight = el.getBBox().height;
     return cardHeight;
   }
 
-  async function getAllCardsHeight() {
-    let cards: [];
-    cardsDiv = await document.getElementById("cardsDiv");
-    cards = cardsDiv.querySelectorAll(".message");
-    let totalHeight = 0;
-    for (const card of cards) {
-      let height = getCardHeight(card);
-      totalHeight += height;
-      if (totalHeight >= 500) {
-        console.log("update scroll view");
+  function calculateAllCardsHeight() {
+    const cards = document.querySelectorAll(".test");
+    if (cards.length) {
+      renderList = cards;
+      currentCard = cards.item(cards.length - 1);
+      for (const card of cards) {
+        const height = getCardHeight(card);
+        totalHeight += height;
       }
     }
   }
 
   async function beforeEnter(el: SVGGElement) {
     modifier = el.className.baseVal.substring(0, 2);
+    calculateAllCardsHeight();
   }
 
-  async function enter(el: SVGGElement, done: any) {
-    getAllCardsHeight();
+  async function stackAnimate(el: any, done: any) {
     const paddingLeft = 40;
     msg = await document.getElementById(el.id);
     const rect = msg.getBoundingClientRect();
     const msgW = rect.width;
     const msgH = rect.height;
-    cardsDiv = await document.getElementById("cardsDiv");
+    cardsDiv = document.getElementById("cardsDiv");
     const cdBox = cardsDiv.getBBox();
 
     if (prevCardH === 0) {
@@ -90,6 +90,29 @@ export default function useUIindexAnims() {
         offset: 1000
       });
     done;
+
+  }
+
+  function OffsetMessage() {
+    // TODO implement individual offset function
+
+  }
+
+  function scrollOffset(l: NodeList) {
+  }
+
+  async function scrollAnimate(el: any, done: any) {
+    // get incoming card height
+    const height = getCardHeight(el);
+    scrollOffset(renderList)
+  }
+
+  async function enter(el: SVGGElement, done: any) {
+    if (totalHeight < 500) {
+      stackAnimate(el, done)
+    } else {
+      scrollAnimate(el, done);
+    }
   }
   return {
     beforeEnter,