Restart animations when back in viewport

a jQuery Option could be to have intersectionObserver and give to elements that comes into viewport a class – and if they are out remove that class.

see here f.e. the headings: https://webers-web.info/

example code could be:

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

for that page above i set then the css in quick css:

.heading-animation .av-special-heading-tag .heading-wrap,
#top.privacy-policy .heading-animation .av-special-heading-tag {
    transform: scale(0);
    transform-origin: center center;
    opacity: 0;
    transition: 0.5s all ease;
}

.heading-animation .av-special-heading-tag.in-view .heading-wrap,
#top.privacy-policy .heading-animation .av-special-heading-tag.in-view {
    transform: scale(1);
    transform-origin: center center;
    opacity: 1;
    transition: 1s all ease;
}

you can do that with columns etc.

maybe a mod knows why on some animations the “trick” will not work.
it sometimes only removes not all classes from all ( each ) observed element.

function refresh_enfold_keyframe_animations() {
?>
<script type="text/javascript">	
	const hiddenElements = document.querySelectorAll('.av-animated-generic');
	const observer = new IntersectionObserver((entries) => {
	    entries.forEach((entry) => {
	        if (!entry.isIntersecting) {
				entry.target.classList.remove('avia_start_animation', 'avia_start_delayed_animation');
	        }
	        else {
	        	return;
	        }
	    })
	})
	hiddenElements.forEach((element) => observer.observe(element));
</script>
<?php
}
add_action('wp_footer', 'refresh_enfold_keyframe_animations', 9999);

see: https://enfold.webers-webdesign.de/category-header/

Yes – some animations – like the reveal animation – create extra child containers – then the target will be different.
but nevertheless on f.e. simple left to right – it works sometimes – sometimes not – so the code is useless.
So – a developer had to look for it – if there is a chance to “refresh” those keyframe animations.