Spin 114 - improved animations for red planet and blue section planets

blocks/deco-planets/deco-planets.css

@@ -84,3 +84,10 @@
 .deco-planets-v4 .planet-two {
     width: var(--size-small);
 }
+
+@media screen and (max-width: 899.98px) {
+    .hide-deco-planets-on-mobile .deco-planets,
+    .hide-deco-planets-on-mobile.deco-planets {
+        display: none;
+    }
+}

blocks/footer/footer.css

@@ -2,7 +2,6 @@ footer {
   height: var(--footer-height);
   padding: var(--footer-padding-horizontal) var(--footer-padding-vertical);
   background-color: var(--footer-background-color);
-  color: var(--footer-color);
   font-size: var(--body-font-size-xs);
 }
 

blocks/form/form.css

@@ -36,6 +36,12 @@
   position: relative;
 }
 
+.section-ready-to-fly .columns > div > div:first-child h3,
+.section-ready-to-fly .columns picture {
+  position: relative;
+  z-index: -1;
+}
+
 .section-ready-to-fly .columns > div > div:first-child h3::before,
 .section-ready-to-fly .columns picture::before,
 .section-ready-to-fly .columns picture::after {

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) => {

generate-star-svg.js

@@ -8,23 +8,23 @@ const fs = require('fs');
 function generateStarSVGs() {
   const starsLayerConfigurations = [
     {
-      density: 0.3, // how dense / how many stars there are in this layer
+      density: 0.25, // how dense / how many stars there are in this layer
       starSize: '1', // the size of a singe star
     },
     {
-      density: 0.25,
+      density: 0.2,
       starSize: '1.5',
     },
     {
-      density: 0.2,
+      density: 0.15,
       starSize: '2',
     },
     {
-      density: 0.15,
+      density: 0.1,
       starSize: '2.5',
     },
     {
-      density: 0.1,
+      density: 0.05,
       starSize: '3',
     },
   ];
@@ -48,7 +48,7 @@ function generateStarSVGs() {
     }
 
     starSvg += '</svg>';
-    fs.writeFileSync(`images/layer${index}.svg`, starSvg);
+    fs.writeFileSync(`images/stars/layer${index}.svg`, starSvg);
   });
 }