[SOLVED] Animate item to center on click

Issue

This Content is from Stack Overflow. Question asked by Rad

enter image description here
so I have this three button I need to find a way any of these two solution
1 – make animation so that each time one button come in front and the two other go to the back
2 – Or when I click on a button it come to the front and the other go to the back

here my code for the style

.index-environement-specialise-boutton-main {
    width: 279px;
    height: 76px;
    border: 1px solid var(--color-text-primary);
    border-radius: 46px;
    text-align: center;
    font-style: normal !important;
    font-variant: normal !important;
    font-weight: bold !important;
    font-size: 32px !important;
    line-height: 34px !important;
    font-family: Poppins !important;
    letter-spacing: 0.5px;
    color: var(--color-text-primary);
    opacity: 1;
    margin-inline: 2.625rem;
    position: relative;
    box-shadow: 0px 0px 222px 150px rgba(193,186,243,0.75);
    -webkit-box-shadow: 0px 0px 222px 150px rgba(193,186,243,0.75);
    -moz-box-shadow: 0px 0px 222px 150px rgba(193,186,243,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
}
    .index-environement-specialise-boutton-main.b1{
        background: #C1BAF3 0% 0% no-repeat padding-box;
    }

    .index-environement-specialise-boutton-main.b2{
        background: #F8D6B5 0% 0% no-repeat padding-box;
    }

    .index-environement-specialise-boutton-main.b3{
        background: #F3B9C5 0% 0% no-repeat padding-box;
    }

.index-environement-specialise-boutton-behind {
    width: 176px;
    height: 48px;
    border: 1px solid var(--color-text-primary);
    border-radius: 46px;
    text-align: center;
    font-style: normal !important;
    font-variant: normal !important;
    font-weight: bold !important;
    font-size: 20px !important;
    line-height: 21px !important;
    font-family: Poppins !important;
    letter-spacing: 0.5px;
    color: var(--color-text-primary);
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
    .index-environement-specialise-boutton-behind.b1{
        background: #C1BAF3 0% 0% no-repeat padding-box;
    }
    .index-environement-specialise-boutton-behind.b2{
        background: #F8D6B5 0% 0% no-repeat padding-box;
    }
    .index-environement-specialise-boutton-behind.b3{
        background: #F3B9C5 0% 0% no-repeat padding-box;
    }

    .index-environement-specialise-boutton-main:hover, .index-environement-specialise-boutton-behind:hover {
        color: var(--color-text-primary);
    }

<div class="w-100 index-environement-specialise-col-right">
        <a class="index-environement-specialise-boutton-behind b2" role="button" href="javascript:void(0)"  id="A2" runat="server" title="hôtesses">
            hôtesses
        </a>
        <a class="index-environement-specialise-boutton-main b1" role="button" href="javascript:void(0)"  id="A3" runat="server" title="sitters">
            sitters
        </a>
        <a class="index-environement-specialise-boutton-behind b3" role="button" href="javascript:void(0)"  id="A4" runat="server" title="vendeurs">
            vendeurs
        </a>
    </div>



Solution

With some CSS flex positioning, with JS’s getBoundingClientRect() method and some simple math — animate the buttons wrapper using CSS3 transition and transform (inside a .carousel container) by the center point of each button item in relation to the horizontal center of the carousel:

// DOM helpers:

const els = (sel, par) => (par || document).querySelectorAll(sel);
const el = (sel, par) => (par || document).querySelector(sel);


// Carousel:

const btnCarousel = (elCarousel) => {

  const move = (evt) => {
    const elButton = evt.target.closest("button");
    if (!elButton) return; // do nothing
    const elSlider = el(".carousel-slider", elCarousel);

    const bcrButton = elButton.getBoundingClientRect();
    const bcrCarousel = elCarousel.getBoundingClientRect();
    const bcrSlider = elSlider.getBoundingClientRect();

    const centerCarousel = bcrCarousel.width / 2;
    const centerButton = bcrButton.width / 2;
    const xButton = bcrButton.left;
    const xSlider = bcrSlider.left;

    const x = centerCarousel - xButton - centerButton + xSlider;

    elSlider.style.translate = `${x}px 0`;
  };

  elCarousel.addEventListener("click", move);
};

els(".carousel").forEach(btnCarousel);
.carousel {
  position: relative;
  overflow: hidden;
}

.carousel-slider {
  display: flex;
  margin: 0 auto;
  justify-content: center;
  gap: 1rem;
  transition: 0.5s;
}
<div class="carousel">
  <div class="carousel-slider">
    <button type="button">1 Button</button>
    <button type="button">2 Btn</button>
    <button type="button">3 Button longer text</button>
  </div>
</div>

<div class="carousel">
  <div class="carousel-slider">
    <button type="button">1 Super Button</button>
    <button type="button">2 Some Button</button>
    <button type="button">3</button>
  </div>
</div>

Add a .is-active on click, some more styles, a CSS transition-origin to the button’s center-top and you’re almost done:

// DOM helpers:

const els = (sel, par) => (par || document).querySelectorAll(sel);
const el = (sel, par) => (par || document).querySelector(sel);


// Carousel:

const btnCarousel = (elCarousel) => {

  const elButtons = els("button", elCarousel);

  const move = (evt) => {
    const elButton = evt.target.closest("button");
    if (!elButton) return; // do nothing
    const elSlider = el(".carousel-slider", elCarousel);

    const bcrButton = elButton.getBoundingClientRect();
    const bcrCarousel = elCarousel.getBoundingClientRect();
    const bcrSlider = elSlider.getBoundingClientRect();

    const centerCarousel = bcrCarousel.width / 2;
    const centerButton = bcrButton.width / 2;
    const xButton = bcrButton.left;
    const xSlider = bcrSlider.left;

    const x = centerCarousel - xButton - centerButton + xSlider;

    elSlider.style.translate = `${x}px 0`;
    elButtons.forEach(el => el.classList.remove("is-active"));
    elButton.classList.add("is-active");
  };

  elCarousel.addEventListener("click", move);
};

els(".carousel").forEach(btnCarousel);
/* QuickReset*/

*,
 ::before,
 ::after {
  margin: 0;
  box-sizing: border-box;
}

body {
  font: 16px/1.5 sans-serif;
  background: linear-gradient(90deg, rgba(244, 246, 255, 1) 0%, rgba(213, 208, 247, 1) 50%, rgba(244, 246, 255, 1) 100%);
}

.carousel {
  position: relative;
  overflow: hidden;
  padding: 4rem 0;
}

.carousel-slider {
  display: flex;
  margin: 0 auto;
  justify-content: center;
  gap: 4rem;
  transition: 0.5s;
}

.btn {
  border: 0.1rem solid #455171;
  padding: 0.4em 2.6em;
  font-weight: 900;
  font-size: 1rem;
  border-radius: 2em;
  cursor: pointer;
}

.carousel .btn {
  transform-origin: center top;
  transition: 0.5s;
}

.carousel .btn.is-active {
  scale: 1.4;
}

.bg-1 {
  background-color: #ecb9cc;
}

.bg-2 {
  background-color: #c1baf3;
}

.bg-3 {
  background-color: #f0d2be;
}
<div class="carousel">
  <div class="carousel-slider">
    <button type="button" class="btn bg-1">Hôtesses</button>
    <button type="button" class="btn bg-2 is-active">Sitters</button>
    <button type="button" class="btn bg-3">Vendeurs</button>
  </div>
</div>    


 This Question was asked in  StackOverflow by  Rad and Answered by Roko C. Buljan It is licensed under the terms of 
CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.
people found this article helpful. What about you?