Estoy trabajando en GSAP y tengo dos elementos en diferentes páginas que tienen la misma clase y quiero aplicarles animación usando scrollTrigger cuando llego al elemento, así que si hay alguna manera de hacerlo en función en lugar de dado para ellos una clase específica y repitiendo mi auto?

aquí está mi código:

HTML:

 <div class="container"></div> <div class="containe"> <img class="image" src="./card-1.png" alt=""> </div> <div class="container"> <img class="image" src="./card-2.png" alt=""> </div>

CSS:

 .container{ height: 100vh; }

GSAP:

 gsap.to('.image' ,{ x:500, rotation:250, duration:1, opacity:1, scrollTrigger:{ trigger:'.image', start:'top center', toggleActions:'restart none none none', } })