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”.

First: i think you have an additional lightbox plugin working on that page. Nivo ?
Next: you can declare for an image a custom-link – on lightbox setting there is the option “custom-link fallback is image”
(The disadvantage is that this link is saved globally for the image, i.e. not exclusively for this element.)

on magnific popup there seems to be possibilities to mix content types in one gallery ( e.g. images and video in iframes ) – but i guess you had to decide what lightbox plugin you like to use. the embedded magnificPopup script can do that. ( i hope ;) )
i will test it now on my test page …

Footer with #footer and #socket or only the #socket.
By the way what you are talking about is a fixed positioning – sticky (as a css technical term) is something different.
It will be difficult to move an entire footer (including the #footer with its widget content) to a fixed position without making it difficult to use on mobile devices.
To have only the #socket in that position is easier to get:

#socket {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 999;
}