Hey guys I am trying to make random images move across the page, I found a tutorial here and manage to make something but my elements go out of the screen how can i constrain them to not go outside my container?
/* Random Moving Employees */
const employees = gsap.utils.toArray(".about-us__employee");
const container = document.querySelector(".about-us__header");
gsap.set(employees, {xPercent: "random(-50, 50)", yPercent: "random(-50, 50)"});
let random = gsap.utils.random;
function wander(el) {
let timeline = gsap.timeline({});
timeline.to(el, {
x: random(window.innerWidth * -0.4, window.innerWidth * 0.4),
y: random(0, container.offsetHeight * -0.4),
ease: "power2.out",
duration: random(2, 2.8),
onComplete: () => wander(el)
})
}
gsap.utils.toArray(".about-us__employee").forEach(wander);