html – jQuery animation. Movement of points along a line

Question:

Hello, how can you implement a similar animation for switching the slider by points. Something like this

How it should be: when you click on a point, it becomes exactly in the center, the rest are aligned under it.

Here's what I got, when you click on a point, it will become centered, but how to make other points move relative to the active one? Tell me how it is possible to implement it?

    var ww = jQuery(window).width();

        jQuery('.dots li').each(function (i) {

            jQuery(this)
                .css('right', (ww/2 - i*50)-20 +"px")
                .attr('data-count',i);

        });

        jQuery('.dots li').click(function () {
            jQuery(this).animate({
                right: (ww/2)-20             
            },500);
        })

.intro_temp{
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000000;
}


.dots{
  height: 70px;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 1s ease;
}


.dots li{
  transition: all 1s ease;
  height: 50px;
  width: 50px;
  display: inline-block;
  border: 1px solid $white;
  margin: auto ;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  cursor: pointer;
  transform: rotate(45deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section   class="intro_temp">

        <ul class="dots">
            <li>
                 <button></button>
            </li>
            <li>
                <button></button>
            </li>
            <li>
                <button></button>
            </li>
            <li>
                <button></button>
            </li>
        </ul>

    </section>

Answer:

You can do something like this. The essence of the changes is that we write animation for each element separately.

  var ww = jQuery(window).width();
  var central=0;
        jQuery('.dots li').each(function (i) {

            jQuery(this)
                .css('right', (ww/2 - i*50)-20 +"px")
                .attr('data-count',i);
                
            jQuery(this).click(function () {
              central=i;
              jQuery('.dots li').each(function (index){
                 jQuery(this).animate({right: ww/2- 20 + (central-index)*50},500);
             });
             })

        })

.intro_temp{
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000000;
}


.dots{
  height: 70px;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 1s ease;
}


.dots li{
  transition: all 1s ease;
  height: 50px;
  width: 50px;
  display: inline-block;
  border: 1px solid $white;
  margin: auto ;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  cursor: pointer;
  transform: rotate(45deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section   class="intro_temp">

        <ul class="dots">
            <li>
                 <button></button>
            </li>
            <li>
                <button></button>
            </li>
            <li>
                <button></button>
            </li>
            <li>
                <button></button>
            </li>
        </ul>

    </section>

Post Views: 5