From bd599270744af2cddb857658082517fd7af08911 Mon Sep 17 00:00:00 2001
From: voggenauerm <m.voggenauer@techdivision.com>
Date: Tue, 17 Oct 2023 18:25:15 +0200
Subject: [PATCH] SPIN-114 // Adjust start and end of word cloud animation,
 adjust how many words are on screen at the same time

---
 blocks/word-cloud/word-cloud.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/blocks/word-cloud/word-cloud.js b/blocks/word-cloud/word-cloud.js
index 9ab675b..044cf15 100644
--- a/blocks/word-cloud/word-cloud.js
+++ b/blocks/word-cloud/word-cloud.js
@@ -1,10 +1,16 @@
 import {
+  registerCustomScrollLinkedVariable,
   registerElementDimensionsVariables,
-  registerScrollLinkedVariable,
 } from '../../scripts/scroll-linked-variable.js';
 
 export default function decorate(block) {
-  registerScrollLinkedVariable(block.parentElement);
+  registerCustomScrollLinkedVariable(
+    block.parentElement,
+    // eslint-disable-next-line max-len
+    (elementDistanceToWindowTop) => elementDistanceToWindowTop - 300,
+    // eslint-disable-next-line max-len
+    (elementDistanceToWindowTop, elementRect) => elementDistanceToWindowTop + elementRect.height + -1 * window.innerHeight + 200,
+  );
   registerElementDimensionsVariables(block);
 
   const wordPositions = [
@@ -16,7 +22,7 @@ export default function decorate(block) {
     { x: 80, y: 65 },
   ];
   const wordCount = block.children.length;
-  const overLappingAnimations = 3;
+  const overLappingAnimations = 4;
   const animationFrame = (1 / (wordCount + (overLappingAnimations - 1)));
   const animationDuration = animationFrame * overLappingAnimations;
   Array.from(block.children).forEach((word, index) => {