i guess your installation is based upon a demo. so open your frontpage in edit mode – on the right side there are boxes for Publish, Page Attributes, Layout etc.
On Layout there is: “Header visibility and transparency”

or if it is not that – you had to look for an existing css that rules the header transparency. However, you should have created this yourself, because as far as I know the demos work without additional quick css entries.

The easiest way would be to see the page in question in order to be able to give better advice.

what about that way (in addition) in the docu via: avf_dynamic_stylesheet_filename
see: https://kriesi.at/documentation/enfold/personalize-theme/

All of the Styling options you set in the theme’s Styling options are saved to a file in your uploads folder called enfold.css. If you have changed the theme name or something like that you may want to rename this file to better reflect your own branding. You can use the following function to do just that:

function avia_change_filename($stylesheet){
   return 'custom_name';
}
add_filter('avf_dynamic_stylesheet_filename', 'avia_change_filename');

mach doch mal einen Versuch auf der Villa Seite und nimm dort statt des 1500×1000 px bildes das Original.
das original hat knapp 500kb das andere 1,2MB. – such mal hier im Forum nach dem Filter : avf_jpeg_quality
da erfährst du warum die recalculierten großen Bilder meist viel mehr Filesize haben als die Originale.
Wenn du nix findest melde ich mich Morgen nochmal.

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?