Here is my home page ts file animation function code
topBoxAnimation(){
// define images
const images1 = [
"assets/images/home/falling_part/Falling_Part_00000.png",
"assets/images/home/falling_part/Falling_Part_00001.png",
"assets/images/home/falling_part/Falling_Part_00002.png",
"assets/images/home/falling_part/Falling_Part_00003.png",
"assets/images/home/falling_part/Falling_Part_00004.png",
"assets/images/home/falling_part/Falling_Part_00005.png",
"assets/images/home/falling_part/Falling_Part_00006.png",
"assets/images/home/falling_part/Falling_Part_00007.png",
"assets/images/home/falling_part/Falling_Part_00008.png",
"assets/images/home/falling_part/Falling_Part_00009.png",
"assets/images/home/falling_part/Falling_Part_00010.png",
"assets/images/home/falling_part/Falling_Part_00011.png",
"assets/images/home/falling_part/Falling_Part_00012.png",
"assets/images/home/falling_part/Falling_Part_00013.png",
"assets/images/home/falling_part/Falling_Part_00014.png",
"assets/images/home/falling_part/Falling_Part_00015.png",
"assets/images/home/falling_part/Falling_Part_00016.png",
"assets/images/home/falling_part/Falling_Part_00017.png",
"assets/images/home/falling_part/Falling_Part_00018.png",
"assets/images/home/falling_part/Falling_Part_00019.png",
"assets/images/home/falling_part/Falling_Part_00020.png",
"assets/images/home/falling_part/Falling_Part_00021.png",
"assets/images/home/falling_part/Falling_Part_00022.png",
"assets/images/home/falling_part/Falling_Part_00023.png",
"assets/images/home/falling_part/Falling_Part_00024.png",
"assets/images/home/falling_part/Falling_Part_00025.png",
"assets/images/home/falling_part/Falling_Part_00026.png",
"assets/images/home/falling_part/Falling_Part_00027.png",
"assets/images/home/falling_part/Falling_Part_00028.png",
"assets/images/home/falling_part/Falling_Part_00029.png",
"assets/images/home/falling_part/Falling_Part_00030.png",
"assets/images/home/falling_part/Falling_Part_00031.png",
"assets/images/home/falling_part/Falling_Part_00032.png",
"assets/images/home/falling_part/Falling_Part_00033.png",
"assets/images/home/falling_part/Falling_Part_00034.png",
"assets/images/home/falling_part/Falling_Part_00035.png",
"assets/images/home/falling_part/Falling_Part_00036.png",
"assets/images/home/falling_part/Falling_Part_00037.png",
"assets/images/home/falling_part/Falling_Part_00038.png",
"assets/images/home/falling_part/Falling_Part_00039.png",
"assets/images/home/falling_part/Falling_Part_00040.png",
"assets/images/home/falling_part/Falling_Part_00041.png",
"assets/images/home/falling_part/Falling_Part_00042.png",
"assets/images/home/falling_part/Falling_Part_00043.png",
"assets/images/home/falling_part/Falling_Part_00044.png",
"assets/images/home/falling_part/Falling_Part_00045.png",
"assets/images/home/falling_part/Falling_Part_00046.png",
"assets/images/home/falling_part/Falling_Part_00047.png",
"assets/images/home/falling_part/Falling_Part_00048.png",
"assets/images/home/falling_part/Falling_Part_00049.png",
"assets/images/home/falling_part/Falling_Part_00050.png",
"assets/images/home/falling_part/Falling_Part_00051.png",
"assets/images/home/falling_part/Falling_Part_00052.png",
"assets/images/home/falling_part/Falling_Part_00053.png",
"assets/images/home/falling_part/Falling_Part_00054.png",
"assets/images/home/falling_part/Falling_Part_00055.png",
"assets/images/home/falling_part/Falling_Part_00056.png",
"assets/images/home/falling_part/Falling_Part_00057.png",
"assets/images/home/falling_part/Falling_Part_00058.png",
"assets/images/home/falling_part/Falling_Part_00059.png",
"assets/images/home/falling_part/Falling_Part_00060.png",
];
const obj1 = {curImg: 0};
gsap.to(obj1,
{
scrollTrigger:{
trigger: ".page",
toggleActions:"restart pause reverse pause",
start:"top top",
end: "+=140%",
//markers:true,
scrub:1,
},
duration:10,
immediateRender: true,
ease: "power2",
curImg: images1.length - 1, // animate propery curImg to number of images
roundProps: "curImg", // only integers so it can be used as an array index
onUpdate: function () {
// set the image source
//$("#fallingBox1").attr("src", images1[obj1.curImg]);
if (document.querySelector("#fallingBox1")){
gsap.set("#fallingBox1", {
attr: { src: images1[obj1.curImg]} ,
duration : 2,
css:{transition:"all 2s ease"},
});
}
}
}
);
}