WIP

dist/app.js

@@ -7,7 +7,20 @@
   \***********************/
 /***/ (() => {
 
-
+var observer = new IntersectionObserver(function (entries) {
+  entries.forEach(function (entry) {
+    if (entry.isIntersecting) {
+      entry.target.classList.add('visible');
+    } else {
+      entry.target.classList.remove('visible');
+    }
+  });
+}, {
+  threshold: 0.1 // adjust as needed
+});
+document.querySelectorAll('.watch-vp').forEach(function (el) {
+  observer.observe(el);
+});
 
 /***/ }),
 

dist/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/app.js": "/app.js?id=099e96d934e937b07341f2ca9fb82ec2",
+    "/app.js": "/app.js?id=1121838d4c96cc32c63518343f8e22d9",
     "/app.css": "/app.css?id=159c4185aeca54a7f71b7d4d18e14c75"
 }

src/js/app.js

@@ -0,0 +1,15 @@
+const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            entry.target.classList.add('visible');
+        } else {
+            entry.target.classList.remove('visible');
+        }
+    });
+}, {
+    threshold: 0.1 // adjust as needed
+});
+
+document.querySelectorAll('.watch-vp').forEach(el => {
+    observer.observe(el);
+});

tpl/flex_intro_block.tpl

@@ -2,7 +2,7 @@
     <div class="container">
         <div class="row">
             <div class="col">
-                <h1>{{ headline }}</h1>
+                <h1 class="watch-vp">{{ headline }}</h1>
                 {{#if sub_headline}}
                     <p class="sub-headline">{{ sub_headline }}</p>
                 {{/if}}