v4-Animation rework

- added JS logic for controlling animations based on text length

- added duplicate elements for looping scroll effect and JS logic for populating them

timer.css

@@ -102,6 +102,7 @@ p {
 }
 
 #InfoBox1 {
+  
 }
 
 #InfoBox2 {
@@ -116,6 +117,13 @@ p {
   border: .4cqh solid;
   border-color: #00A0F3;
   background-color: white;
+}
+
+.rightFadeWrap {
+  mask-image: linear-gradient(to right, black 85%, transparent 100%);
+}
+
+#RightFadeWrapInfoBox3 {
 
 }
 
@@ -140,7 +148,20 @@ p {
   position: relative;
   color: #32B993;
   text-wrap: nowrap;
-  animation: myScroll 12s linear infinite;
+  display: inline-block;
+  padding-right: 4%;
+  transform: translate(.5ch, 0%);
+  /* --- animation-duration = JS VAR --- */
+}
+
+#GoalNameDupe {
+  width: fit-content;
+  position: relative;
+  color: #32B993;
+  text-wrap: nowrap;
+  padding-right: 4%;
+  transform: translate(.5ch, 0%);
+  /* --- animation-duration = JS VAR --- */
 }
 
 #GoalProgressWrap {
@@ -161,7 +182,6 @@ p {
 
 #TopUsers {
   margin-bottom: 2%;
-  transform: translate(0%, 0%) scale(1);
   font-weight: normal;
   color: #404145;
 }
@@ -187,21 +207,55 @@ p {
   position: relative;
   color: #32B993;
   text-align: left;
+  display: inline-block;
+  padding-right: 4%;
+  transform: translate(.5ch, 0%);
+}
+
+.giftUserNameDupe {
+  width: fit-content;
+  margin-left: 0%;
+  position: relative;
+  color: #32B993;
+  text-align: left;
+  padding-right: 4%;
+  transform: translate(.5ch, 0%);
 }
 
 #GiftUserName1 {
-  animation: myScroll 9s linear infinite;
+  /* --- animation-duration = JS VAR --- */
 }
+
 #GiftUserName2 {
-  animation: myScroll 9s 3s linear infinite;
+  /* --- animation-duration = JS VAR --- */
+  animation-delay: 3s;
 }
+
 #GiftUserName3 {
-  animation: myScroll 9s 6s linear infinite;
+  /* --- animation-duration = JS VAR --- */
+  animation-delay: 6s;
+}
+
+#GiftUserNameDupe1 {
+  /* --- animation-duration = JS VAR --- */
+}
+
+#GiftUserNameDupe2 {
+  /* --- animation-duration = JS VAR --- */
+  animation-delay: 3s;
+}
+
+#GiftUserNameDupe3 {
+  /* --- animation-duration = JS VAR --- */
+  animation-delay: 6s;
 }
 
 .scrollWrap {
   width: 100%;
-  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 85%, transparent 100%);
+}
+
+.fadeLeft {
+  mask-image: linear-gradient(to right, transparent 0%, black 1ch);
 }
 
 #ScrollWrapGoal {
@@ -213,16 +267,22 @@ p {
 
 .scrollWrapW {
   width: fit-content;
+  display: flex;
 }
 
 #ScrollWrapGoalW {
 }
 
+.hide {
+  display: none;
+}
+
+.scrollAnim {
+  animation: myScroll linear infinite;
+}
+
 @keyframes myScroll {
   0% {left: 0%; top: 0%;}
-  10% {left: 0%; top: 0%;}
-  85% {left: -100%; top: 0%;}
-  89.99% {left: -100%; top: 0%;}
-  90% {left: 0%; top: 100%;}
-  100% {left: 0%; top: 0%;}
+  42% {left: 0%; top: 0%;}
+  100% {left: -54%; top: 0%;}
 }