I'm working on GSAP and I have two elements in different pages have the same class and I want to apply on them animation using scrollTrigger when I reach to the element, so if there a way I can do this in on function instead of given to them a specific class and repeating my self?

here is my code:

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',
    }
})