Animation starts when texts are visible in the browser

may i see your page too? As participant i can not see private content area – so if it is possible to post here …

see here for example an enfold page with implementing Intersection Observer ( scroll to “Dienstleistungen” ) –
big advantage is that each time the objects comes into viewport – animation starts again.

by the way all h2 headings are animated that way.

https://webers-web.info/

where did you “inject” your script? – via child-theme functions.php ?

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

wo sind die Elemente, die die Klasse: scrollanimation haben

das sind die Text elemente ?

dghdfgh

• This reply was modified 4 hours, 50 minutes ago by Guenni007.

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

ich kann denke ich deutsch mit dir schreiben?

entferne mal bitte dein script. da du auch andere Texte die nicht im Textblock sind beieinflussen willst muss es noch ein wenig anders gemacht werden.

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

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);
			});
	  	}
});

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.

wo hast du dieses CSS eingefügt:

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