how to make active element center in react js using css traslateX? or any other way?

I need one help! i am not a master in css. so i did something for my case. but this does not help full. here i try to explain my problem.

any one can help?

Live Code Demo

import "./styles.css";
import React, { useRef, useState, useEffect } from "react";
import styles from "styled-components";
const DotsWrapper = styles.div`
display: flex;
justify-content: center;
top: 0;
left: 0;
right: 0;
bottom: 0;
`;
const Dot = styles.div`
width: 50px;
height: 50px;
text-align: center;
padding: 2rem;
border-radius: 50%;
background-color: ${({ isActive }) => (isActive ? "#fc916a" : "#436073")};
transition: transform 0.3s, background-color 0.3s;
transform: ${({ isActive, index, activeIndex, centerIndex }) => {
const distanceFromCenter = index - centerIndex;
const distanceFromActive = index - activeIndex;
if (isActive) {
return "scale(1.3)";
} else if (distanceFromActive === 1) {
return "translateX(25px)";
} else if (distanceFromActive === -1) {
return "translateX(-25px)";
} else if (distanceFromCenter > 0) {
return "translateX(50px)";
} else if (distanceFromCenter < 0) {
return "translateX(-50px)";
} else {
return "scale(1)";
}
}};
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 20px;
margin: 0 10px;
`;
const CenterDot = styles(Dot)`
transform: scale(1.3);
`;
export default function App() {
const mobileContent = {
page_blocks: [
{ info_date: "01-01-2002" },
{ info_date: "01-01-2003" },
{ info_date: "01-01-2004" },
{ info_date: "01-01-2005" },
{ info_date: "01-01-2006" },
{ info_date: "01-01-2007" }
]
};
const [activeIndex, setActiveIndex] = React.useState(0);
const activeDot = React.useRef(null);
const centerIndex = Math.floor(mobileContent.page_blocks.length / 2);
const windowWidth = window.innerWidth;
const centerPosition = windowWidth / 2;
const [activePosition, setActivePosition] = React.useState(0);
React.useEffect(() => {
const activeDotPosition = activeDot.current.getBoundingClientRect();
const activePosition =
activeDotPosition.x + activeDotPosition.width / 2 - centerPosition;
setActivePosition(activePosition);
}, [windowWidth]);
const result = centerPosition - activePosition;
const translateX = result > 0 ? `${result}px` : `-${Math.abs(result)}px`;
return (
<React.Fragment>
<div
className="line"
style={{
position: "relative",
width: "100%",
overflowX: "hidden",
height: "350px"
}}
>
<br />
<br />
<br />
windowWidth = {windowWidth}
<br />
centerPosition = {centerPosition}
<br />
activePosition = {activePosition}
<br />
result= {result}
<br />
{translateX}
<br />
<DotsWrapper style={{ transform: `translateX(${translateX})` }}>
{mobileContent.page_blocks.map((item, index) =>
index === activeIndex ? (
<CenterDot
key={index}
isActive
index={index}
centerIndex={centerIndex}
activeIndex={activeIndex}
ref={activeDot}
>
{new Date(item.info_date).getFullYear()}
</CenterDot>
) : (
<Dot
key={index}
isActive={index === activeIndex}
index={index}
centerIndex={centerIndex}
activeIndex={activeIndex}
onClick={() => setActiveIndex(index)}
>
{new Date(item.info_date).getFullYear()}
</Dot>
)
)}
</DotsWrapper>
</div>
</React.Fragment>
);
}

the active circle needs to be always the center of windows horizontally.
and the remaining circles need to be auto align based on the active circle.

how to do this? i hope u will understand. anyone can please help me?

i try to explain here.

in this code above, the active dot circle will be in the center.
so what u need to do is,
current

1. get the total width of widows.
2. get the center of the total width position.
3. get the current position of active dot.

ex diagram.

|-------------------|-------------------|
1000px ( total width )

----active-dot-------------------------
250px

so,

we need to measure. how much space or px u need to move active dot for making it center?

(total width ) - ( center position ) - (active dot position )
ex 1:
result = 1000px - 500px - 500px = 250px

ex 2:
result = 1000px - 500px - 800px = -350px

so now
(active dot position ) + ( result )
ex 1:
250px + 250px = 500px
ex 2:
800px + ( - 300px ) = 500px

so using this calculation make an active dot position center ( use css translateX or any other )

and other not active dots will auto align

I think there might be an easier way to think of this. Really what you need to know is the center of the viewport (or the center of a parent containing element if that's how you want it to work, I used the viewport in the snippet below), the offset of the active element from it's parent container, and the size of the active dot. With this you can set the left property of the parent container to the left side of the active dot less the half the width of the active dot so it is centered.

<!-- begin snippet: js hide: false console: true babel: true -->

<!-- language: lang-js -->

/* 
Debounce for handling resize events 
*/
function debounce(cb, ms) {
let timer;
return () => {
clearTimeout(timer);
timer = setTimeout(() => {
timer = null;
cb.apply(this, arguments);
}, ms);
};
}
function Slider({
elements = [2000, 2001, 2002, 2003, 2004, 2005]
}) {
/* Calculate the initial value for the center of the viewport */
const initialCenter = Math.floor(window.innerWidth / 2);
const [viewPortCenter, setViewportCenter] = React.useState(initialCenter);
const [isActive, setIsActive] = React.useState(0);
const wrapperElement = React.useRef(null);
React.useEffect(() => {
/* 
I'm using the viewport here but you could pass a ref 
from a containing element and get its clientWidth 
unless your containing element is a fixed size then
you obviously don't have to worry about resizing
*/
const debouncedHandleResize = debounce(function handleResize() {
setViewportCenter(Math.floor(window.innerWidth / 2));
}, 250);
window.addEventListener("resize", debouncedHandleResize);
return () => {
window.removeEventListener("resize", debouncedHandleResize);
};
}, []);
React.useEffect(() => {
const wrapperOffset = wrapperElement.current.parentNode.offsetLeft;
const element = wrapperElement.current.childNodes[isActive];
const offset = -element.offsetLeft - wrapperOffset - element.clientWidth / 2;
wrapperElement.current.style.setProperty(
"--xPos",
viewPortCenter + offset + "px"
);
}, [isActive, viewPortCenter]);
return (
<ul className="dots-wrapper" ref={wrapperElement}>
{elements.map((el, i) => (
<li
key={el}
onClick={() => setIsActive(i)}
className={isActive === i ? "dot active" : "dot"}
>
{el}
</li>
))}
</ul>
);
}
const rootElement = document.getElementById("root");
const root = ReactDOM.createRoot(rootElement);
root.render(
<Slider />
)

<!-- language: lang-css -->

body {
height: 100vh;
/* gradient to show the mid mark */
background-image: linear-gradient(
90deg,
rgb(248, 248, 228) 50%,
rgb(250, 243, 207) 50%
);
margin: 1rem;
}
.dots-wrapper {
--size: 3rem;
--scale: 1.3;
--xPos: calc(50% - calc(var(--size) * var(--scale) / 2));
align-items: center;
display: flex;
gap: 0.5rem;
left: var(--xPos);
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
transition: left 0.25s ease-in-out, background-color 0.25s ease-in-out;
}
.dot {
aspect-ratio: 1;
background-color: #436073;
border-radius: 50%;
color: white;
cursor: pointer;
display: grid;
flex-shrink: 0;
font-family: sans-serif;
place-content: center;
width: var(--size);
user-select: none;
}
.dot.active {
background-color: #fc916a;
width: calc(var(--size) * var(--scale));
}

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
<div id="root"></div>

<!-- end snippet -->