dusted and done

script.js

@@ -1,7 +1,7 @@
 // shery.js 
 // Shery.imageEffect(element, configurations)
 Shery.imageEffect("#back", { style: 5, config: { "a": { "value": 2, "range": [0, 30] }, "b": { "value": -0.98, "range": [-1, 1] }, "zindex": { "value": -9996999, "range": [-9999999, 9999999] }, "aspect": { "value": 1.9298998569384835 }, "gooey": { "value": true }, "infiniteGooey": { "value": true }, "growSize": { "value": 4, "range": [1, 15] }, "durationOut": { "value": 1, "range": [0.1, 5] }, "durationIn": { "value": 1, "range": [0.1, 5] }, "displaceAmount": { "value": 0.5 }, "masker": { "value": true }, "maskVal": { "value": 1.2, "range": [1, 5] }, "scrollType": { "value": 0 }, "geoVertex": { "range": [1, 64], "value": 1 }, "noEffectGooey": { "value": false }, "onMouse": { "value": 1 }, "noise_speed": { "value": 0.2, "range": [0, 10] }, "metaball": { "value": 0.2, "range": [0, 2], "_gsap": { "id": 3 } }, "discard_threshold": { "value": 0.5, "range": [0, 1] }, "antialias_threshold": { "value": 0, "range": [0, 0.1] }, "noise_height": { "value": 0.5, "range": [0, 2] }, "noise_scale": { "value": 10, "range": [0, 100] } }, gooey: true })
-
+// -----------------------------------
 
 
 var elems = document.querySelectorAll(".elem");

style.css

@@ -124,17 +124,25 @@ body {
 
 #heroleft{
     min-width: 50%;
+    margin-top: 50px;
     /* background-color: chartreuse; */
 }
 
 #heroleft .elem{
     height: 125px;
+    position: relative;
     /* background-color: red; */
     overflow: hidden;
 }
 
+#heroleft .elem h1:nth-child(1){
+    top:0;
+}
+
 #heroleft .elem h1{
-    position: relative;
+    position: absolute;
+    top: 100%;
+    left: 0;
     line-height: .9;
     font-family: "kajiro", "gilroy", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     color: #fff;