Всем привет. Я захотел сделать карточную и сразу столкнулся с проблемой. У меня есть блок из карт, хочу с помощью библиотеки GSAP сделать анимацию для сдвига вправо. Я обернул анимацию в функцию. В общем я хотел сделать, чтобы при нажатие на блок карт- у меня передвигалась одна карта, а не все. Как это реализовать подскажите, пожалуйста.
function image(){
gsap.to(".img",{
x:500,
})
}
const img=document.querySelector('.img');
img.addEventListener('click',image);
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
background: #272727;
color: #fff;
}
.images {
position: relative;
}
img {
position: absolute;
}
img:nth-child(2) {top: 10px;left: 10px;}
img:nth-child(3) {top: 20px;left: 20px;}
img:nth-child(4) {top: 30px;left: 30px;}
img:nth-child(5) {top: 40px;left: 40px;}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./index.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<title>Россия</title>
</head>
<body>
<div class="images">
<img class="img" src="http://via.placeholder.com/250x250/ff00ff/00ff00">
<img class="img" src="http://via.placeholder.com/250x250/c009ff/ff0000">
<img class="img" src="http://via.placeholder.com/250x250/0000ff/000fff">
<img class="img" src="http://via.placeholder.com/250x250/dd00ff/000000">
<img class="img" src="http://via.placeholder.com/250x250/0d00ff/fff000">
</div>
<body>
</html>