naja – dein intersectionObserver Code war so nicht zu gebrauchen oder?
( ich glaube threshold war so falsch, ein Sonderzeichen war nicht ganz richtig etc. da habe ich dann lieber auf bekanntes zurückgegriffen – wobei : warum das mit dem “eintrag” funktioniert muss ich nochmal checken )

PS: wenn du die Klasse übrigens während diese Seite durchgescrollt wurde behalten möchtest lösche die else condition.

PPS: ich glaube das [].slice.call ist ein wenig Oldscool
wenn du die Zeile austauschst gegen:

var elements = Array.from(document.querySelectorAll(".scrollanimation"));

ist es am Puls der Zeit ;)

aha – ich sehe den Fehler:

schau mal wo du das css eingesetzt hast:

@keyframes anim-lineDown

da fehlt hinten eine schließende geschweifte Klammer
dadurch ist das nachfolgende css ungültig:

PS : Lies mal bitte den Absatz oben bei : Enfold – Performance dort steht unter anderem :

HTTP/2 is optimized for using minified files and compression of files is no longer recommended: read more. Therefore since 5.7 by default minified files are selected.

daher empfehle ich auch eher die Minified Files zu nutzen.

ich sehe doch das es funktioniert – die Klasse sichtbar wird dynamisch eingefügt/entfernt.
nur das css ist noch nicht vorhanden.

Eventuell musst du das Merging von Enfold neu laden. ( unter Perfomance ganz unten – switch setzen und “Delete Old CSS And JS Files?” ausführen)

eventuell kannst du noch abwarten bis das DOM geladen ist :
(das kann ich in den Developer Tools nicht testen)

document.addEventListener("DOMContentLoaded", function() {
	  var elements = [].slice.call(document.querySelectorAll(".scrollanimation"));
		
		if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype){
			let elementObserver = new IntersectionObserver(function(entries, observer) {
				entries.forEach(function(entry) {
					if (entry.isIntersecting) {
						entry.target.classList.add("sichtbar");

					}
					else {
						entry.target.classList.remove("sichtbar");
					}  
				});

			}, {
				root: null,
				threshold: 0.1,
				rootMargin: "-100px 0px -100px 0px",
			});
			
			elements.forEach(function(element) {
				elementObserver.observe(element);
			});
	  	}
});

nimm jetzt mal – ich beobachte jetzt nur noch das Element selbst – nicht mehr den Wrapper – da du die klasse mal im Textblock hast – mal als heading – dann wieder im Footer – egal so geht es:
bei dem Plugin könnte es sein, dass man <script> mit dabei haben muss? das kann ich dir nicht beantworten deshalb mal so wie du es vorhin hattest:

	  var elements = [].slice.call(document.querySelectorAll(".scrollanimation"));
		
		if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype){
			let elementObserver = new IntersectionObserver(function(entries, observer) {
				entries.forEach(function(entry) {
					if (entry.isIntersecting) {
						entry.target.classList.add("sichtbar");

					}
					else {
						entry.target.classList.remove("sichtbar");
					}  
				});

			}, {
				root: null,
				threshold: 0.1,
				rootMargin: "-100px 0px -100px 0px",
			});
			
			elements.forEach(function(element) {
				elementObserver.observe(element);
			});
	  	}

und ins quick css dann:

.scrollanimation {
	opacity:0;
	transition: opacity 5s ease;
}
.scrollanimation.sichtbar {
	opacity:1;
}

PS: 5s scheint mir recht lang

can you place instead :

	const wrappers = document.querySelectorAll(".av_textblock_section");
	const targets = document.querySelectorAll(".scrollanimation");
	const animClass = ["sichtbar"];
	
	const observer = new IntersectionObserver((entries, observer) => {
		entries.forEach(entry => {
			const currentIndex = Array.from(wrappers).indexOf(entry.target)
				if (entry.isIntersecting) {	
					targets[currentIndex].classList.add(animClass);	
				} 
				else {
					targets[currentIndex].classList.remove(animClass);
				}
		})
	}, {
		root: null,
		threshold: 0.1,
		rootMargin: "-120px 0px -100px 0px",
	});

	wrappers.forEach(wrapper => {
		observer.observe(wrapper)
	});	

you can change later the rootMargin to your needs.
PS: and sorry the selector on document.querySelectorAll should be with dot on classes

wo sind die Elemente, die die Klasse: scrollanimation haben

das sind die Text elemente ?

As mentioned above – i’m participant as you are – so i can not see private content messages.

for example my snippet for those h2 headings goes to child-theme functions.php:

function observe_headings_on_homepage() {
?>
<script type="text/javascript">	
	const wrappers = document.querySelectorAll(".av-special-heading");
	const targets = document.querySelectorAll(".av-special-heading-tag");
	const animClass = ["in-view"];
	
	const observer = new IntersectionObserver((entries, observer) => {
		entries.forEach(entry => {
			const currentIndex = Array.from(wrappers).indexOf(entry.target)
				if (entry.isIntersecting) {	
					targets[currentIndex].classList.add(animClass);	
				} 
				else {
					targets[currentIndex].classList.remove(animClass);
				}
		})
	}, {
		root: null,
		threshold: 0.1,
		rootMargin: "-120px 0px -100px 0px",
	});

	wrappers.forEach(wrapper => {
		observer.observe(wrapper)
	});	

</script>
<?php
}
add_action( 'wp_footer', 'observe_headings_on_homepage' );

or – do you know that there are different ways to insert that divider. Maybe that is an alternative for you to have not so big dividers on mobile devices.

see the same divider – one with “auto – defined by svg viewport” – and then set to max-height: 150px
the other is set to 150px height.

https://webers-testseite.de/svg-divider/

have a look to smaller screens – on normal desktop screen width – both seems to be the same.

can you post the link to that example page?

Is your header a shrinking one?

ok – if i place those images with different links inside a text-block – i can force that behaviour by adding the link class: mfp-iframe and as rel: lightbox.
see the script – avia-snippet-lightbox.js – a[rel^="lightbox"] – is an autolink element (autolinkElements)

Edit: a solution for masonry is shown on that test-page : https://webers-testseite.de/mixed-lightbox-content/

However, the real reason for the appearance is that all boxes have the same height. This height is then determined by the one box with the image with the corresponding padding. We then have the same height for all the others. This makes it look like a large distance. If you create the seventh box with the same content as above, you will see that the distance is not that big.

With that setting from Ismael you can see :

hm – seems to be hard to mix images with website in iframes in one gallery.
images and videos work from the scratch – if you choose “use custom link and fallback is image”.