GSAP animations

followed this timothy ricks tutorial for context. https://www.youtube.com/watch?v=m4YKslkob9Q&t=48s
Unfortunately not covering my specific use case

I have an element “.scroll_img-hold”
Currently they have a staggered animation (bad as they animate even when user cant see them in viewport.)
So, i want to change this to achieve a similar effect, each “.scroll_img-hold” item animates “in a staggered way” but the animation on each item happens when it enters the view.
Say, when each image enters viewport it scales in, or fades in. and the same when it is leaving

Another thing id like to achieve is have the each “.scroll_img-hold” item scroll at different speeds as each one is scrolling through the viewport, almost like a parallax effect.

Pasting my code as it might help?

let loopTl = gsap.timeline({ repeat: -1, yoyo: true });
loopTl.to(“.scroll_img-hold”, {
y: “-2rem”,
duration: 2,
ease: “power1.inOut”,
});

let loadTl = gsap.timeline();
loadTl.from(“.scroll_img-hold”, {
scale: 0,
stagger: { amount: 0.5 },
duration: 1.5,
ease: “power4.out”,
});

let scrollTl = gsap.timeline({
scrollTrigger: {
trigger: “.bio”,
start: “top bottom”,
end: “top 70%”,
markers: true,
toggleActions: “none play none reset”,
},
});
scrollTl.from(“.bio-img”, {
Scrub: true,
y: “20rem”,
rotation: -79,
opacity: 0,
scale: 0.6,
duration: 0.8,
ease: “power4.out”,
stagger: { each: 0.6 },
});


Here is my site Read-Only: LINK
https://preview.webflow.com/preview/scope-bd0b1d?utm_medium=preview_link&utm_source=designer&utm_content=scope-bd0b1d&preview=befac5049a3717f20122128c84acdc8f&workflow=preview
(how to share your site Read-Only link)