smooth infinite scrolling

scripts/taskList.js

@@ -282,6 +282,11 @@ function importStyles() {
 		loadGoogleFont(styles.taskFontFamily);
 	}
 
+	document.documentElement.style.setProperty(
+		"--gap-between-scrolls",
+		`${configs.animation.gapBetweenScrolls}px` ?? "0px"
+	);
+
 	const stylesToImport = Object.keys(styles).filter((style) => {
 		return !style.includes("Background");
 	});
@@ -2591,9 +2596,9 @@ async function tests() {
 		`followRythonDev2`,
 		`followRythonDev3`,
 		`followRythonDev4`,
-		`followRythonDev5`,
+		// `followRythonDev5`,
-		`followRythonDev6`,
+		// `followRythonDev6`,
-		`followRythonDev7`,
+		// `followRythonDev7`,
 	];
 
 	for (let i = 0; i < listOfStreamers.length; i++) {
@@ -2617,24 +2622,20 @@ async function checkToAnimate() {
 	let taskWrapper = document.querySelector(".task-wrapper");
 	let taskWrapperHeight = taskWrapper.clientHeight;
 
+	let secondary = document.querySelector(".secondary");
+
 	// scroll task wrapper up and down once
 	if (taskContainerHeight > taskWrapperHeight && !scrolling) {
 		if (!scrolling) {
-			document.querySelector(".secondary").style.display = "flex";
+			secondary.style.display = "flex";
 
 			let finalHeight =
 				taskContainerHeight + configs.animation.gapBetweenScrolls;
 
-			let primaryKeyFrames = [
+			let keyframes = [
 				{ transform: `translateY(0)` },
 				{ transform: `translateY(-${finalHeight}px)` },
 			];
-
-			let secondaryKeyFrames = [
-				{ transform: `translateY(${finalHeight}px)` },
-				{ transform: `translateY(0)` },
-			];
-
 			let scrollingSpeed = (finalHeight / scrollSpeed) * 1000;
 
 			let options = {
@@ -2645,11 +2646,11 @@ async function checkToAnimate() {
 
 			primaryAnimation = document
 				.querySelector(".primary")
-				.animate(primaryKeyFrames, options);
+				.animate(keyframes, options);
 
 			secondaryAnimation = document
 				.querySelector(".secondary")
-				.animate(secondaryKeyFrames, options);
+				.animate(keyframes, options);
 
 			primaryAnimation.play();
 			secondaryAnimation.play();
@@ -2659,7 +2660,7 @@ async function checkToAnimate() {
 			addAnimationListeners();
 		}
 	} else if (!scrolling) {
-		document.querySelector(".secondary").style.display = "none";
+		secondary.style.display = "none";
 
 		// cancel animations
 		if (primaryAnimation) {

styles/taskList.css

@@ -38,6 +38,7 @@
   --task-margin-bottom: 5px;
   --task-horizontal-padding: 5px;
   --task-vertical-padding: 5px;
+  --gap-between-scrolls: 0;
 }
 
 * {
@@ -82,7 +83,6 @@
   transition: height 0.5s ease-out;
 }
 #main-container .task-wrapper {
-  animation: scrollTasks 20s linear infinite;
   width: 100%;
   height: 100%;
   overflow: hidden;
@@ -96,8 +96,10 @@
   border-radius: var(--body-border-radius);
   z-index: 1;
 }
+#main-container .task-wrapper .task-container.secondary {
+  margin-top: var(--gap-between-scrolls);
+}
 #main-container .task-wrapper .task-container {
-  position: absolute;
   width: inherit;
   left: 0;
   display: flex;

styles/taskList.css.map

@@ -1 +1 @@
-{"version":3,"sources":["taskList.scss","taskList.css"],"names":[],"mappings":"AAAA;EACC,uBAAA;EACA,yBAAA;EAEA,gDAAA;EAEA,6BAAA;EACA,+BAAA;EACA,8BAAA;EAEA,mCAAA;EACA,iCAAA;EAEA,iCAAA;EACA,+BAAA;EAEA,6CAAA;EAEA,0BAAA;EACA,4BAAA;EACA,2BAAA;EAEA,wBAAA;EACA,gCAAA;EACA,0BAAA;EACA,0BAAA;EAEA,8BAAA;EAEA,2CAAA;EAEA,wBAAA;EACA,0BAAA;EACA,yBAAA;EAEA,sBAAA;EAEA,oBAAA;EACA,kBAAA;EACA,4BAAA;EAEA,2CAAA;EAEA,8BAAA;EACA,sBAAA;EACA,wBAAA;EAEA,0BAAA;EACA,wBAAA;EACA,yBAAA;EAEA,8BAAA;EACA,4BAAA;EAEA,yBAAA;EACA,8BAAA;EACA,4BAAA;AChBD;;ADmBA;EACC,SAAA;EACA,UAAA;EACA,sBAAA;AChBD;;ADoBA;EACC,WAAA;EACA,aAAA;EAEA,aAAA;EACA,sBAAA;EAEA,8EAAA;EAGA,mDAAA;EAEA,yEAAA;EACA,6CAAA;EAEA,oCAAA;ACvBD;ADyBC;EACC,aAAA;EACA,8BAAA;EAEA,wEAAA;EAEA,mEAAA;EACA,0CAAA;EAEA,+BAAA;EACA,0CAAA;EAEA,sCAAA;EACA,kCAAA;EACA,sCAAA;AC3BF;AD6BE;EACC,6BAAA;AC3BH;AD6BE;EACC,UAAA;AC3BH;AD8BE;EACC,4CAAA;AC5BH;ADgCC;EACC,gCAAA;AC9BF;ADiCC;EACC,0CAAA;EAEA,WAAA;EACA,YAAA;EAEA,gBAAA;EAEA,kBAAA;EAEA,wCAAA;EAEA,6BAAA;EACA,oCAAA;EACA,gCAAA;EAEA,+BAAA;EAEA,+DAAA;EACA,wCAAA;EAEA,UAAA;ACvCF;ADyCE;EACC,kBAAA;EACA,cAAA;EAEA,OAAA;EAEA,aAAA;EACA,sBAAA;EAEA,mBAAA;EAEA,iBAAA;EACA,kBAAA;EAEA,kCAAA;EAEA,sCAAA;AC7CH;ADgDG;EACC,oEAAA;EAEA,wCAAA;EAEA,wCAAA;EAEA,wBAAA;EAEA,+DAAA;EACA,wCAAA;AClDJ;ADoDI;EACC,wCAAA;EACA,oCAAA;AClDL;ADqDI;EACC,mBAAA;ACnDL;ADqDK;EACC,aAAA;ACnDN;ADqDM;EACC,uBAAA;EACA,iCAAA;EACA,iBAAA;ACnDP;ADsDM;EACC,oBAAA;EACA,kCAAA;EACA,0CAAA;EACA,4BAAA;EACA,gBAAA;ACpDP;ADwDK;EACC,kCAAA;ACtDN;ADwDM;EACC,6BAAA;EACA,kCAAA;ACtDP;AD2DK;EACC,8CAAA;EACA,mCAAA;EAEA,gFAAA;EAGA,8CAAA;EAEA,uBAAA;EAAA,kBAAA;EAEA,4DAAA;AC9DN","file":"taskList.css"}
+{"version":3,"sources":["taskList.scss","taskList.css"],"names":[],"mappings":"AAAA;EACC,uBAAA;EACA,yBAAA;EAEA,gDAAA;EAEA,6BAAA;EACA,+BAAA;EACA,8BAAA;EAEA,mCAAA;EACA,iCAAA;EAEA,iCAAA;EACA,+BAAA;EAEA,6CAAA;EAEA,0BAAA;EACA,4BAAA;EACA,2BAAA;EAEA,wBAAA;EACA,gCAAA;EACA,0BAAA;EACA,0BAAA;EAEA,8BAAA;EAEA,2CAAA;EAEA,wBAAA;EACA,0BAAA;EACA,yBAAA;EAEA,sBAAA;EAEA,oBAAA;EACA,kBAAA;EACA,4BAAA;EAEA,2CAAA;EAEA,8BAAA;EACA,sBAAA;EACA,wBAAA;EAEA,0BAAA;EACA,wBAAA;EACA,yBAAA;EAEA,8BAAA;EACA,4BAAA;EAEA,yBAAA;EACA,8BAAA;EACA,4BAAA;EAEA,wBAAA;ACjBD;;ADoBA;EACC,SAAA;EACA,UAAA;EACA,sBAAA;ACjBD;;ADqBA;EACC,WAAA;EACA,aAAA;EAEA,aAAA;EACA,sBAAA;EAEA,8EAAA;EAGA,mDAAA;EAEA,yEAAA;EACA,6CAAA;EAEA,oCAAA;ACxBD;AD0BC;EACC,aAAA;EACA,8BAAA;EAEA,wEAAA;EAEA,mEAAA;EACA,0CAAA;EAEA,+BAAA;EACA,0CAAA;EAEA,sCAAA;EACA,kCAAA;EACA,sCAAA;AC5BF;AD8BE;EACC,6BAAA;AC5BH;AD8BE;EACC,UAAA;AC5BH;AD+BE;EACC,4CAAA;AC7BH;ADiCC;EACC,gCAAA;AC/BF;ADkCC;EACC,WAAA;EACA,YAAA;EAEA,gBAAA;EAEA,kBAAA;EAEA,wCAAA;EAEA,6BAAA;EACA,oCAAA;EACA,gCAAA;EAEA,+BAAA;EAEA,+DAAA;EACA,wCAAA;EAEA,UAAA;ACvCF;ADyCE;EACC,sCAAA;ACvCH;AD0CE;EAEC,cAAA;EAEA,OAAA;EAEA,aAAA;EACA,sBAAA;EAEA,mBAAA;EAEA,iBAAA;EACA,kBAAA;EAEA,kCAAA;EAEA,sCAAA;AC/CH;ADkDG;EACC,oEAAA;EAEA,wCAAA;EAEA,wCAAA;EAEA,wBAAA;EAEA,+DAAA;EACA,wCAAA;ACpDJ;ADsDI;EACC,wCAAA;EACA,oCAAA;ACpDL;ADuDI;EACC,mBAAA;ACrDL;ADuDK;EACC,aAAA;ACrDN;ADuDM;EACC,uBAAA;EACA,iCAAA;EACA,iBAAA;ACrDP;ADwDM;EACC,oBAAA;EACA,kCAAA;EACA,0CAAA;EACA,4BAAA;EACA,gBAAA;ACtDP;AD0DK;EACC,kCAAA;ACxDN;AD0DM;EACC,6BAAA;EACA,kCAAA;ACxDP;AD6DK;EACC,8CAAA;EACA,mCAAA;EAEA,gFAAA;EAGA,8CAAA;EAEA,uBAAA;EAAA,kBAAA;EAEA,4DAAA;AChEN","file":"taskList.css"}

styles/taskList.scss

@@ -55,6 +55,8 @@
 	--task-margin-bottom: 5px;
 	--task-horizontal-padding: 5px;
 	--task-vertical-padding: 5px;
+
+	--gap-between-scrolls: 0;
 }
 
 * {
@@ -114,8 +116,6 @@
 	}
 
 	.task-wrapper {
-		animation: scrollTasks 20s linear infinite;
-
 		width: 100%;
 		height: 100%;
 
@@ -136,8 +136,12 @@
 
 		z-index: 1;
 
+		.task-container.secondary {
+			margin-top: var(--gap-between-scrolls);
+		}
+
 		.task-container {
-			position: absolute;
+			// position: absolute;
 			width: inherit;
 
 			left: 0;