https://fyeo.nl/wp-content/themes/bb-theme-child/assets/js/ani_img.js?ver=1791462479

1gsap.registerPlugin(ScrollTrigger);
2
3//Selecteer alle kolommen en afbeeldingen met de class "ani_img"
4let ani_images = document.querySelectorAll(".ani_img > .fl-col-content, .ani_img img");
5
6//Voer alleen uit als de builder niet actief is
7if ( typeof FLBuilder == 'undefined' ) {
8//Voer een functie uit voor elke ani_img en noem de enkele "image"
9	ani_images.forEach( (image) => {
10		//Zet de individuele image op een 50% inset clip-path zodat die op basis van scroll naar 0% kan worden geanimeerd
11		gsap.set(image, { "clip-path": "inset(50%)" });
12		// wait until DOM is ready
13		document.addEventListener("DOMContentLoaded", function(event){
14			window.addEventListener("load", function(e){
15				gsap.to(image, {
16					delay: 0.2, duration: 1,
17					"clip-path": "inset(0%)",
18					scrollTrigger: {
19						trigger: image,
20						markers: false,
21						scrub: 1,
22						start: "top bottom-=20%",
23						end: "bottom bottom"
24					},
25					onComplete: () => {}
26				});
27			}, false);
28		});
29	});
30}