<div>
  <h2>Random:</h2>
  <img 
   class="logo"
   width="100"     
    src="https://cdn.worldvectorlogo.com/logos/gsap-greensock.svg" />
</div>

<div class="mt-1">
   <h2>Function:</h2>
<img 
 class="logo-function"
 width="100"     src="https://cdn.worldvectorlogo.com/logos/gsap-greensock.svg" alt="logo-1" />


<img 
 class="logo-function"
 width="100"     src="https://cdn.worldvectorlogo.com/logos/gsap-greensock.svg" alt="logo-2"/>
  
 </div>

div {
  border: 2px solid lightblue;
  border-radius: 8px;
  padding: 0.5rem 1rem;
}
img {
  display: block;
}
.mt-1 {
  margin-top: 1rem;
}

const target = document.querySelector('.logo')
const targetAry = document.querySelectorAll('.logo-function')

// random setup
gsap.to(target, {
  duration: 2,
  x: 'random(-100, 200)',
  ease: 'back'
  // x: 'random([0, 50, 100])',
})

// funciton setup
gsap.to(targetAry, {
  duration: 2,
  ease: 'back',
  x: function(index, target, targetAry) {
    console.log(index, target, targetAry)
    return (index + 1) * 100
  }
})