Hello! I have two blocks with same classes .container. Inside each .container I want to have two animated divs: .box1 and .box2. Animation for .box1 and .box2 must start when parent .container is in viewport. How to use the same trigger for two divs?
gsap.utils.toArray(".div1").forEach(box1 => {
gsap.to(box1, {
ease: "none",
transform: "translateY(-5vw)",
scrollTrigger: {
trigger: container,
start: 'top bottom',
end: 'top top',
scrub: 0.1
}
});
});
gsap.utils.toArray(".div2").forEach(box2 => {
gsap.to(box2, {
ease: "none",
transform: "translateY(5vw)",
scrollTrigger: {
trigger: container,
start: 'top bottom',
end: 'top top',
scrub: 0.1
}
});
});