Bitte stellt sicher, dass die Option "Animation on Scroll" in den globalen Style-Einstellungen am Pinsel 🖌️ von Mobirise deaktiviert ist.
Hier zeige ich als Beispiel ein JavaScript, das ich mit Hilfe der KI "ChatGPT" erstellt habe. Dieses Script ist so gestaltet wie auch die Option "Animation on Scroll" von Mobirise, allerdings mit eigenen Optionen und der neuesten Datei animate.css, die hier hier downloaden könnt: https://animate.style/
Das Script ist so konzipiert, das die Animation beim Scrollen nur einmalig stattfindet. Wollt ihr das nochmals testen müsst ihr diese Seite neu laden.
Zunächst benötigt ihr die CSS-Datei, die ihr entweder im Bereich "Inside <head> code" der Seiteneinstellungen verlinkt:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
oder direkt downloadet, wie ich es hier getan habe. Klicke hier zum Download meiner Datei und dann eben einen internen Link zu der Datei im Bereich "Inside <head> code" setzt, die ich hier in ein neu erstelltes Verzeichnis "animate-css" kopiert habe:
<link rel="stylesheet" href="animate-css/animate.css">
Nun fügt ihr die jeweilige Class von der Seite https://animate.style/ in das Javascript ein, das in den Seitenbereich "End of <body> code" gehört.
Ihr habt die Möglichkeit, aus nahezu 100 verschiedenen Animationen auszuwählen. Die verschiedenen CSS-Klassen findet ihr auf der Webseite von animate.style. Um die jeweilige Klasse zu kopieren, bewegt einfach die Maus über das kleine quadratische Symbol 
Hier verwende ich die class="animate__fadeInUp".
<!-- JavaScript generated by Tommy with the help of AI ChatGPT -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Select all elements that should be animated
let animatedElements = document.querySelectorAll('.animate-on-scroll');
function checkScrollPosition() {
animatedElements.forEach(function(element) {
let elementPosition = element.getBoundingClientRect().top;
let windowHeight = window.innerHeight;
// When the element comes into the visible area and the animation has not yet been executed
if (elementPosition < windowHeight - 100 && !element.classList.contains('visible')) {
// Add classes to the animation
element.classList.add('animate__animated', 'animate__fadeInUp');
element.classList.add('visible'); // Ensure that it is only animated once
}
});
}
// Monitor scroll event
window.addEventListener('scroll', checkScrollPosition);
// Initial call when loading the page
checkScrollPosition();
});
</script>
Dabei muss die erste class="animate__animated" immer eingesetzt werden und die zweite Class, hier im Beispiel class="animate__fadeInUp" immer den Prefix "animate__" tragen. Es ändert sich also jeweils nur der Name der Animation am Ende.
Nun müsst ihr jedem Element, das diese Animation tragen soll, diese Klasse hinzufügen: class="animate-on-scroll".
Das kann natürlich an unterschiedlichen Stellen sein, also auch z.B. in einem äußeren <div> eines Containers:
<div class="animate-on-scroll row justify-content-center">
Bitte guckt euch auch meine Seite "Animierte Elemente" an, dort wird nur die CSS, ohne JavaScript, verwendet. Man kann also auch hier noch zusätzlich zur class="animate-on-scroll" aus dem JavaScript, weitere CSS Klassen wie z.B. eine Verzögerung als Class in der HTML hinzufügen.
Viel Erfolg.